Skip to content

Commit 0350d8b

Browse files
ritorhymesritorhymes
committed
rework mobile nav to Bootstrap structure aligned with Docsy
Reworks the mobile header/navigation to use Bootstrap collapse-driven structure and behavior in a Docsy-aligned implementation. Replaces the legacy pushmenu flow with a right-side mobile drawer pattern built on Bootstrap primitives and existing site navigation data. Preserves desktop navbar behavior while keeping the mobile UI visually near-identical to the pre-refactored version. Centers the mobile logo in the header, fixing the offset left quirk. Updates versions/languages mobile accordion behavior so both sections are no longer stuck in an always-open state. The versions section is closed by default since it is not universally essential to see immediately. Languages stays open by default to let users quickly navigate to their needed language. Localizes mobile navigation ARIA labels for toggle/close controls to improve accessibility and translation support. Signed-off-by: Rito Rhymes <rito@ritovision.com>
1 parent d7e1ffb commit 0350d8b

File tree

7 files changed

+374
-256
lines changed

7 files changed

+374
-256
lines changed

‎assets/js/legacy-script.js‎

Lines changed: 2 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -144,26 +144,13 @@ var kub = (function () {
144144
}
145145

146146
function toggleMenu() {
147-
if (window.innerWidth < 800) {
148-
pushmenu.show('primary');
149-
}
150-
151-
else {
152-
var newHeight = HEADER_HEIGHT;
153-
154-
if (!html.hasClass('open-nav')) {
155-
newHeight = mainNav.outerHeight();
156-
}
157-
158-
header.css({height: px(newHeight)});
159-
html.toggleClass('open-nav');
160-
}
147+
$('#main_navbar').collapse('toggle');
161148
}
162149

163150
function handleKeystrokes(e) {
164151
switch (e.which) {
165152
case 27: {
166-
if (html.hasClass('open-nav')) {
153+
if ($('#main_navbar').hasClass('show')) {
167154
toggleMenu();
168155
}
169156
break;
@@ -365,109 +352,6 @@ var kub = (function () {
365352
})();
366353

367354

368-
var pushmenu = (function(){
369-
var allPushMenus = {};
370-
371-
$(document).ready(function(){
372-
$('[data-auto-burger]').each(function(){
373-
var container = this;
374-
var id = container.getAttribute('data-auto-burger');
375-
376-
var autoBurger = document.getElementById(id) || newDOMElement('div', 'pi-pushmenu', id);
377-
var ul = autoBurger.querySelector('ul') || newDOMElement('ul');
378-
379-
$(container).find('a[href], button').each(function () {
380-
if (!booleanAttributeValue(this, 'data-auto-burger-exclude', false)) {
381-
var clone = this.cloneNode(true);
382-
clone.id = '';
383-
384-
if (clone.tagName == "BUTTON") {
385-
var aTag = newDOMElement('a');
386-
aTag.href = '';
387-
aTag.innerHTML = clone.innerHTML;
388-
aTag.onclick = clone.onclick;
389-
clone = aTag;
390-
}
391-
var li = newDOMElement('li');
392-
li.appendChild(clone);
393-
ul.appendChild(li);
394-
}
395-
});
396-
397-
autoBurger.appendChild(ul);
398-
body.append(autoBurger);
399-
});
400-
401-
$(".pi-pushmenu").each(function(){
402-
allPushMenus[this.id] = PushMenu(this);
403-
});
404-
});
405-
406-
function show(objId) {
407-
allPushMenus[objId].expose();
408-
}
409-
410-
function PushMenu(el) {
411-
var html = document.querySelector('html');
412-
413-
var overlay = newDOMElement('div', 'overlay');
414-
var content = newDOMElement('div', 'content');
415-
content.appendChild(el.querySelector('*'));
416-
417-
var side = el.getAttribute("data-side") || "right";
418-
419-
var sled = newDOMElement('div', 'sled');
420-
$(sled).css(side, 0);
421-
422-
sled.appendChild(content);
423-
424-
var closeButton = newDOMElement('button', 'btn fa fa-times');
425-
closeButton.onclick = closeMe;
426-
427-
sled.appendChild(closeButton);
428-
429-
overlay.appendChild(sled);
430-
el.innerHTML = '';
431-
el.appendChild(overlay);
432-
433-
sled.onclick = function(e){
434-
e.stopPropagation();
435-
};
436-
437-
overlay.onclick = closeMe;
438-
439-
window.addEventListener('resize', closeMe);
440-
441-
function closeMe(e) {
442-
if (e.target == sled) return;
443-
444-
$(el).removeClass('on');
445-
setTimeout(function(){
446-
$(el).css({display: 'none'});
447-
}, 300);
448-
}
449-
450-
function exposeMe(){
451-
$(el).css({
452-
display: 'block',
453-
zIndex: highestZ()
454-
});
455-
456-
setTimeout(function(){
457-
$(el).addClass('on');
458-
}, 10);
459-
}
460-
461-
return {
462-
expose: exposeMe
463-
};
464-
}
465-
466-
return {
467-
show: show
468-
};
469-
})();
470-
471355
$(function() {
472356
// If vendor strip doesn't exist add className
473357
if ( !$('#vendorStrip').length > 0 ) {

‎assets/js/nav.js‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
$(document).ready(async function () {
22
await switchLogoOnResize();
33
flipNavColor()
4+
initMobileDrawer();
45

56
window.addEventListener('resize', switchLogoOnResize);
67
window.addEventListener('scroll', flipNavColor);
8+
window.addEventListener('resize', collapseDrawerOnDesktop);
79

810
document.onunload = function () {
911
window.removeEventListener('resize', switchLogoOnResize);
1012
window.removeEventListener('scroll', flipNavColor);
13+
window.removeEventListener('resize', collapseDrawerOnDesktop);
14+
$("#main_navbar").off('show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse');
15+
$('body').removeClass('td-navbar-drawer-opening td-navbar-drawer-open td-navbar-drawer-closing');
1116
};
1217
});
1318

@@ -19,7 +24,7 @@ async function switchLogoOnResize() {
1924
// No-op if the navbar logo is disabled via hugo params
2025
{{- if ne .ui.navbar_logo false }}
2126
const logoSpan = $("nav .navbar-brand__logo");
22-
const breakpointMd = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md').trim());
27+
const breakpointMd = getBreakpointMd();
2328
let svg
2429

2530
if (window.innerWidth < breakpointMd) {
@@ -44,6 +49,67 @@ async function switchLogoOnResize() {
4449
{{ end -}}
4550
}
4651

52+
function initMobileDrawer() {
53+
const drawer = $("#main_navbar");
54+
if (!drawer.length) {
55+
return;
56+
}
57+
58+
drawer.on('show.bs.collapse', function (event) {
59+
if (event.target !== this) {
60+
return;
61+
}
62+
63+
$('body')
64+
.removeClass('td-navbar-drawer-closing')
65+
.addClass('td-navbar-drawer-opening td-navbar-drawer-open');
66+
});
67+
68+
drawer.on('shown.bs.collapse', function (event) {
69+
if (event.target !== this) {
70+
return;
71+
}
72+
73+
$('body')
74+
.removeClass('td-navbar-drawer-opening td-navbar-drawer-closing')
75+
.addClass('td-navbar-drawer-open');
76+
});
77+
78+
drawer.on('hide.bs.collapse', function (event) {
79+
if (event.target !== this) {
80+
return;
81+
}
82+
83+
$('body')
84+
.removeClass('td-navbar-drawer-opening td-navbar-drawer-open')
85+
.addClass('td-navbar-drawer-closing');
86+
});
87+
88+
drawer.on('hidden.bs.collapse', function (event) {
89+
if (event.target !== this) {
90+
return;
91+
}
92+
93+
$('body').removeClass('td-navbar-drawer-opening td-navbar-drawer-open td-navbar-drawer-closing');
94+
});
95+
}
96+
97+
function collapseDrawerOnDesktop() {
98+
const drawer = $("#main_navbar");
99+
if (!drawer.length) {
100+
return;
101+
}
102+
103+
if (window.innerWidth >= getBreakpointMd() && drawer.hasClass('show')) {
104+
drawer.collapse('hide');
105+
}
106+
}
107+
108+
function getBreakpointMd() {
109+
const breakpointMd = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md').trim(), 10);
110+
return Number.isNaN(breakpointMd) ? 768 : breakpointMd;
111+
}
112+
47113
// Copied over from Docsy's assets/js/base.js
48114
function flipNavColor() {
49115
const threshold = Math.ceil($('.js-navbar-scroll').outerHeight());

‎assets/scss/_custom.scss‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -308,32 +308,6 @@ footer .row > .order-2 { flex: 0 0 66.6667%; max-width: 66.6667%; }
308308
footer .row > .order-3 { flex: 0 0 16.6667%; max-width: 16.6667%; }
309309
}
310310

311-
/* SIDE-DRAWER MENU */
312-
313-
.pi-pushmenu .sled {
314-
.content ul {
315-
padding: 0;
316-
317-
li {
318-
&:first-child {
319-
display: none;
320-
}
321-
322-
a.nav-link {
323-
padding: 0;
324-
}
325-
}
326-
}
327-
.push-menu-close-button {
328-
background: transparent;
329-
border: none;
330-
331-
&:focus {
332-
outline: none;
333-
}
334-
}
335-
}
336-
337311
// Home page dark-mode
338312
@media (prefers-color-scheme: dark) {
339313
body.cid-home {

0 commit comments

Comments
 (0)