feat: Improved navigation on mobile

This commit adds hamburger style toggling of the top menu on mobile screens. Fixes #56
SpareBank1 · Mar 6, 2018 · 6ea8fd1 · 6ea8fd1
1 parent d61ba0c
commit 6ea8fd1
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -14,9 +14,9 @@
         "commitmsg": "commitlint -e $GIT_PARAMS",
         "postinstall": "npm run bootstrap",
         "bootstrap": "lerna bootstrap",
-        "prebuild": "mkdirp dist/fonts",
         "build": "lerna run build && npm run build:css:ffe",
-        "build:htdocs": "run-s build:packages build:css:* build:content build:styleguidist",
+        "build:htdocs": "run-s build:packages build:css:* build:assets build:content build:styleguidist",
+        "build:assets": "cp -r src/assets/ dist/",
         "build:css:ffe": "lessc packages/ffe-all.less dist/ffe.css",
         "build:css:styles": "lessc src/styles/styles.less dist/styles.css",
         "build:packages": "lerna run build",

diff --git a/src/assets/sds.js b/src/assets/sds.js
@@ -0,0 +1,20 @@
+(function() {
+    var qs = document.querySelector.bind(document);
+
+    qs('.sb1ds-top-menu__toggle-button').onclick = function() {
+        toggleModifier('sb1ds-top-menu__wrapper', 'visible');
+        toggleModifier('sb1ds-top-menu__site-nav-hamburger', 'expanded');
+    };
+
+    function toggleModifier(be, m) {
+        toggleClass(qs('.' + be), be + '--' + m);
+    }
+
+    function toggleClass(el, className) {
+        if (el.className.indexOf(className) == -1) {
+            el.className += ' ' + className;
+        } else {
+            el.className = el.className.replace(className, '');
+        }
+    }
+})();
diff --git a/src/styles/components/top-menu.less b/src/styles/components/top-menu.less
@@ -96,25 +96,111 @@
         }
     }
 
+    &__toggle-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+
+        &::after {
+            border: none;
+        }
+
+        @media screen and (min-width: @breakpoint-md) {
+            display: none;
+        }
+    }
+
     &__site-nav {
         height: 100%;
     }
 
     &__wrapper {
         padding: 20px 0;
+        transition: transform @ffe-transition-duration @ffe-ease, opacity 0.1s;
 
         @media screen and (min-width: @breakpoint-md) {
             padding: 0;
             display: flex;
             align-items: flex-end;
         }
+
+        &:not(.sb1ds-top-menu__wrapper--visible) {
+            @media screen and (max-width: (@breakpoint-md - 1)) {
+                padding: 0;
+                visibility: hidden;
+                height: 1px;
+                overflow: hidden;
+                transform: translateY(-25px);
+                opacity: 0;
+            }
+        }
     }
 
     @media screen and (min-width: @breakpoint-lg) {
         position: fixed;
         width: 100vw;
         z-index: 1;
     }
+
+    &__site-nav-hamburger {
+        position: relative;
+        vertical-align: middle;
+        display: inline-block;
+        height: 25px;
+        width: 25px;
+
+        &__bar,
+        &::before,
+        &::after {
+            display: inline-block;
+            background: @ffe-blue-royal;
+            width: 25px;
+            height: 4px;
+            border-radius: 2px;
+        }
+
+        &__bar {
+            position: absolute;
+            left: 0;
+            bottom: 10px;
+            transition: transform @ffe-transition-duration @ffe-ease-in-out-back,
+                width @ffe-transition-duration @ffe-ease-in-out-back;
+        }
+
+        &::before {
+            position: absolute;
+            content: '';
+            left: 0;
+            bottom: 18px;
+        }
+
+        &::after {
+            position: absolute;
+            content: '';
+            left: 0;
+            bottom: 2px;
+        }
+
+        &::before,
+        &::after {
+            transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
+        }
+
+        &--expanded {
+            .sb1ds-top-menu__site-nav-hamburger__bar {
+                width: 0;
+                transform: translate(12px);
+            }
+
+            &::before {
+                transform: translateY(8px) rotate(45deg);
+            }
+
+            &::after {
+                transform: translateY(-8px) rotate(-45deg);
+            }
+        }
+    }
 }
 
 .sb1ds-header-grid__row {

diff --git a/src/templates/frontpage.hbs b/src/templates/frontpage.hbs
@@ -52,5 +52,7 @@
       </div>
     </div>
   </div>
+
+  <script src="/assets/sds.js"></script>
 </body>
 </html>
diff --git a/src/templates/header.hbs b/src/templates/header.hbs
@@ -1,4 +1,11 @@
 <div class="sb1ds-top-menu">
+	<button class="ffe-button ffe-tertiary-button sb1ds-top-menu__toggle-button">
+		<span class="sb1ds-top-menu__site-nav-hamburger">
+			<span class="sb1ds-top-menu__site-nav-hamburger__bar">
+			</span>
+		</span>
+	</button>
+
 	<div class="sb1ds-header-grid ffe-grid ffe-grid--no-top-padding">
 		<div class="sb1ds-header-grid__row ffe-grid__row">
 			<div class="

diff --git a/src/templates/page.hbs b/src/templates/page.hbs
@@ -35,5 +35,6 @@
     </div>
   </div>
 
+  <script src="/assets/sds.js"></script>
 </body>
 </html>
diff --git a/src/templates/styleguidist.hbs b/src/templates/styleguidist.hbs
@@ -10,4 +10,6 @@
 
 		<div id="app"></div>
 	</body>
+
+	<script src="/assets/sds.js"></script>
 </html>