From c92083f88f784bfa78eb74e3669555f055416e5f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@futr.ai>
Date: Thu, 17 Jun 2021 13:34:02 +0100
Subject: [PATCH] Commiting in order to switch computers

---
 docs/backup-restore.md                      | 16 ++++++-
 src/components/Settings/ThemeSelector.vue   |  1 +
 src/components/Workspace/SideBar.vue        | 20 +++++++-
 src/components/Workspace/SideBarItem.vue    | 18 ++-----
 src/components/Workspace/SideBarSection.vue | 52 +++++++++++++++++++++
 src/views/About.vue                         | 15 ++----
 src/views/Workspace.vue                     | 25 +++++++++-
 7 files changed, 118 insertions(+), 29 deletions(-)
 create mode 100644 src/components/Workspace/SideBarSection.vue

diff --git a/docs/backup-restore.md b/docs/backup-restore.md
index 11c578e9..2c6b2158 100644
--- a/docs/backup-restore.md
+++ b/docs/backup-restore.md
@@ -49,6 +49,20 @@ Maximum of 24mb of storage per user. Please do not repeatedly hit the endpoint,
 - Add your `zone_id` (found in the Overview tab of your desired domain on Cloudflare)
 - Add your `route`, which should be a domain or host, supporting a wildcard
 
+```toml
+name = "dashy-worker"
+type = "javascript"
+
+workers_dev = true
+route = "example.com/*"
+zone_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+account_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+kv_namespaces = [
+  { binding = "DASHY_CLOUD_BACKUP", id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }
+]
+```
+
 #### Complete `index.js`
 - Write code to handle your requests, and interact with any other data sources in this file
 - Generally, this is done within an event listener for 'fetch', and returns a promise
@@ -66,7 +80,7 @@ async function handleRequest(request) {
 }
 ```
 
-- For the code used for Dashy's cloud service, see [here](https://notes.aliciasykes.com/p/j2F1deljv1)
+- For the code used for Dashy's cloud service, see [here](https://gist.github.com/Lissy93/d19b43d50f30e02fa25f349cf5cb5ed8#file-index-js)
 
 
 #### Commands
diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index d978240e..92d903f6 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -54,6 +54,7 @@ export default {
     }
   },
   methods: {
+    /* Sets the theme, by updating data-theme attribute on the html tag */
     setLocalTheme(newTheme) {
       const htmlTag = document.getElementsByTagName('html')[0];
       if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');
diff --git a/src/components/Workspace/SideBar.vue b/src/components/Workspace/SideBar.vue
index 4c91eeb4..826ea446 100644
--- a/src/components/Workspace/SideBar.vue
+++ b/src/components/Workspace/SideBar.vue
@@ -1,7 +1,13 @@
 <template>
   <nav class="side-bar">
     <div v-for="(section, index) in sections" :key="index">
-      <SideBarItem class="item" :icon="section.icon" :title="section.title" />
+      <SideBarItem
+        class="item"
+        :icon="section.icon"
+        :title="section.name"
+        :click="launchItem"
+      />
+      <SideBarSection v-if="isOpen" :items="section.items" />
     </div>
   </nav>
 </template>
@@ -9,6 +15,7 @@
 <script>
 
 import SideBarItem from '@/components/Workspace/SideBarItem.vue';
+import SideBarSection from '@/components/Workspace/SideBarSection.vue';
 
 export default {
   name: 'SideBar',
@@ -16,8 +23,19 @@ export default {
   props: {
     sections: Array,
   },
+  data: () => ({
+    isOpen: false,
+  }),
   components: {
     SideBarItem,
+    SideBarSection,
+  },
+  methods: {
+    launchItem() {
+      this.isOpen = !this.isOpen;
+      // Open SideBarSection, passing in items[]
+      // this.$emit('launch', url);
+    },
   },
 };
 </script>
diff --git a/src/components/Workspace/SideBarItem.vue b/src/components/Workspace/SideBarItem.vue
index cb0c33fb..16e27a62 100644
--- a/src/components/Workspace/SideBarItem.vue
+++ b/src/components/Workspace/SideBarItem.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="side-bar-item">
-    <Icon v-if="icon" :icon="icon" size="small" />
+  <div class="side-bar-item" @click="click()">
+    <Icon v-if="icon" :icon="icon" size="small" :url="url" />
     <p v-else>{{ title }}</p>
   </div>
 </template>
@@ -8,7 +8,6 @@
 <script>
 
 import Icon from '@/components/LinkItems/ItemIcon.vue';
-import Defaults from '@/utils/defaults';
 
 export default {
   name: 'SideBarItem',
@@ -16,21 +15,12 @@ export default {
   props: {
     icon: String,
     title: String,
-  },
-  mounted() {
-    this.initiateFontAwesome();
+    url: String,
+    click: Function,
   },
   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>
 
diff --git a/src/components/Workspace/SideBarSection.vue b/src/components/Workspace/SideBarSection.vue
new file mode 100644
index 00000000..aee666a2
--- /dev/null
+++ b/src/components/Workspace/SideBarSection.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="sub-side-bar">
+    <div v-for="(item, index) in items" :key="index">
+      <SideBarItem
+        class="item"
+        :icon="item.icon"
+        :title="item.title"
+        :url="item.url"
+        :click="launchItem"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import SideBarItem from '@/components/Workspace/SideBarItem.vue';
+
+export default {
+  name: 'SideBarSection',
+  inject: ['config'],
+  props: {
+    items: Array,
+  },
+  components: {
+    SideBarItem,
+  },
+  methods: {
+    launchItem(url) {
+      this.$emit('launch', url);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+div.sub-side-bar {
+  display: flex;
+  flex-direction: column;
+  background: var(--side-bar-background);
+  color: var(--side-bar-color);
+  border: 1px dashed red;
+  text-align: center;
+  .item:not(:last-child) {
+    border-bottom: 1px dashed var(--side-bar-color);
+  }
+}
+
+</style>
diff --git a/src/views/About.vue b/src/views/About.vue
index 83585d71..c4273ea9 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -9,15 +9,6 @@
         highly customizable and functianl dashboard, in order to improvde productivity
         and enable easy organisation of running services or web links.
       </p>
-      <p>
-        Dashy is a web-based project with PWA mobile support. It's written in TypeScript,
-        and using the Vue.js framework, with a simple Node.js backend.
-        It can be run in a light-weight Alpine Docker container, with support for
-        healthcheck monitoring, self-updating and automatic restarting. Configuration
-        is done with a single YAML file, that is merged with the application when it
-        is built / compiled. The configuration can me modified using the UI, and then
-        exported back into the main config file.
-      </p>
     </section>
 
     <section>
@@ -51,7 +42,7 @@
         <img class="aht-pic" src="https://i.ibb.co/FnxqTfx/aht-bot-round.png" alt="Alicia Sykes">
       </a>
       Dashy is developed an maintained by <a href="https://aliciasykes.com">Alicia Sykes</a>
-      (<a href="https://github.com/lissy93">@Lissy93</a>).
+      (<a href="https://github.com/lissy93">@Lissy93</a>), with support from the community.
       <ul>
         <li><b>PGP Key</b> - <a href="https://keybase.io/aliciasykes/pgp_keys.asc?fingerprint=0688f8d34587d954e9e51fb8fedb68f55c0283a7"><code>0688 F8D3 4587 D954 E9E5  1FB8 FEDB 68F5 5C02 83A7</code></a></li>
         <li><b>BTC Address</b> - <code>3853bSxupMjvxEYfwGDGAaLZhTKxB2vEVC</code></li>
@@ -101,8 +92,8 @@ article.about {
   background: var(--about-page-background);
   color: var(--about-page-color);
   width: 80%;
-  max-width: 800px;
-  margin: 1rem auto;
+  max-width: 1000px;
+  margin: 1rem auto 2.5rem auto;
   padding: 1rem;
   border: 1px solid var(--about-page-accent);
   border-radius: var(--curve-factor);
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index 3afabfa8..342f0731 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="work-space">
-    <SideBar :sections="sections" />
+    <SideBar :sections="sections" @launch="launchService" />
     <WebContent :url="url" />
   </div>
 </template>
@@ -9,11 +9,13 @@
 
 import SideBar from '@/components/Workspace/SideBar';
 import WebContent from '@/components/Workspace/WebContent';
+import Defaults, { localStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'Workspace',
   props: {
     sections: Array,
+    appConfig: Object,
   },
   data: () => ({
     url: '',
@@ -22,6 +24,27 @@ export default {
     SideBar,
     WebContent,
   },
+  methods: {
+    launchService(url) {
+      this.url = url;
+    },
+    setTheme() {
+      const theme = localStorage[localStorageKeys.THEME] || this.confTheme || Defaults.theme;
+      const htmlTag = document.getElementsByTagName('html')[0];
+      if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');
+      htmlTag.setAttribute('data-theme', theme);
+    },
+    initiateFontAwesome() {
+      const fontAwesomeScript = document.createElement('script');
+      const faKey = this.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;
+      fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
+      document.head.appendChild(fontAwesomeScript);
+    },
+  },
+  mounted() {
+    this.setTheme();
+    this.initiateFontAwesome();
+  },
 };
 
 </script>