on master help sign in
Docs: Mobile select navigation
commitbdb3f80bb0a2c61efb96d8bf53713835d119be0b authorMatilde Park <matilde@tlon.io> dateWed 11 Sep 2019, 16:56 (7 years ago) parent3b50deb
3 files changed+49−3
sass/_main.scss+9−1 static/scripts.js+9−1 templates/partials/navigation-docs.html+31−1
sass/_main.scss+9−1
@@ -418,13 +418,21 @@ body.page-indiced {
418418 }
419419}
420420
421−// doc-specific chevrons
421+// doc-specific navigation
422422
423+select {
424+ -webkit-appearance: none;
425+ border: 0;
426+ outline: 0;
427+ background: transparent;
428+ font-family: "Inter UI", sans-serif;
429+}
423430nav.docs:not(.mobile) {
424431 height: 100vh;
425432 position: fixed;
426433 overflow-y: scroll;
427434 width: 25vw;
435+ max-width: 300px;
428436}
429437nav.docs details {
430438 summary {
static/scripts.js+9−1
@@ -384,4 +384,12 @@ window.addEventListener("scroll", event => {
384384// }
385385// })
386386//
387−})};
387+})};
388+
389+let docsSelect = document.getElementById('docsSelect');
390+let goTo = function() {
391+ let url = docsSelect.options[docsSelect.selectedIndex].value;
392+ document.location.assign(url);
393+}
394+
395+docsSelect.addEventListener('change', goTo);
templates/partials/navigation-docs.html+31−1
@@ -64,7 +64,37 @@
6464 <span class="gray3"> / </span>
6565 <a href="{{config.base_url}}/docs/">
6666 Documentation
67− </a>
67+ </a>
68+ <select class="mw4" id="docsSelect">
69+ <option>⌄</option>
70+ {% set index = get_section(path="docs/_index.md") %}
71+ {% for s in index.subsections %}
72+ {% set subsection = get_section(path=s) %}
73+ <option>{{ subsection.title }}</option>
74+ {% if subsection.pages %}
75+ {% for page in subsection.pages %}
76+ <option value="{{ page.permalink }}">{{ page.title }}</option>
77+ {% endfor %}
78+ {% for y in subsection.subsections %}
79+ {% set subsubsection = get_section(path=y) %}
80+ {% if subsubsection.pages %}
81+ {% for page in subsubsection.pages %}
82+ <option value="{{ page.permalink }}">{{ page.title }}</option>
83+ {% endfor %}
84+ {% for x in subsubsection.subsections %}
85+ {% set subsubsubsection = get_section(path=x) %}
86+ <option>{{ subsubsubsection.title }}</option>
87+ {% if subsubsubsection.pages %}
88+ {% for page in subsubsubsection.pages %}
89+ <option value="{{ page.permalink }}">{{ page.title }}</option>
90+ {% endfor %}
91+ {% endif %}
92+ {% endfor %}
93+ {% endif %}
94+ {% endfor %}
95+ {% endif %}
96+ {% endfor %}
97+ </select>
6898 <button id="js-search-window-toggle" class="mt4 mb4" type="button" style="outline:none">
6999 <span id="search-icon" class="f3 gray3">⚲</span><span class="ml3 gray2">Search</span>
70100 </button>