feat: new left sidebar layout (#524)

* feat: more compact menu style

* add compact option to sidebar

* fix mobile menu style

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 {

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;
+            width: var(--emoji-size);
-            height: 40px;
+            height: var(--emoji-size);
-            line-height: 40px;
+            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;
         }
     }
 }

config.yaml

@@ -19,6 +19,7 @@ params:
         lastUpdated: Jan 02, 2006 15:04 MST
 
     sidebar:
+        compact: false
         emoji:
         subtitle:
         avatar:

layouts/partials/sidebar/left.html

@@ -1,4 +1,4 @@
-<aside class="sidebar left-sidebar sticky">
+<aside class="sidebar left-sidebar sticky {{ if .Site.Params.sidebar.compact }}compact{{ end }}">
     <button class="hamburger hamburger--spin" type="button" id="toggle-menu" aria-label="{{ T `toggleMenu` }}">
         <span class="hamburger-box">
             <span class="hamburger-inner"></span>
@@ -35,6 +35,7 @@
             <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
             <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
         </div>
+    </header>
 
     {{- with .Site.Menus.social -}}
         <ol class="social-menu">
@@ -54,7 +55,6 @@
             {{ end }}
         </ol>
     {{- end -}}
-    </header>
 
     <ol class="menu" id="main-menu">
         {{ $currentPage := . }}