shockrah/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+! New sidebar button for mobile

Browse Source
This commit is contained in:
shockrah 2022-03-09 01:14:59 -08:00
parent f97b8c0a17
commit 2a45dc6ae4
4 changed files with 64 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
themes/shockrah.xyz/layouts/index.html
View File

@ -2,8 +2,8 @@
<html lang="en">
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<div id="layout">
{{- partial "header.html" . -}}
<div id="main">
<div class="content">
<h1>Welcome to my not-a-blog</h1>
@ -19,5 +19,6 @@
</div>
</div>
</div>
{{- partial "footer.html" . -}}
</body>
</html>

2
themes/shockrah.xyz/layouts/partials/footer.html
View File

@ -0,0 +1,2 @@
<script src="/js/sidemenu.js" defer></script>

5
themes/shockrah.xyz/layouts/partials/header.html
View File

@ -1,3 +1,8 @@
<!-- Menu toggler thingy -->
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<div id="menu">
<a class="pure-menu-heading" href="/">Home</a>
<div class="pure-menu">

55
themes/shockrah.xyz/static/js/sidemenu.js Normal file
View File

@ -0,0 +1,55 @@
(function (window, document) {
// we fetch the elements each time because docusaurus removes the previous
// element references on page navigation
function getElements() {
return {
layout: document.getElementById('layout'),
menu: document.getElementById('menu'),
menuLink: document.getElementById('menuLink')
};
}
function toggleClass(element, className) {
var classes = element.className.split(/\s+/);
var length = classes.length;
var i = 0;
for (; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
function toggleAll() {
var active = 'active';
var elements = getElements();
toggleClass(elements.layout, active);
toggleClass(elements.menu, active);
toggleClass(elements.menuLink, active);
}
function handleEvent(e) {
var elements = getElements();
if (e.target.id === elements.menuLink.id) {
toggleAll();
e.preventDefault();
} else if (elements.menu.className.indexOf('active') !== -1) {
toggleAll();
}
}
document.addEventListener('click', handleEvent);
}(this, this.document));