From 96be9ffbc31df37bf65e16d20c4ced6ca99d6ec0 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 12 Jul 2024 20:22:12 +0600
Subject: [PATCH] web/sidebar: redo padding on mobile & desktop

- accommodate space for scaling animation
- replace static padding with variable in calculations
- no more weird padding on mobile
---
 web/src/components/sidebar/CobaltLogo.svelte |  7 ++++++-
 web/src/components/sidebar/Sidebar.svelte    | 10 ++++++---
 web/src/components/sidebar/SidebarTab.svelte | 22 ++++++++++++--------
 web/src/routes/+layout.svelte                | 18 ++++++++++++----
 4 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/web/src/components/sidebar/CobaltLogo.svelte b/web/src/components/sidebar/CobaltLogo.svelte
index 1de5af2e..181c55c7 100644
--- a/web/src/components/sidebar/CobaltLogo.svelte
+++ b/web/src/components/sidebar/CobaltLogo.svelte
@@ -11,7 +11,12 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: calc(var(--padding) * 2 - 2px);
+        padding: calc(var(--padding) * 2);
+
+        /* accommodate space for scaling animation */
+        padding-bottom: calc(
+            var(--padding) * 2 - var(--sidebar-inner-padding)
+        );
     }
 
     @media screen and (max-width: 535px) {
diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index 05ba72d9..9c76f21b 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -56,9 +56,8 @@
     #sidebar {
         background: var(--sidebar-bg);
         height: 100vh;
-        width: var(--sidebar-width);
+        width: calc(var(--sidebar-width) + var(--sidebar-inner-padding) * 2);
         position: sticky;
-        padding: 0 var(--sidebar-inner-padding);
     }
 
     #sidebar-tabs {
@@ -66,6 +65,8 @@
         justify-content: space-between;
         padding-bottom: var(--padding);
         overflow-y: scroll;
+        padding: var(--sidebar-inner-padding);
+        width: var(--sidebar-width);
     }
 
     @media screen and (max-width: 535px) {
@@ -80,8 +81,8 @@
             height: var(--sidebar-height-mobile);
             position: fixed;
             bottom: 0;
-            padding: var(--sidebar-inner-padding) 0;
             justify-content: center;
+            align-items: flex-start;
         }
 
         #sidebar::before {
@@ -99,6 +100,9 @@
             overflow-y: visible;
             overflow-x: scroll;
             padding-bottom: 0;
+            padding: var(--sidebar-inner-padding) 0;
+            width: unset;
+            height: fit-content;
         }
 
         #sidebar :global(.sidebar-inner-container:first-child) {
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index cfc24318..27eb06a9 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -27,10 +27,10 @@
     $: if (isTabActive && tab) {
         showTab(tab);
 
-        tab.classList.add("animate")
+        tab.classList.add("animate");
         setTimeout(() => {
-            tab.classList.remove("animate")
-        }, 220)
+            tab.classList.remove("animate");
+        }, 220);
     }
 </script>
 
@@ -90,15 +90,19 @@
         transform: scale(0.95);
     }
 
+    :global([data-reduce-motion="true"]) .sidebar-tab:active:not(.active) {
+        transform: none;
+    }
+
     @keyframes pressButton {
         0% {
-            transform: scale(0.95)
+            transform: scale(0.95);
         }
         50% {
-            transform: scale(1.01)
+            transform: scale(1.01);
         }
         100% {
-            transform: none
+            transform: none;
         }
     }
 
@@ -129,13 +133,13 @@
 
         @keyframes pressButton {
             0% {
-                transform: scale(0.9)
+                transform: scale(0.9);
             }
             60% {
-                transform: scale(1.01)
+                transform: scale(1.015);
             }
             100% {
-                transform: scale(1)
+                transform: scale(1);
             }
         }
     }
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index a3730d68..3f1a58e0 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -70,9 +70,13 @@
         --border-radius: 11px;
 
         --sidebar-width: 80px;
-        --sidebar-height-mobile: calc(52px + env(safe-area-inset-bottom));
         --sidebar-font-size: 11px;
         --sidebar-inner-padding: 4px;
+        --sidebar-height-mobile: calc(
+            50px
+            + calc(var(--sidebar-inner-padding) * 2)
+            + env(safe-area-inset-bottom)
+        );
 
         --safe-area-inset-top: env(safe-area-inset-top);
 
@@ -134,7 +138,9 @@
         height: 100%;
         width: 100%;
         display: grid;
-        grid-template-columns: calc(var(--sidebar-width) + 8px) 1fr;
+        grid-template-columns: calc(
+                var(--sidebar-width) + var(--sidebar-inner-padding) * 2
+            ) 1fr;
         overflow: hidden;
         background-color: var(--sidebar-bg);
         color: var(--secondary);
@@ -144,7 +150,11 @@
     @media screen and (orientation: landscape) {
         #cobalt[data-iphone="true"] {
             grid-template-columns:
-                calc(var(--sidebar-width) + env(safe-area-inset-left) + 8px)
+                calc(
+                    var(--sidebar-width)
+                    + var(--sidebar-inner-padding) * 2
+                    + env(safe-area-inset-left)
+                )
                 1fr;
         }
 
@@ -166,7 +176,7 @@
         #cobalt {
             display: grid;
             grid-template-columns: unset;
-            grid-template-rows: 1fr calc(var(--sidebar-height-mobile) + 8px);
+            grid-template-rows: 1fr var(--sidebar-height-mobile);
         }
         #content {
             padding-top: env(safe-area-inset-top);