lab/website-components
1
Fork 0
Code Activity

Add modal variant of mobile navbar

Browse source
This commit is contained in:
Jake Howard 2024-06-28 17:16:46 +01:00
parent 3bc0364a1c
commit 42945b97c0
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 152 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/navbar-modal/index.html Normal file
View file

@ -0,0 +1,33 @@
<html>
<head>
<link rel="stylesheet" href="./index.scss" />
</head>
<body>
<header class="header">
<!-- Logo -->
<a href="#" class="logo">Logo</a>
<!-- Hamburger icon -->
<button class="side-menu">V</button>
<!-- Menu -->
<nav class="nav">
<button class="nav-close">X</button>
<ul class="menu">
<li><a href="#">Gallery</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="icons">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</nav>
</header>
<script src="index.js"></script>
</body>
</html>

9
src/navbar-modal/index.js Normal file
View file

@ -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();
});
});

110
src/navbar-modal/index.scss Normal file
View file

@ -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;
}
}