diff --git a/_layouts/default.html b/_layouts/default.html
index 7569d9001c6d1978c557353b8f68d685addede72..71dd93c06356dc49dd9e9346358cd9fee7b2f5e4 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -12,6 +12,14 @@ layout: table_wrappers
<title>Link</title>
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
</symbol>
+ <symbol id="search" viewBox="0 0 24 24">
+ <title>Menu</title>
+ <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/>
+ </symbol>
+ <symbol id="menu" viewBox="0 0 24 24">
+ <title>Search</title>
+ <path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+ </symbol>
<symbol id="arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
@@ -21,8 +29,10 @@ layout: table_wrappers
<div class="page-wrap">
<div class="side-bar">
<div class="site-header">
- <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
- <button id="site-nav-trigger" class="site-button" data-text-toggle="Hide" type="button">Menu</button>
+ <a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
+ <a href="#" id="menu-button" class="site-button">
+ <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#menu"></use></svg>
+ </a>
</div>
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
{% include nav.html %}
@@ -38,12 +48,12 @@ layout: table_wrappers
<div class="search">
<div class="search-input-wrap">
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
- <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
+ <svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#search"></use></svg>
</div>
<div id="search-results" class="search-results"></div>
</div>
{% endif %}
- {% if site.aux_links != nil %}
+ {% if site.aux_links %}
<nav aria-label="Auxiliary" class="aux-nav">
<ul class="aux-nav-list">
{% for link in site.aux_links %}
@@ -61,7 +71,7 @@ layout: table_wrappers
</nav>
{% endif %}
</div>
- <div class="main-content-wrap">
+ <div id="main-content-wrap" class="main-content-wrap">
{% unless page.url == "/" %}
{% if page.parent %}
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
@@ -136,6 +146,12 @@ layout: table_wrappers
</div>
</div>
</div>
+
+ {% if site.search_enabled != false %}
+ <a href="#" id="search-button" class="search-button">
+ <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#search"></use></svg>
+ </a>
+ {% endif %}
</div>
</body>
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 720ac1d0716c065b8828e692b3e4060d9881957d..5b997cab352b30a7fdbcefffe7ef95c320a77576 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -164,16 +164,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;
@@ -214,3 +208,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 79c3cfd1f3088cd18c5616913e57747dee07e5e7..e0d66fe0bbff43b9aa6baa8a8eac059667d19f23 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,26 @@
font-weight: bold;
color: $link-color;
}
+
+.search-button {
+ position: fixed;
+ right: $sp-4;
+ bottom: $sp-4;
+ display: flex;
+ width: $sp-9;
+ height: $sp-9;
+ 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;
+}
+
+.search-results,
+.search-button {
+ border: 1px solid rgba($link-color, 0.3);
+}
+
+.blur {
+ filter: blur(5px);
+}
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index b683c7fcb3710ebdb946924da8776cc31fe35b18..3b33821e8fb128c6543804c7e25a883a53502d51 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);
@@ -106,10 +118,12 @@ function initSearch() {
var docs = data;
var searchInput = document.getElementById('search-input');
var searchResults = document.getElementById('search-results');
+ var mainContentWrap = document.getElementById('main-content-wrap');
function hideResults() {
searchResults.innerHTML = '';
searchResults.classList.remove('active');
+ mainContentWrap.classList.remove('blur');
}
jtd.addEvent(searchInput, 'keydown', function(e){
@@ -188,6 +202,7 @@ function initSearch() {
if (results.length > 0) {
searchResults.classList.add('active');
+ mainContentWrap.classList.add('blur');
var resultsList = document.createElement('ul');
resultsList.classList.add('search-results-list');
searchResults.appendChild(resultsList);
@@ -289,6 +304,7 @@ function initSearch() {
});
}
}
+{%- endif %}
// Focus
@@ -314,9 +330,9 @@ jtd.setTheme = function(theme) {
jtd.onReady(function(){
initNav();
pageFocus();
- if (typeof lunr !== 'undefined') {
- initSearch();
- }
+ {% if site.search_enabled != false -%}
+ initSearch();
+ {%- endif %}
});
})(window.jtd = window.jtd || {});