Working on adding a workspace/ sidebar view

src/components/LinkItems/ItemGroup.vue

@@ -70,7 +70,7 @@ export default {
       return this.displayData.itemSize || this.itemSize;
     },
     isGridLayout() {
-      return this.displayData.layout === 'grid'
+      return this.displayData.sectionLayout === 'grid'
         || !!(this.displayData.itemCountX || this.displayData.itemCountY);
     },
     gridStyle() {

src/components/PageStrcture/Footer.vue

@@ -29,6 +29,9 @@ export default {
 <style scoped lang="scss">
 
 footer {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
   padding: 0.25rem;
   text-align: center;
   color: var(--medium-grey);

src/components/Workspace/SideBar.vue

@@ -0,0 +1,43 @@
+<template>
+  <nav class="side-bar">
+    <div v-for="(section, index) in sections" :key="index">
+      <SideBarItem class="item" :icon="section.icon" :title="section.title" />
+    </div>
+  </nav>
+</template>
+
+<script>
+
+import SideBarItem from '@/components/Workspace/SideBarItem.vue';
+
+export default {
+  name: 'SideBar',
+  inject: ['config'],
+  props: {
+    sections: Array,
+  },
+  components: {
+    SideBarItem,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+nav.side-bar {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background: var(--side-bar-background);
+  color: var(--side-bar-color);
+  height: 100%;
+  width: 3rem;
+  text-align: center;
+  .item:not(:last-child) {
+    border-bottom: 1px dashed var(--side-bar-color);
+  }
+}
+
+</style>

src/components/Workspace/SideBarItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="side-bar-item">
+    <Icon v-if="icon" :icon="icon" size="small" />
+    <p v-else>{{ title }}</p>
+  </div>
+</template>
+
+<script>
+
+import Icon from '@/components/LinkItems/ItemIcon.vue';
+import Defaults from '@/utils/defaults';
+
+export default {
+  name: 'SideBarItem',
+  inject: ['config'],
+  props: {
+    icon: String,
+    title: String,
+  },
+  mounted() {
+    this.initiateFontAwesome();
+  },
+  components: {
+    Icon,
+  },
+  methods: {
+    initiateFontAwesome() {
+      const fontAwesomeScript = document.createElement('script');
+      const faKey = this.config.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;
+      fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
+      document.head.appendChild(fontAwesomeScript);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+div.side-bar-item {
+  color: var(--side-bar-color);
+  background: var(--side-bar-background);
+  text-align: center;
+}
+
+</style>

src/components/Workspace/WebContent.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="web-content">
+    <iframe :src="url" />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'WebContent',
+  props: {
+    url: String,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+iframe {
+  position: absolute;
+  left: 3rem;
+  height: calc(100% - 6.3rem);
+  width: calc(100% - 3rem);
+  border: none;
+  background: white;
+}
+
+</style>

src/router.js

@@ -3,8 +3,10 @@ import Router from 'vue-router';
 
 import Home from '@/views/Home.vue';
 import Login from '@/views/Login.vue';
+import Workspace from '@/views/Workspace.vue';
 import { isLoggedIn } from '@/utils/Auth';
 import { appConfig, pageInfo, sections } from '@/utils/ConfigAccumalator';
+import { metaTagData } from '@/utils/defaults';
 
 Vue.use(Router);
 
@@ -26,12 +28,17 @@ const router = new Router({
       },
       meta: {
         title: pageInfo.title || 'Home Page',
-        metaTags: [
-          {
-            name: 'description',
-            content: 'A simple static homepage for you\'re server',
+        metaTags: metaTagData,
       },
-        ],
+    },
+    {
+      path: '/workspace',
+      name: 'workspace',
+      component: Workspace,
+      props: { appConfig, pageInfo, sections },
+      meta: {
+        title: pageInfo.title || 'Dashy Workspace',
+        metaTags: metaTagData,
       },
     },
     {

src/styles/color-palette.scss

@@ -87,4 +87,6 @@
   --about-page-color: var(--white);
   --about-page-background: #0b1021;
   --about-page-accent: var(--primary);
+  --side-bar-background: var(--background-darker);
+  --side-bar-color: var(--primary);
 }

src/utils/ConfigAccumalator.js

@@ -8,13 +8,17 @@ import Defaults, { localStorageKeys } from '@/utils/defaults';
 import conf from '../../public/conf.yml';
 
 export const appConfig = (() => {
+  let usersAppConfig = Defaults.appConfig;
   if (localStorage[localStorageKeys.APP_CONFIG]) {
-    return JSON.parse(localStorage[localStorageKeys.APP_CONFIG]);
+    usersAppConfig = JSON.parse(localStorage[localStorageKeys.APP_CONFIG]);
   } else if (conf.appConfig) {
-    return conf.appConfig;
-  } else {
-    return Defaults.appConfig;
+    usersAppConfig = conf.appConfig;
   }
+  usersAppConfig.layout = localStorage[localStorageKeys.LAYOUT_ORIENTATION]
+    || conf.appConfig.layout || Defaults.layout;
+  usersAppConfig.iconSize = localStorage[localStorageKeys.ICON_SIZE]
+    || conf.appConfig.iconSize || Defaults.iconSize;
+  return usersAppConfig;
 })();
 
 export const pageInfo = (() => {

src/utils/ConfigSchema.json

@@ -69,6 +69,25 @@
           "pattern": "^[a-z0-9]{10}$",
           "description": "API key for font-awesome"
         },
+        "layout": {
+          "enum": [
+            "horizontal",
+            "vertical",
+            "auto",
+            "sidebar"
+          ],
+          "default": "auto",
+          "description": "Specifies sections layout orientation on the home screen"
+        },
+        "iconSize": {
+          "enum": [
+            "small",
+            "medium",
+            "large"
+          ],
+          "default": "medium",
+          "description": "The size of each link item / icon"
+        },
         "cssThemes": {
           "type": "array",
           "description": "Theme names to be added to the dropdown",
@@ -195,7 +214,7 @@
                 "default": 1,
                 "description": "The amount of space that the section spans horizontally"
               },
-              "layout": {
+              "sectionLayout": {
                 "enum": [
                   "grid",
                   "auto"

src/utils/defaults.js

@@ -77,4 +77,7 @@ module.exports = {
   },
   backupEndpoint: 'https://dashy-sync-service.as93.net',
   splashScreenTime: 1900,
+  metaTagData: [
+    { name: 'description', content: 'A simple static homepage for you\'re server' },
+  ],
 };

src/views/Home.vue

@@ -64,14 +64,14 @@ export default {
   }),
   computed: {
     layoutOrientation: {
-      get: () => localStorage[localStorageKeys.LAYOUT_ORIENTATION] || Defaults.layout,
+      get() { return this.appConfig.layout || Defaults.layout; },
       set: function setLayout(layout) {
         localStorage.setItem(localStorageKeys.LAYOUT_ORIENTATION, layout);
         this.layout = layout;
       },
     },
     iconSize: {
-      get: () => localStorage[localStorageKeys.ICON_SIZE] || Defaults.iconSize,
+      get() { return this.appConfig.iconSize || Defaults.iconSize; },
       set: function setIconSize(iconSize) {
         localStorage.setItem(localStorageKeys.ICON_SIZE, iconSize);
         this.itemSizeBound = iconSize;

src/views/Workspace.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="work-space">
+    <SideBar :sections="sections" />
+    <WebContent :url="url" />
+  </div>
+</template>
+
+<script>
+
+import SideBar from '@/components/Workspace/SideBar';
+import WebContent from '@/components/Workspace/WebContent';
+
+export default {
+  name: 'Workspace',
+  props: {
+    sections: Array,
+  },
+  data: () => ({
+    url: '',
+  }),
+  components: {
+    SideBar,
+    WebContent,
+  },
+};
+
+</script>
+
+<style scoped lang="scss">
+
+</style>