From 69e5b93d2e436ff272609c549d4245e4fca4950b Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Sun, 14 Jul 2024 17:45:43 +0100 Subject: [PATCH] Fix navbar on very small screens --- src/navbar-modal/index.html | 3 ++- src/navbar-modal/index.js | 4 ++-- src/navbar-modal/index.scss | 20 +++++++++++++++----- 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/navbar-modal/index.html b/src/navbar-modal/index.html index ba65cad..d96298a 100644 --- a/src/navbar-modal/index.html +++ b/src/navbar-modal/index.html @@ -1,6 +1,7 @@ +
@@ -28,6 +29,6 @@
- + diff --git a/src/navbar-modal/index.js b/src/navbar-modal/index.js index 3cd89ed..90079b5 100644 --- a/src/navbar-modal/index.js +++ b/src/navbar-modal/index.js @@ -1,9 +1,9 @@ -window.addEventListener("load", function() { +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() { + window.addEventListener("resize", function () { NAVBAR_BUTTON.blur(); }); }); diff --git a/src/navbar-modal/index.scss b/src/navbar-modal/index.scss index 35dc83c..c799899 100644 --- a/src/navbar-modal/index.scss +++ b/src/navbar-modal/index.scss @@ -18,7 +18,8 @@ header { padding: 0; } - .menu, .icons { + .menu, + .icons { list-style: none; display: inline-flex; margin: 0; @@ -51,12 +52,13 @@ header { height: 100vh; visibility: visible; opacity: 1; - transition-duration: 0.25s; + transition-duration: 0.2s; transition-timing-function: ease-in-out; - overflow: hidden; + overflow: scroll; flex-direction: column; - .menu, .icons { + .menu, + .icons { display: initial; text-align: center; @@ -81,7 +83,7 @@ header { } .nav-close { - position: absolute; + position: fixed; top: 1rem; right: 1rem; color: white; @@ -108,3 +110,11 @@ header { flex-wrap: wrap; } } + +@media (max-height: 500px) { + /* If the window is small enough, items are pushed out the viewport, as it's positioned + in the middle of the screen. This fixes it to the top so it can scroll properly. */ + nav { + justify-content: unset; + } +}