diff --git a/js/index.js b/js/index.js index 2e39371b1d..b62fbc7d85 100644 --- a/js/index.js +++ b/js/index.js @@ -3,11 +3,13 @@ import feedback from './feedback' import accordion from './accordion' import searchNavbar from './search-navbar' +import menuMobile from './menu-mobile' import headingsAnchors from './headings-anchors' import dropdownMenu from './dropdown-menu' feedback() accordion() searchNavbar() +menuMobile() headingsAnchors() dropdownMenu() diff --git a/js/menu-mobile/index.js b/js/menu-mobile/index.js new file mode 100644 index 0000000000..9e3a9392a2 --- /dev/null +++ b/js/menu-mobile/index.js @@ -0,0 +1,24 @@ +const COMPONENT_NAME = 'data-menu-mobile' +const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]` +const TRIGGER_SELECTOR = '[data-ref*="menu-mobile[trigger]"]' + +const DEFAULTS = { + classActive: 'active' +} + +export default function () { + const component = document.querySelector(COMPONENT_SELECTOR) + + if (component) { + const settings = Object.assign({}, DEFAULTS, JSON.parse(component.getAttribute(COMPONENT_NAME) || '{}')) + const triggers = document.querySelectorAll(TRIGGER_SELECTOR) + + for (let i = 0; i < triggers.length; i++) { + triggers[i].addEventListener('click', (event) => { + event.preventDefault() + + component.classList.toggle(settings.classActive) + }) + } + } +} diff --git a/js/search-navbar/index.js b/js/search-navbar/index.js index ed9cfdaf06..494e8eea43 100644 --- a/js/search-navbar/index.js +++ b/js/search-navbar/index.js @@ -1,18 +1,24 @@ -const COMPONENT_SELECTOR = '[data-search-navbar]' +const COMPONENT_NAME = 'data-search-navbar' +const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]` const TRIGGER_SELECTOR = '[data-ref*="search-navbar[trigger]"]' +const DEFAULTS = { + classActive: 'active' +} + export default function () { const component = document.querySelector(COMPONENT_SELECTOR) if (component) { - const triggers = document.querySelectorAll(TRIGGER_SELECTOR); + const settings = Object.assign({}, DEFAULTS, JSON.parse(component.getAttribute(COMPONENT_NAME) || '{}')) + const triggers = document.querySelectorAll(TRIGGER_SELECTOR) for (let i = 0; i < triggers.length; i++) { - triggers[i].addEventListener('click', e => { - e.preventDefault() + triggers[i].addEventListener('click', (event) => { + event.preventDefault() - component.classList.toggle(component.dataset.activeClass) + component.classList.toggle(settings.classActive) }) } - } + } } diff --git a/src/_includes/menu/menu-mobile.html b/src/_includes/menu/menu-mobile.html new file mode 100644 index 0000000000..ecaf1fbcb5 --- /dev/null +++ b/src/_includes/menu/menu-mobile.html @@ -0,0 +1,21 @@ +
+ {% include menu/menu-primary.html %} + + +
diff --git a/src/_includes/navbar/navbar-mobile.html b/src/_includes/navbar/navbar-mobile.html new file mode 100644 index 0000000000..858b8d32e7 --- /dev/null +++ b/src/_includes/navbar/navbar-mobile.html @@ -0,0 +1,35 @@ + diff --git a/src/_layouts/main.html b/src/_layouts/main.html index 963442feca..ea35fa572b 100644 --- a/src/_layouts/main.html +++ b/src/_layouts/main.html @@ -16,33 +16,7 @@ {% include navbar/search.html %} - + {% include navbar/navbar-mobile.html %}
@@ -70,4 +44,4 @@ -
\ No newline at end of file + diff --git a/src/_sass/components/_navbar-mobile.scss b/src/_sass/components/_navbar-mobile.scss index 0a1b4d4c51..c801214c3c 100644 --- a/src/_sass/components/_navbar-mobile.scss +++ b/src/_sass/components/_navbar-mobile.scss @@ -1,7 +1,8 @@ .navbar-mobile { $this: &; - padding: 17px 20px; + position: relative; + z-index: 10; background-color: color(white); box-shadow: 0 1px 2px 0 rgba(67, 90, 111, 0.08); color: color(gray); @@ -10,6 +11,12 @@ display: none; } + &__wrapper { + padding: 17px 20px; + background-color: color(white); + transition: background-color 0.2s ease; + } + &__search { position: absolute; top: 0; @@ -18,13 +25,50 @@ width: calc(100% - 40px); transform: translate(20px, 12px); opacity: 0; - transition: 100ms ease opacity; + transition: opacity 0.2s ease, z-index 0s linear 0.2s; } - &--active { + &__search-button { + transition: opacity 0.2s ease; + } + + &__panel { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100vh; + max-height: 100vh; + background-color: color(gray-light); + transform: translateY(-100%); + overflow-y: scroll; + padding: 76px 24px 24px 24px; + transition: transform 0.3s ease; + } + + &--searching { #{$this}__search { z-index: 1; opacity: 1; + transition: opacity 0.2s ease, z-index 0s linear; + } + } + + &--active { + z-index: 10; + + #{$this}__wrapper { + background-color: color(gray-light); + } + + #{$this}__search-button { + opacity: 0; + pointer-events: none; + } + + #{$this}__panel { + transform: translateY(0); } } }