feat: new left sidebar layout (#524)

* feat: more compact menu style

* add compact option to sidebar

* fix mobile menu style

4 files changed, 74 insertions, 46 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;
         }
     }
 }
diff --git a/config.yaml b/config.yaml
index c55a911..93367bb 100644
--- a/config.yaml
+++ b/config.yaml
@@ -19,6 +19,7 @@ params:
         lastUpdated: Jan 02, 2006 15:04 MST
 
     sidebar:
+        compact: false
         emoji:
         subtitle:
         avatar:
diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html
index 44d5307..f255389 100644
--- a/layouts/partials/sidebar/left.html
+++ b/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,27 +35,27 @@
             <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
             <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
         </div>
-
-        {{- with .Site.Menus.social -}}
-            <ol class="social-menu">
-                {{ range . }}
-                    <li>
-                        <a 
-                            href='{{ .URL }}'
-                            {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
-                            {{ with .Name }}title="{{ . }}"{{ end }}
-                        >
-                            {{ $icon := default "link" .Params.Icon }}
-                            {{ with $icon }}
-                                {{ partial "helper/icon" . }}
-                            {{ end }}
-                        </a>
-                    </li>
-                {{ end }}
-            </ol>
-        {{- end -}}
     </header>
 
+    {{- with .Site.Menus.social -}}
+        <ol class="social-menu">
+            {{ range . }}
+                <li>
+                    <a 
+                        href='{{ .URL }}'
+                        {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
+                        {{ with .Name }}title="{{ . }}"{{ end }}
+                    >
+                        {{ $icon := default "link" .Params.Icon }}
+                        {{ with $icon }}
+                            {{ partial "helper/icon" . }}
+                        {{ end }}
+                    </a>
+                </li>
+            {{ end }}
+        </ol>
+    {{- end -}}
+
     <ol class="menu" id="main-menu">
         {{ $currentPage := . }}
         {{ range .Site.Menus.main }}