Adds ability for user to show/ hide settings menu

For a cleaner, less clutterd UI

public/conf.yml

@@ -1,6 +1,6 @@
 ---
 pageInfo:
-  title: Dashy
+  title: Bookmarks
   navLinks:
   - title: Home
     path: /
@@ -9,26 +9,170 @@ pageInfo:
   - title: Source Code
     path: https://github.com/Lissy93/dashy
 appConfig:
-  theme: colorful
+  theme: dracula
-  fontAwesomeKey: 0821c65656
+  fontAwesomeKey: 13014ae648
 sections:
-- name: Getting Started
+- name: Productivity
-  icon: far fa-star
+  icon: fas fa-calendar-check
   items:
-  - title: Source
+  - title: ProtonMail
-    description: Source code and documentation on GitHub
+    description: Secure Encrypted Email
+    icon: favicon
+    url: https://mail.protonmail.com/
+  - title: AnonAddy
+    description: Mail aliasing and forwarding service
+    icon: favicon
+    url: https://app.anonaddy.com/
+  - title: LessPass
+    description: Deterministic password generator
+    icon: favicon
+    url: https://lesspass.com/
+  - title: EteSync
+    description: Calendar, contacts and tasks
+    icon: favicon
+    url: https://client.etesync.com/
+  - title: Live Coin Watch
+    description: Real-time crypto prices and read-only portfolio
+    icon: favicon
+    url: https://www.livecoinwatch.com/
+  - title: Standard Notes
+    description: Encrypted productivity suit
+    icon: favicon
+    url: https://app.standardnotes.org/
+- name: Social
+  icon: fas fa-thumbs-up
+  items:
+  - title: Discord
+    icon: fab fa-discord
+    url: https://discord.com/channels/
+  - title: Mastodon
+    icon: fab fa-mastodon
+    url: https://mastodon.social/
+  - title: Reddit
+    icon: fab fa-reddit
+    url: https://www.reddit.com/
+  - title: Twitter
+    icon: fab fa-twitter
+    url: https://twitter.com/
+  - title: YouTube
+    icon: fab fa-youtube
+    url: https://youtube.com/
+  - title: Instagram
+    icon: fab fa-instagram
+    url: https://www.instagram.com/
+- name: Coding
+  icon: fas fa-code
+  displayData:
+    rows: 2
+  items:
+  - title: StackOverflow
+    icon: fab fa-stack-overflow
+    url: https://stackoverflow.com/
+  - title: GitHub
     icon: fab fa-github
-    url: https://github.com/Lissy93/dashy
+    url: https://github.com/
-  - title: Issues
+  - title: Grep App
-    description: View currently open issues, or raise a new one
+    icon: fas fa-slash
-    icon: fas fa-bug
+    description: Allows you to search the contents of files within GitHub repos, with a RegEx option too
-    url: https://github.com/Lissy93/dashy/issues
+    url: https://grep.app/
-  - title: Demo 1
+  - title: Hoppscotch
-    description: 'Live Demo #1'
+    icon: fas fa-dice-d6
-    icon: far fa-rocket
+    description: API development tool
-    url: https://dashy-demo-1.netlify.app 
+    url: https://hoppscotch.io/
-  - title: Demo 2
+  - title: Regexr
-    description: 'Live Demo #2'
+    icon: fas fa-code
-    icon: fad fa-planet-ringed
+    description: App for creating, testing and understanding regular expressions
-    url: https://dashy-demo-2.netlify.app 
+    url: https://regexr.com/
-  
+  - title: Tmate
+    icon: fas fa-terminal
+    description: Instant TMUX-based terminal sharing
+    url: https://tmate.io/
+  - title: Debian Handbook
+    icon: fab fa-linux
+    url: https://debian-handbook.info/browse/stable/
+  - title: Crontab Guru
+    description: Editor for cron schedule expressions
+    icon: fas fa-pen-square
+    url: https://crontab.guru/
+  - title: CyberChef
+    description: All in one encryption, encoding, hashes etc
+    icon: fas fa-user-astronaut
+    url: https://gchq.github.io/CyberChef/
+  - title: SSL Labs Tester
+    description: Check SSL Certificates
+    icon: fab fa-expeditedssl
+    url: https://www.ssllabs.com/ssltest/
+  - title: JSON Formatter
+    description: JSON validator, beautifier and convertor
+    url: https://jsonformatter.org/
+    icon: fas fa-brackets-curly
+  - title: JSFiddle
+    url: https://jsfiddle.net/
+    icon: fab fa-jsfiddle
+  - title: Digital Ocean
+    description: Affordable, preformant cloud services
+    url: https://cloud.digitalocean.com/
+    icon: fab fa-digital-ocean
+  - title: HealthChecks.io
+    description: Off-site cron job and service monitoring
+    icon: fal fa-monitor-heart-rate
+    url: https://healthchecks.io/
+- name: Utilities
+  icon: fas fa-briefcase
+  displayData:
+    itemSize: small
+    cols: 2
+  items:
+  - title: Chroniker Timer
+    description: A productivity timer
+    url: https://chroniker.co/
+  - title: CopyChar
+    description: easily search and copy any symbol
+    url: https://copychar.cc/
+  - title: DeepL
+    description: Fast, accurate, secure online multi-language translator
+    url: https://www.deepl.com/translator
+  - title: Font Generator
+    description: Use ASCII characters for different plaintext fonts
+    url: https://www.fontgeneratoronline.com/
+  - title: JSON Formatter
+    description: CSV, JSON, YAML, XML and more formatting tools
+    url: https://jsonformatter.org/
+  - title: Time.Is
+    description: Time.Is
+    url: https://time.is/
+  - title: Torrent Parts
+    description: Inspect and edit what's in your Torrent file or Magnet link
+    url: https://torrent.parts/
+  - title: Photo College
+    url: https://www.befunky.com/create/collage/
+  - title: MD5 Hash
+    url: http://www.miraclesalad.com/webtools/md5.php
+  - title: GitHub Stars Over Time
+    url: https://seladb.github.io/StarTrack-js/
+  - title: Text & List Tools
+    url: https://pinetools.com/c-text-lists/
+  - title: Online Text Tools
+    description: More text tools, allowing for RegEx actions
+    url: https://onlinetexttools.com/
+  - title: Conversao
+    description: Instantly convert a unit to all others
+    url: https://conversao.net/eng/
+  - title: Omni Calculators
+    description: A collection of thousands of calculators
+    url: https://www.omnicalculator.com/
+  - title: Dr Meme
+    description: Meme Generator
+    url: https://www.drmemes.com/
+  - title: ASCII Tree Generator
+    description: For displaying directory structure
+    url: https://ascii-tree-generator.com/
+  - title: ASCII Diagram Drawer
+    description: For using box characters to draw boxes
+    url: For using box characters to draw boxes
+  - title: Bullet Converter
+    description: Small script I use
+    url: https://listed.to/p/LxO8yHsB9E#bc
+  - title: Lenny Face Maker
+    description: Easily generate ASCII Lenny emojis
+    url: https://www.fontspace.com/lenny-face

src/assets/interface-icons/config-close.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"></path></svg>

src/assets/interface-icons/config-open-settings.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sliders-h" class="svg-inline--fa fa-sliders-h fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M496 384H160v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h80v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h336c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160h-80v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h336v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h80c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16C7.2 64 0 71.2 0 80v32c0 8.8 7.2 16 16 16h208v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h208c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16z"></path></svg>

src/components/PageStrcture/Footer.vue

@@ -34,7 +34,7 @@ footer {
   color: var(--medium-grey);
   opacity: var(--dimming-factor);
   background: var(--background-darker);
-  margin-top: 7px;
+  margin-top: 1.5rem;
   border-top: 1px solid var(--outline-color);
 }
 

src/components/Settings/ConfigLauncher.vue

@@ -3,8 +3,10 @@
     <!-- Button and label -->
     <span>Config</span>
     <div class="config-buttons">
-      <IconSpanner v-tooltip="tooltip('Update configuration locally')" @click="showEditor()" />
+      <IconSpanner @click="showEditor()" tabindex="-2"
-      <IconCloud v-tooltip="tooltip('Backup / restore cloud config')" @click="showCloudModal()" />
+        v-tooltip="tooltip('Update configuration locally')" />
+      <IconCloud @click="showCloudModal()" tabindex="-2"
+        v-tooltip="tooltip('Backup / restore cloud config')" />
     </div>
 
     <!-- Modal containing all the configuration options -->

src/components/Settings/SettingsContainer.vue

@@ -5,29 +5,40 @@
       v-if="searchVisible"
       :active="!modalOpen"
     />
-    <div class="options-container" v-if="settingsVisible">
+    <div class="options-outer">
-      <ThemeSelector :themes="availableThemes"
+      <div class="options-container" v-if="settingsVisible">
-        :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
+        <ThemeSelector :themes="availableThemes"
-      <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
+          :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
-      <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
+        <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
-      <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
+        <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-        @modalChanged="modalChanged" />
+        <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
+          @modalChanged="modalChanged" />
+      </div>
+      <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
+        <button @click="toggleSettingsVisibility()"
+          v-tooltip="`${settingsVisible? 'Hide' : 'Open'} Settings Menu`" tabindex="-2">
+          <IconClose v-if="settingsVisible" />
+          <IconOpen v-else />
+        </button>
+      </div>
     </div>
     <KeyboardShortcutInfo />
   </section>
 </template>
 
 <script>
-import Defaults from '@/utils/defaults';
+import Defaults, { localStorageKeys } from '@/utils/defaults';
 import SearchBar from '@/components/Settings/SearchBar';
 import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
 import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
 import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
+import IconOpen from '@/assets/interface-icons/config-open-settings.svg';
+import IconClose from '@/assets/interface-icons/config-close.svg';
 
 export default {
-  name: 'FilterTile',
+  name: 'SettingsContainer',
   props: {
     displayLayout: String,
     iconSize: String,
@@ -44,6 +55,8 @@ export default {
     LayoutSelector,
     ItemSizeSelector,
     KeyboardShortcutInfo,
+    IconOpen,
+    IconClose,
   },
   methods: {
     userIsTypingSomething(something) {
@@ -70,11 +83,19 @@ export default {
       if (typeof userThemes === 'string') return [userThemes];
       return userThemes;
     },
+    toggleSettingsVisibility() {
+      this.settingsVisible = !this.settingsVisible;
+      localStorage.setItem(localStorageKeys.HIDE_SETTINGS, this.settingsVisible);
+    },
+    getSettingsVisibility() {
+      return JSON.parse(localStorage[localStorageKeys.HIDE_SETTINGS]
+        || Defaults.visibleComponents.settings);
+    },
   },
   data() {
     return {
-      searchVisible: Defaults.visibleComponents.searchBar && !this.modalOpen,
+      searchVisible: Defaults.visibleComponents.searchBar,
-      settingsVisible: Defaults.visibleComponents.settings,
+      settingsVisible: this.getSettingsVisibility(),
     };
   },
 };
@@ -91,13 +112,19 @@ export default {
     background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
     box-shadow: var(--settings-container-shadow);
   }
+  .options-outer {
+    display: flex;
+    position: relative;
+    flex: 1;
+    background: var(--settings-background);
+  }
   .options-container {
     display: flex;
     flex-direction: row;
     align-items: flex-end;
     justify-content: flex-end;
     flex: 1;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 1.5rem 0.5rem 1rem;
     border-radius: var(--curve-factor-navbar) 0 0;
     background: var(--settings-background);
     div {
@@ -108,6 +135,38 @@ export default {
     }
   }
 
+  .show-hide-container {
+    display: flex;
+    // align-items: center;
+    background: var(--settings-background);
+    color: var(--settings-text-color);
+    width: 1.5rem;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    &.show-btn {
+      width: 2rem;
+      top: 0.5rem;
+      right: 0.5rem;
+    }
+    button {
+      width: 100%;
+      padding: 2px 2px 0 2px;
+      margin: 2px;
+      border-radius: var(--curve-factor);
+      height: fit-content;
+      background: none;
+      border: none;
+      color: var(--settings-text-color);
+      cursor: pointer;
+      opacity: var(--dimming-factor);
+    }
+    &:hover button {
+      background: var(--settings-text-color);
+      color: var(--settings-background);
+    }
+  }
+
   @include tablet {
     section {
       display: block;
@@ -120,7 +179,7 @@ export default {
   }
 
   @include phone {
-    .options-container {
+    .options-container, .show-hide-button {
       display: none;
     }
   }

src/router.js

@@ -33,7 +33,7 @@ const router = new Router({
         appConfig: localAppConfig || appConfig || {},
       },
       meta: {
-        title: 'Home Page',
+        title: pageInfo.title || 'Home Page',
         metaTags: [
           {
             name: 'description',

src/styles/color-themes.scss

@@ -298,9 +298,6 @@ html[data-theme='material'], html[data-theme='material-dark'] {
     max-height: 6rem;
     margin: 0.2rem;
     padding: 0.5rem;
-    .overflow-dots {
-      display: none;
-    }
     img {
       padding: 0.1rem 0.25rem;
     }
@@ -355,6 +352,9 @@ html[data-theme='material'], html[data-theme='material-dark'] {
     div {
       transition: all 0.2s linear 0s;
     }
+    .overflow-dots {
+      display: none;
+    }
     &:before {
       content: "\f054";
       font-family: FontAwesome;

src/utils/defaults.js

@@ -53,6 +53,7 @@ module.exports = {
     APP_CONFIG: 'appConfig',
     BACKUP_ID: 'backupId',
     BACKUP_HASH: 'backupHash',
+    HIDE_SETTINGS: 'hideSettings',
   },
   modalNames: {
     CONF_EDITOR: 'CONF_EDITOR',