From 1476cd6adbb27789ff10039f28b9b1fb527494d1 Mon Sep 17 00:00:00 2001 From: Jussi Kinnula Date: Mon, 31 Dec 2018 11:01:08 +0200 Subject: [PATCH] Implement responsive mobile menu + remove old select-based mobile menu --- src/assets/css/components/i-page.css | 120 +++++++++++++++++++++++---- src/assets/js/app.js | 47 +++++++++-- src/templates/index.handlebars | 24 ++---- 3 files changed, 154 insertions(+), 37 deletions(-) diff --git a/src/assets/css/components/i-page.css b/src/assets/css/components/i-page.css index a3432d8..2eb35fb 100644 --- a/src/assets/css/components/i-page.css +++ b/src/assets/css/components/i-page.css @@ -6,36 +6,124 @@ font-size: 16px; } -.i-page__sidebar { +.i-page__mobile-toggle { display: none; +} + +.i-page__sidebar { background: #0b7564; color: #fff; } + .i-page__sidebar > * { padding: 0 20px; } + .i-page__sidebar a { color: inherit; } + .i-page__content { - padding-top: 60px; background: #f0f0f0; } -.i-nav-select { - position: fixed; - z-index: 100; - top: 0; - width: 100%; - min-height: 60px; - margin: 0; - padding: 10px 20px; - padding-right: 145px; - background: #f0f0f0; -} +@media (max-width: 991px) { + .i-page__mobile-toggle { + display: block; + position: fixed; + top: 20px; + right: 20px; + z-index: 99; + } + + .i-page__mobile-toggle .icon { + width: 60px; + height: 45px; + position: relative; + cursor: pointer; + } + + .i-page__mobile-toggle .icon span { + display: block; + position: absolute; + height: 9px; + width: 100%; + background-color: #000; + border-radius: 9px; + opacity: 1; + left: 0; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: .25s ease-in-out; + -moz-transition: .25s ease-in-out; + -o-transition: .25s ease-in-out; + transition: .25s ease-in-out; + } + + .i-page__mobile-toggle .icon span:nth-child(1) { + top: 0px; + } + + .i-page__mobile-toggle .icon span:nth-child(2), + .i-page__mobile-toggle .icon span:nth-child(3) { + top: 18px; + } + + .i-page__mobile-toggle .icon span:nth-child(4) { + top: 36px; + } -.i-nav-select select { - padding: 0; + .i-page__mobile-toggle .icon.open span { + background-color: #FFF; + } + + .i-page__mobile-toggle .icon.open span:nth-child(1) { + top: 18px; + width: 0%; + left: 50%; + } + + .i-page__mobile-toggle .icon.open span:nth-child(2) { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + } + + .i-page__mobile-toggle .icon.open span:nth-child(3) { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + } + + .i-page__mobile-toggle .icon.open span:nth-child(4) { + top: 18px; + width: 0%; + left: 50%; + } + + .i-page__sidebar { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + transform: translateX(-100vw); + transition: transform .25s ease-in-out; + } + + .i-page__sidebar.visible { + transform: translateX(0); + } + + .i-page__sidebar.visible .theme-sidebar-categories { + overflow-y: auto; + height: 300px; /* default height */ + margin-bottom: 15px; + } } @media (min-width: 992px) { @@ -60,4 +148,4 @@ .i-nav-select { display: none; } -} +} \ No newline at end of file diff --git a/src/assets/js/app.js b/src/assets/js/app.js index f0a5112..ff9ade4 100644 --- a/src/assets/js/app.js +++ b/src/assets/js/app.js @@ -101,12 +101,6 @@ }); }); - // Mobile nav select - $('.i-nav-select').change(function() { - var slug = $(this).find('option:selected').val(); - window.location.hash = slug; - }); - // Code block toggle $('.i-code-block__lang.-collapsible').click(function() { var $lang = $(this); @@ -114,5 +108,46 @@ $lang.siblings('.i-code-block__content').toggleClass('hidden'); }); + // Mobile menu toggle + var menuOpen = false; + + function calculateMobileMenuHeight() { + var $categories = $('.i-page__sidebar > .theme-sidebar-categories'); + if ($(window).width() < 992 && menuOpen) { + var $rect = $categories[0].getBoundingClientRect(); + var $height = $(window).height() - Math.ceil($rect.top) - 50; + $categories[0].style.height = $height + 'px'; + } else { + $categories[0].style.height = ''; + } + } + + function toggleMobileMenu() { + if (menuOpen) { + $('.i-page__sidebar').toggleClass('visible'); + $('.i-page__mobile-toggle > .icon').toggleClass('open'); + } else { + $('.i-page__sidebar').removeClass('visible'); + $('.i-page__mobile-toggle > .icon').removeClass('open'); + var $categories = $('.i-page__sidebar > .theme-sidebar-categories'); + } + calculateMobileMenuHeight(); + } + + $(window).resize(function() { + calculateMobileMenuHeight(); + }) + + $('.i-page__mobile-toggle').click(function() { + menuOpen = !menuOpen; + toggleMobileMenu(); + }); + + // Hide mobile menu when clicking sidebar items + $('.i-sidebar-list-item').click(function() { + menuOpen = false; + toggleMobileMenu(); + }); + }); })(jQuery); diff --git a/src/templates/index.handlebars b/src/templates/index.handlebars index 9e55e8b..7bf11e9 100644 --- a/src/templates/index.handlebars +++ b/src/templates/index.handlebars @@ -18,22 +18,16 @@ {{/each}} -
- -
-
- -
+
+
+ + + +
+
+ +
{{#each groups}}