diff --git a/themes/shockrah.xyz/layouts/index.html b/themes/shockrah.xyz/layouts/index.html
index 772b406..1b7966b 100644
--- a/themes/shockrah.xyz/layouts/index.html
+++ b/themes/shockrah.xyz/layouts/index.html
@@ -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>
diff --git a/themes/shockrah.xyz/layouts/partials/footer.html b/themes/shockrah.xyz/layouts/partials/footer.html
index e69de29..6bd3bc9 100644
--- a/themes/shockrah.xyz/layouts/partials/footer.html
+++ b/themes/shockrah.xyz/layouts/partials/footer.html
@@ -0,0 +1,2 @@
+<script src="/js/sidemenu.js" defer></script>
+
diff --git a/themes/shockrah.xyz/layouts/partials/header.html b/themes/shockrah.xyz/layouts/partials/header.html
index 3deef9e..3c293e3 100644
--- a/themes/shockrah.xyz/layouts/partials/header.html
+++ b/themes/shockrah.xyz/layouts/partials/header.html
@@ -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">
diff --git a/themes/shockrah.xyz/static/js/sidemenu.js b/themes/shockrah.xyz/static/js/sidemenu.js
new file mode 100644
index 0000000..d53484d
--- /dev/null
+++ b/themes/shockrah.xyz/static/js/sidemenu.js
@@ -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));
+
