feat: new left sidebar layout (#524)

* feat: more compact menu style

* add compact option to sidebar

* fix mobile menu style

2 files changed, 53 insertions, 26 deletions

diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index 16adb80..4f29c9f 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -134,19 +134,22 @@
     overflow-y: auto;
     flex-grow: 1;
     font-size: 1.4rem;
-
     background-color: var(--card-background);
-    padding: 15px 0;
+
     box-shadow: var(--shadow-l1);
     display: none;
-
     margin: 0 calc(var(--container-padding) * -1);
 
+    padding: 30px 30px;
+    @include respond(xl) {
+        padding: 15px 0;
+    }
+
     &,
     .menu-bottom-section {
-        gap: 15px;
+        gap: 30px;
         @include respond(xl) {
-            gap: 20px;
+            gap: 25px;
         }
     }
 
@@ -166,11 +169,10 @@
     li {
         position: relative;
         vertical-align: middle;
-        padding: 10px 30px;
+        padding: 0;
 
         @include respond(md) {
             width: 100%;
-            padding: 10px 0;
         }
 
         svg {
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 09bcc33..95310ca 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -12,14 +12,14 @@
     flex-shrink: 0;
     align-self: stretch;
     gap: var(--sidebar-element-separation);
-
-    width: 100%;
     max-width: none;
-
+    width: 100%;
     position: relative;
 
-    --sidebar-avatar-size: 120px;
+    --sidebar-avatar-size: 100px;
     --sidebar-element-separation: 20px;
+    --emoji-size: 40px;
+    --emoji-font-size: 20px;
 
     @include respond(md) {
         width: auto;
@@ -29,13 +29,42 @@
     }
 
     @include respond(2xl) {
-        --sidebar-avatar-size: 140px;
+        --sidebar-avatar-size: 120px;
         --sidebar-element-separation: 25px;
+        --emoji-size: 40px;
     }
 
     &.sticky {
         top: 0;
     }
+
+    &.compact {
+        --sidebar-avatar-size: 80px;
+        --emoji-size: 30px;
+        --emoji-font-size: 15px;
+
+        header {
+            @include respond(lg) {
+                flex-direction: row;
+            }
+
+            .site-meta {
+                gap: 5px;
+            }
+
+            .site-name {
+                font-size: 1.4rem;
+
+                @include respond(2xl) {
+                    font-size: 1.75rem;
+                }
+            }
+
+            .site-description {
+                font-size: 1.4rem;
+            }
+        }
+    }
 }
 
 .right-sidebar {
@@ -69,6 +98,7 @@
         margin: 0;
         width: var(--sidebar-avatar-size);
         height: var(--sidebar-avatar-size);
+        flex-shrink: 0;
 
         .site-logo {
             width: 100%;
@@ -79,22 +109,16 @@
 
         .emoji {
             position: absolute;
-            width: 40px;
-            height: 40px;
-            line-height: 40px;
+            width: var(--emoji-size);
+            height: var(--emoji-size);
+            line-height: var(--emoji-size);
             border-radius: 100%;
             bottom: 0;
             right: 0;
             text-align: center;
-            font-size: 20px;
+            font-size: var(--emoji-font-size);
             background-color: var(--card-background);
             box-shadow: var(--shadow-l2);
-
-            @include respond(2xl) {
-                width: 50px;
-                height: 50px;
-                line-height: 50px;
-            }
         }
     }
 
@@ -102,15 +126,16 @@
         display: flex;
         flex-direction: column;
         gap: 10px;
+        justify-content: center;
     }
 
     .site-name {
         color: var(--accent-color);
         margin: 0;
-        font-size: 1.8rem;
+        font-size: 1.6rem;
 
         @include respond(2xl) {
-            font-size: 2rem;
+            font-size: 1.8rem;
         }
     }
 
@@ -118,10 +143,10 @@
         color: var(--body-text-color);
         font-weight: normal;
         margin: 0;
-        font-size: 1.6rem;
+        font-size: 1.4rem;
 
         @include respond(2xl) {
-            font-size: 1.8rem;
+            font-size: 1.6rem;
         }
     }
 }