diff --git a/_layouts/default.html b/_layouts/default.html index 2eba760..84971bd 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -8,6 +8,14 @@ layout: table_wrappers {% include head.html %} + + Menu + + + + Search + + Expand @@ -17,8 +25,10 @@ layout: table_wrappers
- {% include title.html %} - + {% include title.html %} + + +
+ + {% if site.search_enabled != false %} + + + + {% endif %} diff --git a/_sass/layout.scss b/_sass/layout.scss index 12b7fe0..3c1ed35 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -147,16 +147,10 @@ } .site-button { - appearance: none; display: flex; height: 100%; padding: $gutter-spacing-sm; align-items: center; - color: $link-color; - text-transform: uppercase; - background: transparent; - border: 0; - @include fs-3; @include mq(md) { display: none; @@ -197,3 +191,9 @@ body { justify-self: end; } } + +.icon { + width: $sp-5; + height: $sp-5; + fill: $link-color; +} diff --git a/_sass/search.scss b/_sass/search.scss index 79c3cfd..d3d8ed9 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -62,6 +62,8 @@ } .search-icon { + width: 1.2rem; + height: 1.2rem; align-self: center; margin-right: $sp-2; fill: $grey-dk-000; @@ -165,3 +167,17 @@ font-weight: bold; color: $link-color; } + +.search-button { + position: fixed; + display: flex; + width: $sp-9; + height: $sp-9; + bottom: $sp-4; + right: $sp-4; + background-color: $search-background-color; + border-radius: #{$sp-9 / 2}; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + align-items: center; + justify-content: center; +} diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index 0ba8dc9..4caedac 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -37,24 +37,36 @@ function initNav() { const siteNav = document.getElementById('site-nav'); const mainHeader = document.getElementById('main-header'); - const navTrigger = document.getElementById('site-nav-trigger'); + const menuButton = document.getElementById('menu-button'); - jtd.addEvent(navTrigger, 'click', function(e){ + jtd.addEvent(menuButton, 'click', function(e){ e.preventDefault(); - var text = navTrigger.innerText; - var textToggle = navTrigger.getAttribute('data-text-toggle'); - siteNav.classList.toggle('nav-open'); - mainHeader.classList.toggle('nav-open'); - navTrigger.classList.toggle('nav-open'); - navTrigger.innerText = textToggle; - navTrigger.setAttribute('data-text-toggle', text); - textToggle = text; - }) + if (menuButton.classList.toggle('nav-open')) { + siteNav.classList.add('nav-open'); + mainHeader.classList.add('nav-open'); + } else { + siteNav.classList.remove('nav-open'); + mainHeader.classList.remove('nav-open'); + } + }); + + {% if site.search_enabled != false -%} + const searchInput = document.getElementById('search-input'); + const searchButton = document.getElementById('search-button'); + + jtd.addEvent(searchButton, 'click', function(e){ + e.preventDefault(); + + mainHeader.classList.add('nav-open'); + searchInput.focus(); + }); + {%- endif %} } // Site search +{% if site.search_enabled != false -%} function initSearch() { var request = new XMLHttpRequest(); request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true); @@ -284,6 +296,7 @@ function initSearch() { }); } } +{%- endif %} function pageFocus() { var mainWrap = document.getElementById('main-wrap'); @@ -295,9 +308,9 @@ function pageFocus() { jtd.onReady(function(){ initNav(); pageFocus(); - if (typeof lunr !== 'undefined') { - initSearch(); - } + {% if site.search_enabled != false -%} + initSearch(); + {%- endif %} }); })(window.jtd = window.jtd || {});