Skip to content

Commit 995c49c

Browse files
oodamienoodamien
committed
Improve sidebar
Resolve #98 #108 #110
1 parent 68a05e9 commit 995c49c

File tree

7 files changed

+140
-58
lines changed

7 files changed

+140
-58
lines changed

‎src/css/header.css‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
html.is-clipped--navbar {
2-
overflow-y: hidden;
2+
overflow-y: auto;
33
}
44

55
body {
@@ -15,7 +15,7 @@ body {
1515
top: 0;
1616
width: 100%;
1717
z-index: var(--z-index-navbar);
18-
padding: 8px 0;
18+
padding: 0;
1919
border-bottom: 1px solid var(--nav-panel-divider-color);
2020
}
2121

@@ -25,7 +25,13 @@ body {
2525

2626
.navbar-brand {
2727
display: flex;
28-
padding-left: 1rem;
28+
padding: 0 1rem;
29+
}
30+
31+
@media screen and (min-width: 1024px) {
32+
.navbar-brand {
33+
padding: 1rem;
34+
}
2935
}
3036

3137
.navbar-brand .navbar-item:first-child,

‎src/css/nav.css‎

Lines changed: 92 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
}
2828

2929
html.is-clipped--nav {
30-
overflow-y: hidden;
30+
/* overflow-y: hidden; */
3131
}
3232

3333
.nav-panel-menu {
34-
overflow-y: visible;
34+
overflow-y: auto;
3535
height: var(--nav-panel-menu-height);
3636
}
3737

@@ -170,14 +170,16 @@ html.is-clipped--nav {
170170
}
171171

172172
.nav-panel-menu .context {
173-
padding: 1rem;
173+
padding: 0.8rem 1rem;
174174
}
175175

176176
.nav-panel-menu .context .title {
177177
font-weight: bold;
178-
display: inline-block;
178+
display: block;
179179
height: 24px;
180180
line-height: 24px;
181+
padding-right: 30px;
182+
margin-bottom: 4px;
181183
}
182184

183185
button.browse-version {
@@ -190,6 +192,7 @@ button.browse-version {
190192
width: 36px;
191193
margin-left: calc(var(--nav-line-height) * -1em);
192194
right: 12px;
195+
top: 15px;
193196
}
194197

195198
button.browse-version svg {
@@ -205,19 +208,18 @@ html.dark-theme button.browse-version:hover {
205208
}
206209

207210
.nav-panel-menu .context .version {
211+
display: inline-block;
208212
background-color: #80ea6e;
209213
color: #111;
210214
align-items: center;
211215
border-radius: 4px;
212-
display: inline-block;
213216
font-size: 0.75rem;
214217
height: 24px;
215218
justify-content: center;
216219
line-height: 24px;
217220
padding-left: 0.75em;
218221
padding-right: 0.75em;
219222
white-space: nowrap;
220-
margin-left: 0.75rem !important;
221223
text-transform: uppercase;
222224
font-weight: 700;
223225
}
@@ -247,7 +249,7 @@ html.dark-theme button.browse-version:hover {
247249
margin-bottom: 0.5rem;
248250
}
249251

250-
.resize-handle--x {
252+
.nav-resize {
251253
position: absolute;
252254
top: 0;
253255
right: -2px;
@@ -258,12 +260,91 @@ html.dark-theme button.browse-version:hover {
258260
user-select: none;
259261
border-left: 1px solid var(--nav-panel-divider-color);
260262
}
261-
.resize-handle--x:hover span {
262-
background-color: var(--panel-background-color);
263+
264+
.nav-collapse {
265+
background: var(--panel-background-color);
266+
height: 40px;
267+
margin-right: 2px;
268+
border-top: 1px solid var(--nav-panel-divider-color);
269+
position: relative;
263270
}
264271

265-
.resize-handle--x span {
266-
display: none;
272+
.nav-collapse button {
273+
border: none;
274+
outline: none;
275+
line-height: inherit;
276+
position: absolute;
277+
height: calc(var(--nav-line-height) * 1.5em);
278+
width: calc(var(--nav-line-height) * 1.5em);
279+
margin-top: 2px;
280+
margin-left: calc(var(--nav-line-height) * -1em);
281+
right: 8px;
282+
top: 2px;
283+
padding: 0;
284+
background-color: transparent;
285+
}
286+
287+
.nav-collapse button span {
288+
display: block;
289+
height: calc(var(--nav-line-height) * 1.5em);
290+
width: calc(var(--nav-line-height) * 1.5em);
291+
background: transparent url(../img/chevron.svg) no-repeat center / 50%;
292+
transform: rotate(90deg);
293+
}
294+
295+
@media screen and (min-width: 1024px) {
296+
body.nav-sm .nav-container {
297+
width: 60px;
298+
}
299+
300+
body.nav-sm .nav-collapse,
301+
body.nav-sm .nav-menu {
302+
margin-right: 0;
303+
padding-right: 0;
304+
}
305+
306+
body.nav-sm .DocSearch-Button svg {
307+
left: 20px;
308+
}
309+
310+
body.nav-sm .nav-collapse button span {
311+
transform: rotate(-90deg);
312+
}
313+
314+
body.nav-sm .nav-menu .search {
315+
margin-bottom: 0;
316+
}
317+
318+
body.nav-sm .nav-panel-menu .context {
319+
height: 50px;
320+
}
321+
322+
body.nav-sm .nav-panel-menu .context .title,
323+
body.nav-sm .nav-panel-menu .context .version,
324+
body.nav-sm .nav-resize,
325+
body.nav-sm .DocSearch-Button span {
326+
display: none;
327+
}
328+
329+
html.is-clipped--nav body.nav-sm .nav-menu > .nav-list {
330+
display: block;
331+
}
332+
body.nav-sm .nav-menu > .nav-list {
333+
display: none;
334+
position: absolute;
335+
top: 0;
336+
left: 61px;
337+
padding: 0.5rem 1rem;
338+
width: 300px;
339+
bottom: -40px;
340+
background: var(--body-background-color);
341+
border-right: 1px solid var(--nav-panel-divider-color);
342+
}
343+
344+
body.nav-sm .toggle-sm button.nav-toggle {
345+
display: block;
346+
margin-left: 10px;
347+
}
267348
}
268349

269350
@media screen and (min-width: 769px) {
@@ -284,10 +365,6 @@ html.dark-theme button.browse-version:hover {
284365
visibility: visible;
285366
}
286367

287-
.nav-panel-menu .context {
288-
display: flex;
289-
}
290-
291368
.nav-menu .search {
292369
display: block;
293370
}

‎src/css/vendor/search.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
border-right-width: 0;
1919
}
2020

21-
.DocSearch-Button span {
21+
.DocSearch-Button span.search-key {
2222
position: absolute;
2323
right: 20px;
2424
top: 0;

‎src/js/01-nav.js‎

Lines changed: 21 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@
55
var SECT_CLASS_RX = /^sect(\d)$/
66

77
var navContainer = document.querySelector('.nav-container')
8-
var navToggle = document.querySelector('.nav-toggle')
8+
var navToggle1 = document.querySelector('#nav-toggle-1')
9+
var navToggle2 = document.querySelector('#nav-toggle-2')
10+
var isNavOpen = window.localStorage && window.localStorage.getItem('sidebar') === 'open'
911

10-
navToggle.addEventListener('click', showNav)
12+
navToggle1.addEventListener('click', showNav)
13+
navToggle2.addEventListener('click', showNav)
1114
navContainer.addEventListener('click', trapEvent)
1215

1316
var menuPanel = navContainer.querySelector('[data-panel=menu]')
@@ -41,35 +44,15 @@
4144
})
4245
})
4346

44-
// function openVersion () {
45-
// if (!isOpen) {
46-
// menuPanel.querySelector('.context .version').classList.add('is-active')
47-
// document.querySelector('#nav-versions').classList.add('is-active')
48-
// isOpen = true
49-
// }
50-
// }
51-
52-
// function closeVersion () {
53-
// if (isOpen) {
54-
// menuPanel.querySelector('.context .version').classList.remove('is-active')
55-
// document.querySelector('#nav-versions').classList.remove('is-active')
56-
// isOpen = false
57-
// }
58-
// }
59-
60-
// menuPanel.querySelector('.context .version').addEventListener('mousemove', function () {
61-
// openVersion()
62-
// })
63-
64-
// document.querySelector('#nav-versions').addEventListener('mouseleave', function () {
65-
// closeVersion()
66-
// })
67-
68-
// // NOTE prevent text from being selected by double click
69-
// menuPanel.addEventListener('mousedown', function (e) {
70-
// if (e.detail > 1) e.preventDefault()
71-
// closeVersion()
72-
// })
47+
document.querySelector('#nav-collapse-toggle').addEventListener('click', function () {
48+
if (isNavOpen) {
49+
document.body.classList.add('nav-sm')
50+
} else {
51+
document.body.classList.remove('nav-sm')
52+
}
53+
window.localStorage && window.localStorage.setItem('sidebar', !isNavOpen ? 'open' : 'close')
54+
isNavOpen = !isNavOpen
55+
})
7356

7457
function onHashChange () {
7558
var navLink
@@ -137,11 +120,13 @@
137120
}
138121

139122
function showNav (e) {
140-
if (navToggle.classList.contains('is-active')) return hideNav(e)
123+
if (navToggle1.classList.contains('is-active')) return hideNav(e)
124+
if (navToggle2.classList.contains('is-active')) return hideNav(e)
141125
trapEvent(e)
142126
var html = document.documentElement
143127
html.classList.add('is-clipped--nav')
144-
navToggle.classList.add('is-active')
128+
navToggle1.classList.add('is-active')
129+
navToggle2.classList.add('is-active')
145130
navContainer.classList.add('is-active')
146131
var bounds = nav.getBoundingClientRect()
147132
var expectedHeight = window.innerHeight - Math.round(bounds.top)
@@ -153,7 +138,8 @@
153138
trapEvent(e)
154139
var html = document.documentElement
155140
html.classList.remove('is-clipped--nav')
156-
navToggle.classList.remove('is-active')
141+
navToggle1.classList.remove('is-active')
142+
navToggle2.classList.remove('is-active')
157143
navContainer.classList.remove('is-active')
158144
html.removeEventListener('click', hideNav)
159145
}
@@ -184,7 +170,7 @@
184170
document.documentElement.style.setProperty('--nav-width', `${width}px`)
185171
window.localStorage && window.localStorage.setItem('nav-width', `${width}`)
186172
}
187-
document.querySelector('.resize-handle--x').addEventListener('mousedown', (event) => {
173+
document.querySelector('.nav-resize').addEventListener('mousedown', (event) => {
188174
document.addEventListener('mousemove', resize, false)
189175
document.addEventListener('mouseup', () => {
190176
document.removeEventListener('mousemove', resize, false)

‎src/partials/nav-search.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<svg enable-background="new 0 0 32 32" id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
55
<path d="M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14 s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0 C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z" id="XMLID_223_"/>
66
</svg>
7-
Search
7+
<span>Search</span>
88
<span class="search-key"></span>
99
</button>
1010
</div>

‎src/partials/nav.hbs‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,22 @@
55
<nav class="nav-menu">
66
{{> nav-explore}}
77
{{> nav-menu}}
8+
<div class="toggle-sm">
9+
<button id="nav-toggle-2" class="nav-toggle"></button>
10+
</div>
811
</nav>
912
</div>
13+
<div class="nav-collapse">
14+
<button id="nav-collapse-toggle"><span></span></button>
15+
</div>
1016
</div>
11-
<div class="resize-handle--x"><span></span></div>
17+
<div class="nav-resize"></div>
1218
</aside>
13-
</div>
19+
</div>
20+
<script>
21+
!function (sidebar) {
22+
if (sidebar) {
23+
document.body.classList.add('nav-sm')
24+
}
25+
}(localStorage && localStorage.getItem('sidebar') === 'close')
26+
</script>

‎src/partials/toolbar.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="toolbar" role="navigation">
2-
{{> nav-toggle}}
2+
<button id="nav-toggle-1" class="nav-toggle"></button>
33
{{> nav-search}}
44
{{!-- {{#with site.homeUrl}}
55
<a href="{{{relativize this}}}" class="home-link{{#if @root.page.home}} is-current{{/if}}"></a>

0 commit comments

Comments
 (0)