From 838c5d1c6635fdce61ea197293afabba3eb9ea74 Mon Sep 17 00:00:00 2001 From: Klaudia Date: Thu, 3 Oct 2019 17:14:48 +0200 Subject: [PATCH 1/2] feat(): Introduce new search navbar for mobile devices --- js/index.js | 4 ++- js/search-navbar/index.js | 18 +++++++++++++ src/_includes/navbar/logo.html | 2 +- src/_layouts/default.html | 28 ++++++++++++++++++- src/_sass/components/_field.scss | 13 ++++++--- src/_sass/components/_menu-button.scss | 33 +++++++++++++++++++++++ src/_sass/components/_navbar-mobile.scss | 30 +++++++++++++++++++++ src/_sass/components/_search-button.scss | 4 +++ src/_sass/components/_stage.scss | 34 +++++++++++++++++++++--- src/_sass/pages/_docs.scss | 4 ++- src/_sass/segment.scss | 3 +++ 11 files changed, 161 insertions(+), 12 deletions(-) create mode 100644 js/search-navbar/index.js create mode 100644 src/_sass/components/_menu-button.scss create mode 100644 src/_sass/components/_navbar-mobile.scss create mode 100644 src/_sass/components/_search-button.scss diff --git a/js/index.js b/js/index.js index 6be02374db..05957bb661 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,3 @@ -console.log('hello world'); +import searchNavbar from './search-navbar' + +searchNavbar() diff --git a/js/search-navbar/index.js b/js/search-navbar/index.js new file mode 100644 index 0000000000..ed9cfdaf06 --- /dev/null +++ b/js/search-navbar/index.js @@ -0,0 +1,18 @@ +const COMPONENT_SELECTOR = '[data-search-navbar]' +const TRIGGER_SELECTOR = '[data-ref*="search-navbar[trigger]"]' + +export default function () { + const component = document.querySelector(COMPONENT_SELECTOR) + + if (component) { + const triggers = document.querySelectorAll(TRIGGER_SELECTOR); + + for (let i = 0; i < triggers.length; i++) { + triggers[i].addEventListener('click', e => { + e.preventDefault() + + component.classList.toggle(component.dataset.activeClass) + }) + } + } +} diff --git a/src/_includes/navbar/logo.html b/src/_includes/navbar/logo.html index f2f69151d4..b0212907b6 100644 --- a/src/_includes/navbar/logo.html +++ b/src/_includes/navbar/logo.html @@ -1,6 +1,6 @@