SHA
Small Heath Alliance
12:40, Wed 19 Nov
Hi Andy,
I've implemented my own fix on tampermonkey for being able to hide the navbar, but thought I'd share it with you incase you wanted to implement it. Essentially what it does is replaces the three dots on mobile with a hamburger menu in the page nav. This stays present on mobile and desktop and on desktop it hides the side navigation.
My changes do this:
Remove:
Added this before the forum in the page nav:
Wrap only the <main> content in a layout container:
Add a desktop-only class to the sidebar, replace:
with
Add desktop-only CSS for collapsing:
A bit of JS to convert offcanvas for desktop:
With a cookie to get the state of the sidebar:
I've implemented my own fix on tampermonkey for being able to hide the navbar, but thought I'd share it with you incase you wanted to implement it. Essentially what it does is replaces the three dots on mobile with a hamburger menu in the page nav. This stays present on mobile and desktop and on desktop it hides the side navigation.
My changes do this:
Remove:
<span class="text-white d-inline d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#menu">
<i class="bi bi-three-dots-vertical"></i>
</span>
Added this before the forum in the page nav:
<a id="menuToggle" class="btn btn-sm border bg-body text-body">
<i class="bi bi-list"></i>
</a>
Wrap only the <main> content in a layout container:
<body>
...
<div class="sha-layout d-flex vw-100">
<main class="sha-content flex-grow-1">
<!-- content -->
</main>
</div>
Add a desktop-only class to the sidebar, replace:
<nav id="menu" class="offcanvas-lg offcanvas-start bg-light-subtle border-end min-vh-lg-100">
with
<nav id="menu" class="offcanvas-lg offcanvas-start bg-light-subtle border-end min-vh-lg-100 sha-sidebar-desktop">
Add desktop-only CSS for collapsing:
.sha-layout { display:flex; transition: all .25s ease; }
.sha-sidebar-desktop {transform: none; }
@media (min-width: 992px) {
.sidebar-collapsed .sha-sidebar-desktop { width:0 !important; overflow:hidden; }
.sidebar-collapsed .sha-content { margin-left:0 !important; }
#menu { position:relative !important; transform:none !important; }
.sidebar-collapsed .sha-layout { margin-left:0; }
}
A bit of JS to convert offcanvas for desktop:
<script>
document.addEventListener("DOMContentLoaded", function() {
var menu = document.getElementById("menu");
var menuToggle = document.getElementById("menuToggle");
menuToggle.addEventListener("click", function () {
if (window.innerWidth < 992) {
var oc = bootstrap.Offcanvas.getOrCreateInstance(menu);
oc.show();
} else {
document.body.classList.toggle("sidebar-collapsed");
}
});
});
</script>
With a cookie to get the state of the sidebar:
<script>
document.addEventListener("DOMContentLoaded", function() {
var menu = document.getElementById("menu");
var menuToggle = document.getElementById("menuToggle");
var STORAGE_KEY = "shaSidebarCollapsed";
function applySavedState() {
try {
var saved = localStorage.getItem(STORAGE_KEY);
if (saved === null || saved === "true") {
document.body.classList.add("sidebar-collapsed");
} else {
document.body.classList.remove("sidebar-collapsed");
}
} catch (e) {
document.body.classList.add("sidebar-collapsed");
}
}
applySavedState();
function saveState() {
var isCollapsed = document.body.classList.contains("sidebar-collapsed");
try {
localStorage.setItem(STORAGE_KEY, isCollapsed ? "true" : "false");
} catch (e) {
document.cookie = STORAGE_KEY + "=" + (isCollapsed ? "true" : "false") +
";path=/;max-age=31536000";
}
}
menuToggle.addEventListener("click", function () {
if (window.innerWidth < 992) {
var oc = bootstrap.Offcanvas.getOrCreateInstance(menu);
oc.show();
} else {
document.body.classList.toggle("sidebar-collapsed");
saveState();
}
});
});
</script>