lab/website-components
1
Fork 0
Code Activity

Fix navbar on very small screens

Browse source
This commit is contained in:
Jake Howard 2024-07-14 17:45:43 +01:00
parent 42945b97c0
commit 69e5b93d2e
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/navbar-modal/index.html
View file

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="./index.scss" /> <link rel="stylesheet" href="./index.scss" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> </head>
<body> <body>
<header class="header"> <header class="header">
@ -28,6 +29,6 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<script src="index.js"></script> <script src="index.js" type="module"></script>
</body> </body>
</html> </html>

4
src/navbar-modal/index.js
View file

@ -1,9 +1,9 @@
window.addEventListener("load", function() { window.addEventListener("load", function () {
const NAVBAR_BUTTON = document.querySelector("button.side-menu"); const NAVBAR_BUTTON = document.querySelector("button.side-menu");
// HACK: Work around window resizing whilst the modal is open animating its size, // HACK: Work around window resizing whilst the modal is open animating its size,
// by closing the modal whenever the window is resized // by closing the modal whenever the window is resized
window.addEventListener("resize", function() { window.addEventListener("resize", function () {
NAVBAR_BUTTON.blur(); NAVBAR_BUTTON.blur();
}); });
}); });

20
src/navbar-modal/index.scss
View file

@ -18,7 +18,8 @@ header {
padding: 0; padding: 0;
} }
.menu, .icons { .menu,
.icons {
list-style: none; list-style: none;
display: inline-flex; display: inline-flex;
margin: 0; margin: 0;
@ -51,12 +52,13 @@ header {
height: 100vh; height: 100vh;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition-duration: 0.25s; transition-duration: 0.2s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
overflow: hidden; overflow: scroll;
flex-direction: column; flex-direction: column;
.menu, .icons { .menu,
.icons {
display: initial; display: initial;
text-align: center; text-align: center;
@ -81,7 +83,7 @@ header {
} }
.nav-close { .nav-close {
position: absolute; position: fixed;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
color: white; color: white;
@ -108,3 +110,11 @@ header {
flex-wrap: wrap; 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;
}
}