From eac98192be98aa4efd530d88067f0fc4b0a81d9f Mon Sep 17 00:00:00 2001
From: adro <a.schlett@gmx.de>
Date: Fri, 3 Nov 2023 01:02:02 +0100
Subject: [PATCH] Optimize sidebar behavior - Flex squishing of buttons:
 component all:unset was overriding reset - Added overflow handling to nav
 body and page content - Removed scrollbar and added scroll shadow for nav
 body

---
 client/src/App.vue                      | 36 ++++++++++++++++++++-----
 client/src/global-styles/components.css |  7 ++++-
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 833aca6..51d8c9d 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -129,13 +129,14 @@ onMounted(async() => {
     <Portal from="page-header" class="page-header pad gap"/>
 
     <div class="nav-body cl-secondary cl-force-dark">
-      <template v-for="(options, route) in navRoutes" :key="route">
-        <router-link :to="route" class="button" @click="collapseNavIfMobile">
-          <component :is="options.icon"/>
-          {{ options.caption }}
-        </router-link>
-      </template>
-      <div class="flex-grow"/>
+      <div>
+        <template v-for="(options, route) in navRoutes" :key="route">
+          <router-link :to="route" class="button" @click="collapseNavIfMobile">
+            <component :is="options.icon"/>
+            {{ options.caption }}
+          </router-link>
+        </template>
+      </div>
       <div class="flex-row">
         <router-link class="button" to="/help"><i-material-symbols-help-outline/></router-link>
         <router-link class="button" to="/settings"><i-material-symbols-settings/></router-link>
@@ -196,6 +197,27 @@ onMounted(async() => {
 .nav-body .button { justify-content: left; }
 .nav-body .flex-row * { flex: 1; }
 
+.nav-body {
+  display: grid;
+  grid-template: 1fr auto/ 1fr;
+}
+
+.nav-body > :first-child, .page-content { overflow-y: auto; }
+.nav-body > :first-child::-webkit-scrollbar { display: none; }
+.nav-body > :first-child { scrollbar-width: none; }
+
+.nav-body .button:not(:hover) { background: transparent; }
+.nav-body > :first-child {
+  background:
+    linear-gradient(var(--cl-bg) 30%, rgba(0, 0, 0, 0)) center top, /* Top Cover */
+    linear-gradient(rgba(0, 0, 0, 0), var(--cl-bg) 70%) center bottom, /* Bottom Cover */
+    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) center top, /* Top Shadow */
+    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)) center bottom; /* Bottom Shadow */
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+}
+
 /* Page */
 .page-header {
   flex-flow: row nowrap;
diff --git a/client/src/global-styles/components.css b/client/src/global-styles/components.css
index 10be728..5dc85ae 100644
--- a/client/src/global-styles/components.css
+++ b/client/src/global-styles/components.css
@@ -1,6 +1,11 @@
 /* CSS Components */
 button, .button {
-  all: unset;
+  text-decoration: unset;
+  border: unset;
+  text-align: unset;
+  font-weight: unset;
+  line-height: unset;
+  font: unset;
 
   display: flex;
   flex-flow: row nowrap;