Adds ability for user to add custom nav bar links plus UI improvements

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="dashy" data-theme="dark">
-    <Header :pageInfo="getPageInfo(pageInfo)" />
+    <Header :pageInfo="pageInfo" />
     <router-view />
     <Footer v-if="showFooter" :text="getFooterText()" />
   </div>
@@ -19,10 +19,13 @@ export default {
     Footer,
   },
   data: () => ({
-    pageInfo: conf.pageInfo || Defaults.pageInfo,
+    // pageInfo: this.getPageInfo(conf.pageInfo),
     appConfig: conf.appConfig || Defaults.appConfig,
     showFooter: Defaults.visibleComponents.footer,
   }),
+  computed: {
+    pageInfo: function pi() { return this.getPageInfo(conf.pageInfo); },
+  },
   methods: {
     /* Returns either page info from the config, or default values */
     getPageInfo(pageInfo) {
@@ -38,7 +41,8 @@ export default {
         return {
           title: localPageInfo.title || pageInfo.title || defaults.title,
           description: localPageInfo.description || pageInfo.description || defaults.description,
-          navLinks: pageInfo.navLinks || defaults.navLinks,
+          navLinks: localPageInfo.navLinks || pageInfo.navLinks || defaults.navLinks,
+          footerText: localPageInfo.footerText || pageInfo.footerText || defaults.footerText,
         };
       }
       return defaults;

src/components/Configuration/ConfigContainer.vue

@@ -26,7 +26,7 @@
     <TabItem name="Edit Sections">
       <JsonEditor :sections="sections" />
     </TabItem>
-    <TabItem name="View Raw YAML">
+    <TabItem name="View Raw YAML" class="code-container">
       <pre>{{this.jsonParser(this.config)}}</pre>
       <a class="download-button" href="/conf.yml" download>Download Config</a>
     </TabItem>
@@ -102,7 +102,7 @@ export default {
 
 pre {
   color: var(--config-code-color);
-  background: var(--config-code-background);
+  padding: 0.5rem 1rem;
 }
 
 a.config-button, button.config-button {
@@ -137,22 +137,27 @@ a.config-button, button.config-button {
   }
 }
 
-a.download-button {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  padding:  0.25rem 0.5rem;
-  font-size: 1rem;
-  color: var(--config-settings-background);
-  border-radius: var(--curve-factor);
-  cursor: pointer;
-  &:hover {
-    background: var(--config-settings-color);
+div.code-container {
+  background: var(--config-code-background);
+  a.download-button {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    padding:  0.25rem 0.5rem;
+    font-size: 1rem;
+    color: var(--config-code-color);
+    border-radius: var(--curve-factor);
+    cursor: pointer;
+    &:hover {
+      color: var(--config-code-background);
+      background: var(--config-settings-color);
+    }
   }
 }
 
 .tab-item {
   overflow-y: auto;
+  background: var(--config-settings-background);
 }
 
 a.hyperlink-wrapper {

src/components/Configuration/EditSiteMeta.vue

@@ -15,36 +15,67 @@
         <input v-model="formElements.footerText" />
       </div>
     </div>
-    <button class="save-button" @click="save()">Save Changes</button>
+    <div class="form">
+      <h2>Nav Bar Links</h2>
+      <div class="add-nav-bar-link" v-for="(link, index) in formElements.navLinks" :key="index">
+        <div class="row">
+          <span>Link Text</span>
+          <input v-model="link.title" />
+        </div>
+        <div class="row">
+          <span>Link URL</span>
+          <input v-model="link.path" />
+        </div>
+      </div>
+      <button class="add-new-link" @click="addNavLinkRow()" >
+        <AddNewIcon />
+        Add New Link
+      </button>
+    </div>
+    <button class="save-button" @click="save()">
+      <SaveConfigIcon />
+      Save Changes
+    </button>
   </div>
 </template>
 
 <script>
 
 import { localStorageKeys } from '@/utils/defaults';
+import AddNewIcon from '@/assets/interface-icons/add-new.svg';
+import SaveConfigIcon from '@/assets/interface-icons/save-config.svg';
 
 export default {
   name: 'EditSiteMeta',
   props: {
     config: Object,
   },
+  components: {
+    AddNewIcon,
+    SaveConfigIcon,
+  },
   methods: {
     save() {
       const pageInfo = { ...this.config.pageInfo };
       pageInfo.title = this.formElements.title;
       pageInfo.description = this.formElements.description;
       pageInfo.footerText = this.formElements.footerText;
+      pageInfo.navLinks = this.formElements.navLinks;
       localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(pageInfo));
-      this.$toasted.show('Changes seved succesfully');
+      this.$toasted.show('Changes saved succesfully');
       setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals
     },
+    addNavLinkRow() {
+      this.formElements.navLinks.push({ title: '', path: '' });
+    },
   },
   data() {
     return {
       formElements: {
         title: this.config.pageInfo.title,
         description: this.config.pageInfo.description,
         footerText: this.config.pageInfo.footerText,
+        navLinks: this.config.pageInfo.navLinks,
       },
     };
   },
@@ -55,7 +86,7 @@ export default {
 .site-meta-container {
   display: flex;
   flex-direction: column;
-  padding-top: 1rem;
+  padding: 1rem 0;
   background: var(--background-darker);
   height: calc(100% - 1rem);
   h2 {
@@ -67,6 +98,15 @@ export default {
 div.form {
   display: flex;
   flex-direction: column;
+  width: fit-content;
+  margin: 0 auto 1rem auto;
+  padding-bottom: 1rem;
+  &:not(:last-child) {
+    border-bottom: 1px dashed var(--config-settings-color);
+  }
+  div.add-nav-bar-link {
+    margin: 0 auto;
+  }
   div.row {
     margin: 0.25rem auto;
     display: flex;
@@ -86,16 +126,26 @@ div.form {
       min-width: 8rem;
       font-size: 1.2rem;
       &:focus {
-        box-shadow: 1px 1px 6px #00ccb4;
+        box-shadow: 1px 1px 6px var(--config-settings-color);
         outline: none;
       }
     }
   }
 }
 
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.5rem auto;
+  svg {
+    width: 1.2rem;
+    margin: 0 0.2rem;
+  }
+}
+
 button.save-button {
   padding:  0.5rem 1rem;
-  margin: 0.5rem auto;
   font-size: 1.2rem;
   width: 24rem;
   background: var(--config-settings-background);
@@ -108,4 +158,24 @@ button.save-button {
     color: var(--config-settings-background);
   }
 }
+
+button.add-new-link {
+  background: none;
+  text-decoration: underline;
+  font-size: 1rem;
+  padding: 0.25rem 0.5rem;
+  color: var(--config-settings-color);
+  cursor: pointer;
+  border-radius: 3px;
+  border: 1px solid transparent;
+  &:hover {
+    border-color: var(--config-settings-color);
+    text-decoration: none;
+  }
+  &:active {
+    background: var(--config-settings-color);
+    color: var(--config-settings-background);
+    border-color: var(--config-settings-color);
+  }
+}
 </style>

src/components/Configuration/JsonEditor.vue

@@ -66,6 +66,7 @@ button.save-button {
   &:hover {
     background: var(--config-settings-background);
     color: var(--config-settings-color);
+    border-color: var(--config-settings-color);
   }
 }
 
@@ -82,4 +83,8 @@ button.save-button {
 .jsoneditor-poweredBy {
   display: none;
 }
+.jsoneditor-tree, pre.jsoneditor-preview {
+  background: #fff;
+  text-align: left;
+}
 </style>

src/components/Settings/ConfigLauncher.vue

@@ -18,7 +18,7 @@
 
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
 import ConfigContainer from '@/components/Configuration/ConfigContainer';
-import { topLevelConfKeys } from '@/utils/defaults';
+import { topLevelConfKeys, localStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'ConfigLauncher',
@@ -46,11 +46,10 @@ export default {
       conf[topLevelConfKeys.APP_CONFIG] = this.appConfig;
       conf[topLevelConfKeys.PAGE_INFO] = this.pageInfo;
       conf[topLevelConfKeys.SECTIONS] = this.sections;
+      conf[topLevelConfKeys.APP_CONFIG].theme = localStorage[localStorageKeys.THEME]
+        || conf[topLevelConfKeys.APP_CONFIG].theme;
       return conf;
     },
-    updateConfig() {
-      // this.$emit('iconSizeUpdated', iconSize);
-    },
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
     },
@@ -88,4 +87,7 @@ export default {
   .vm--modal {
     box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary);
   }
+  .vm--overlay {
+    background: #00000080;
+  }
 </style>

src/styles/color-themes.scss

@@ -50,6 +50,8 @@ html[data-theme='raspberry-jam'] {
   --item-background: #1c2636;
   --item-group-background: #0b1021;
   --nav-link-background-color: #0b1021;
+  --config-code-background: #0b1021;
+  --config-code-color: #eb2d6c;
 }
 
 html[data-theme='tiger'] {
@@ -91,6 +93,7 @@ html[data-theme='high-contrast-light'] {
   --primary: #000;
   --outline-color: #000;
   --curve-factor: 0px;
+  --config-code-color: #000;
 }
 
 html[data-theme='high-contrast-dark'] {
@@ -147,6 +150,7 @@ html[data-theme='material'] {
   --settings-container-shadow: 0 1px 3px #0000005e, 0 1px 2px #00000085;
   --welcome-popup-background: #01579b;
   --welcome-popup-text-color: #ffffff;
+  --config-code-color: #000;
 }
 
 html[data-theme='material-dark'] {