Improve mobile menu.

useiteurope · May 26, 2024 · 479bd0b · 479bd0b
1 parent 7e6892a
commit 479bd0b
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 36 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -3,17 +3,17 @@
         <a href="/">{%- picture /assets/global/img/logo_fundit.png --alt 'Logo FundIt' -%}</a>
     </div>
 
+    <label for="nav-trigger">
+        <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+                <path
+                    d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z">
+                </path>
+            </svg>
+        </span>
+    </label>
     <nav class="site-nav">
         <input type="checkbox" id="nav-trigger" class="nav-trigger">
-        <label for="nav-trigger">
-            <span class="menu-icon">
-                <svg viewBox="0 0 18 15" width="18px" height="15px">
-                    <path
-                        d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z">
-                    </path>
-                </svg>
-            </span>
-        </label>
         <ul class="trigger">
             {%- for site_page in site.pages -%}
             {%- if site_page.hide != true -%}

diff --git a/_sass/_header.sass b/_sass/_header.sass
@@ -1,4 +1,5 @@
 @import "breakpoints"
+
 header
     display: flex
     flex-flow: row
@@ -11,23 +12,43 @@ header
             height: 45pt
             width: auto
 
+@keyframes slide-in
+    0%
+        transform: translateY(-10px)
+        opacity: 0
+
+    100%
+        transform: translateY(0)
+        opacity: 1
+
+@keyframes slide-out
+    0%
+        transform: translateY(0px)
+        opacity: 0
+
+    100%
+        transform: translateY(-10px)
+        opacity: 1
+
 @media screen and (max-width: $breakpoint-small)
+    label[for="nav-trigger"]
+        padding: 16pt
+        position: relative
+        right: -16pt
+            // align-content: center
+
     .site-nav
         position: absolute
-        top: 26pt
-        right: 15px
-        text-align: right
+        top: 55pt
+        left: 0
+        right: 0
 
         .trigger
             background-color: $card-color
-            border: 1pt solid $card-border-color
-            border-radius: 8pt
+            border-top: 5pt solid $text-color
             font: 400 $font-size-regular $font-inter
-
-        label[for="nav-trigger"]
-            padding: 16pt
-            position: relative
-            right: -16pt
+            padding: 12pt 0
+            box-shadow: 0pt 8pt 12pt
 
         input:checked
             ~
@@ -36,20 +57,25 @@ header
                     flex-flow: column
                     justify-content: right
                     gap: 0
+                    animation: slide-in 0.3s both
         input
             ~
                 .trigger
                     display: none
+                    animation: slide-out 0.3s both
 
 @media screen and (min-width: $breakpoint-small)
+    label[for="nav-trigger"]
+        display: none
     .site-nav
-        label[for="nav-trigger"]
-            display: none
 
         .trigger
             background-color: transparent
             font: 400 $font-size-small $font-inter
 
+.nav-trigger
+    display: none
+
 .site-nav
     z-index: 2
     .trigger
@@ -64,18 +90,26 @@ header
         .page-link.current
             font-weight: 700
 
-        .page-link--outlined
-            color: white
-            background-color: $text-color
-            text-decoration: none
-            display: block
-            border: 0
-            border-radius: 20pt
-            text-align: center
-            padding: 6pt 12pt
-            opacity: 1
-            margin-top: 2pt
-            margin-bottom: 2pt
-
-    .nav-trigger
-        display: none
+        @media screen and (max-width: $breakpoint-small)
+            .page-link
+                width: 100%
+                padding: 8pt 12pt
+
+        @media screen and (max-width: $breakpoint-small)
+            .page-link--outlined
+                width: 100%
+                color: black
+
+        @media screen and (min-width: $breakpoint-small)
+            .page-link--outlined
+                color: white
+                background-color: $text-color
+                text-decoration: none
+                display: block
+                border: 0
+                border-radius: 20pt
+                text-align: center
+                padding: 6pt 12pt
+                opacity: 1
+                margin-top: 2pt
+                margin-bottom: 2pt