feat: hideable sidebar

src/components/PageHeader.vue

@@ -6,6 +6,13 @@
       platform !== 'Windows' ? 'window-drag' : '',
     ]"
   >
+    <Transition name="spacer">
+      <div
+        v-if="!sidebar && platform === 'Mac'"
+        class="h-full"
+        :class="sidebar ? '' : 'w-tl mr-4 border-r'"
+      />
+    </Transition>
     <h1 class="text-xl font-semibold select-none" v-if="title">
       {{ title }}
     </h1>
@@ -18,10 +25,12 @@
   </div>
 </template>
 <script>
+import { Transition } from 'vue';
 import BackLink from './BackLink.vue';
 import SearchBar from './SearchBar.vue';
 
 export default {
+  inject: ['sidebar'],
   props: {
     title: { type: String, default: '' },
     backLink: { type: Boolean, default: true },
@@ -29,7 +38,7 @@ export default {
     border: { type: Boolean, default: true },
     searchborder: { type: Boolean, default: true },
   },
-  components: { SearchBar, BackLink },
+  components: { SearchBar, BackLink, Transition },
   computed: {
     showBorder() {
       return !!this.$slots.default && this.searchborder;
@@ -37,3 +46,29 @@ export default {
   },
 };
 </script>
+<style scoped>
+.w-tl {
+  width: var(--w-trafficlights);
+}
+
+.spacer-enter-from,
+.spacer-leave-to {
+  opacity: 0;
+  width: 0px;
+  margin-right: 0px;
+  border-right-width: 0px;
+}
+
+.spacer-enter-to,
+.spacer-leave-from {
+  opacity: 1;
+  width: var(--w-trafficlights);
+  margin-right: 1rem;
+  border-right-width: 1px;
+}
+
+.spacer-enter-active,
+.spacer-leave-active {
+  transition: all 250ms ease-out;
+}
+</style>

src/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="py-2 h-full flex justify-between flex-col bg-gray-25"
+    class="py-2 h-full flex justify-between flex-col bg-gray-25 relative"
     :class="{
       'window-drag': platform !== 'Windows',
     }"
@@ -36,6 +36,7 @@
           @click="onGroupClick(group)"
         >
           <Icon
+            class="flex-shrink-0"
             :name="group.icon"
             :size="group.iconSize || '18'"
             :height="group.iconHeight"
@@ -91,7 +92,7 @@
         "
         @click="openDocumentation"
       >
-        <feather-icon name="help-circle" class="h-4 w-4" />
+        <feather-icon name="help-circle" class="h-4 w-4 flex-shrink-0" />
         <p>
           {{ t`Help` }}
         </p>
@@ -107,7 +108,7 @@
         "
         @click="$emit('change-db-file')"
       >
-        <feather-icon name="database" class="h-4 w-4" />
+        <feather-icon name="database" class="h-4 w-4 flex-shrink-0" />
         <p>{{ t`Change DB` }}</p>
       </button>
 
@@ -121,7 +122,7 @@
         "
         @click="() => reportIssue()"
       >
-        <feather-icon name="flag" class="h-4 w-4" />
+        <feather-icon name="flag" class="h-4 w-4 flex-shrink-0" />
         <p>
           {{ t`Report Issue` }}
         </p>
@@ -134,6 +135,23 @@
         dev mode
       </p>
     </div>
+
+    <!-- Hide Sidebar Button -->
+    <button
+      class="
+        absolute
+        bottom-0
+        right-0
+        text-gray-600
+        hover:bg-gray-100
+        rounded
+        p-1
+        m-4
+      "
+      @click="$emit('toggle-sidebar')"
+    >
+      <feather-icon name="chevrons-left" class="w-5 h-5" />
+    </button>
   </div>
 </template>
 <script>
@@ -148,7 +166,7 @@ import Icon from './Icon.vue';
 
 export default {
   components: [Button],
-  emits: ['change-db-file'],
+  emits: ['change-db-file', 'toggle-sidebar'],
   data() {
     return {
       companyName: '',

src/pages/Desk.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="flex overflow-hidden">
-    <Sidebar
-      class="w-sidebar flex-shrink-0 border-r"
-      @change-db-file="$emit('change-db-file')"
-    />
+    <Transition name="sidebar">
+      <Sidebar
+        v-show="sidebar"
+        class="flex-shrink-0 border-r whitespace-nowrap"
+        :class="sidebar ? 'w-sidebar' : ''"
+        @change-db-file="$emit('change-db-file')"
+        @toggle-sidebar="sidebar = !sidebar"
+      />
+    </Transition>
+
     <div class="flex flex-1 overflow-y-hidden bg-white">
       <router-view v-slot="{ Component }">
         <keep-alive>
@@ -23,13 +29,41 @@
         </router-view>
       </div>
     </div>
+
+    <!-- Show Sidebar Button -->
+    <button
+      v-show="!sidebar"
+      class="
+        absolute
+        bottom-0
+        left-0
+        text-gray-600
+        bg-gray-100
+        rounded
+        p-1
+        m-4
+        opacity-0
+        hover:opacity-100
+        hover:shadow-md
+      "
+      @click="sidebar = !sidebar"
+    >
+      <feather-icon name="chevrons-right" class="w-5 h-5" />
+    </button>
   </div>
 </template>
 <script>
+import { computed } from '@vue/reactivity';
 import Sidebar from '../components/Sidebar';
 export default {
   name: 'Desk',
   emits: ['change-db-file'],
+  data() {
+    return { sidebar: true };
+  },
+  provide() {
+    return { sidebar: computed(() => this.sidebar) };
+  },
   components: {
     Sidebar,
   },
@@ -44,3 +78,22 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.sidebar-enter-from,
+.sidebar-leave-to {
+  opacity: 0;
+  width: 0px;
+}
+
+.sidebar-enter-to,
+.sidebar-leave-from {
+  opacity: 1;
+  width: var(--w-sidebar);
+}
+
+.sidebar-enter-active,
+.sidebar-leave-active {
+  transition: all 250ms ease-out;
+}
+</style>

src/styles/index.css

@@ -64,6 +64,7 @@ input[type='number']::-webkit-inner-spin-button {
   --w-desk-fixed: calc(var(--w-app) - var(--w-sidebar));
   --w-quick-edit: 22rem;
   --w-scrollbar: 0.6rem;
+  --w-trafficlights: 72px;
 
   /* Row Heights */
   --h-row-smallest: 2rem;