diff --git a/src/navbar-modal/index.html b/src/navbar-modal/index.html
new file mode 100644
index 0000000..ba65cad
--- /dev/null
+++ b/src/navbar-modal/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/navbar-modal/index.js b/src/navbar-modal/index.js
new file mode 100644
index 0000000..3cd89ed
--- /dev/null
+++ b/src/navbar-modal/index.js
@@ -0,0 +1,9 @@
+window.addEventListener("load", function() {
+ const NAVBAR_BUTTON = document.querySelector("button.side-menu");
+
+ // HACK: Work around window resizing whilst the modal is open animating its size,
+ // by closing the modal whenever the window is resized
+ window.addEventListener("resize", function() {
+ NAVBAR_BUTTON.blur();
+ });
+});
diff --git a/src/navbar-modal/index.scss b/src/navbar-modal/index.scss
new file mode 100644
index 0000000..35dc83c
--- /dev/null
+++ b/src/navbar-modal/index.scss
@@ -0,0 +1,110 @@
+@import "normalize.css";
+
+body,
+html {
+ height: 100%;
+}
+
+header {
+ display: flex;
+ align-items: center;
+ background-color: red;
+ padding: 1rem;
+
+ .side-menu,
+ .nav-close {
+ display: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ .menu, .icons {
+ list-style: none;
+ display: inline-flex;
+ margin: 0;
+ padding: 0;
+
+ li {
+ padding-left: 1rem;
+ }
+ }
+
+ nav {
+ width: 100%;
+ display: flex;
+ }
+
+ .icons {
+ margin-left: auto;
+ }
+}
+
+@media (max-width: 600px) {
+ nav {
+ position: absolute;
+ top: 0;
+ right: 0;
+ align-items: center;
+ justify-content: center;
+ background-color: transparentize(black, 0.2);
+ width: 100vw;
+ height: 100vh;
+ visibility: visible;
+ opacity: 1;
+ transition-duration: 0.25s;
+ transition-timing-function: ease-in-out;
+ overflow: hidden;
+ flex-direction: column;
+
+ .menu, .icons {
+ display: initial;
+ text-align: center;
+
+ a {
+ color: white;
+ }
+ }
+
+ .menu li {
+ font-size: 2rem;
+ padding: 1rem;
+ }
+
+ .icons {
+ display: inline-flex;
+ margin-left: 0;
+ margin-top: 1rem;
+
+ li {
+ padding: 0.5rem;
+ }
+ }
+
+ .nav-close {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ color: white;
+ }
+ }
+
+ .side-menu:not(:focus) ~ nav {
+ opacity: 0;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+ }
+
+ .nav-close,
+ .side-menu {
+ display: initial !important;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ header {
+ justify-content: space-between;
+ flex-wrap: wrap;
+ }
+}