purplebored/purplebored.pl
1
0
Fork 1
Code Issues Pull Requests Actions Activity

Added a hamburger menu for the navbar
All checks were successful
Deploy / Deploy website via rsync over SSH (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Alek Nikovich
2025-11-10 23:19:04 +01:00
parent a44530c49c
commit 6470e8daa7
5 changed files with 86 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
assets/css/style.css
View File

@@ -132,6 +132,23 @@ body {
.tor-label { color: #6e2b9e; } .tor-label { color: #6e2b9e; }
.ygg-label { color: #92ffb3; } .ygg-label { color: #92ffb3; }
.mobile-nav-toggle {
display: none;
position: fixed;
top: 12px;
right: 12px;
z-index: 50;
background: rgba(60, 26, 77, 0.6);
color: #fff;
font-size: 1.8rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
padding: 4px 10px;
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.footer { .footer {
position: relative; position: relative;
width: 100%; width: 100%;
@@ -372,3 +389,50 @@ a:not(:has(img)):hover { text-decoration: underline; }
font-size: 0.7rem; font-size: 0.7rem;
} }
} }
.mobile-nav-toggle {
display: none;
position: fixed;
top: 12px;
right: 12px;
z-index: 50;
background: rgba(60, 26, 77, 0.6);
color: #fff;
font-size: 1.8rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
padding: 4px 10px;
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
@media (max-width: 900px) {
.mobile-nav-toggle {
display: block;
}
.navbar {
position: fixed;
right: -100%;
top: 0;
bottom: 0;
width: 200px;
padding-top: 3.5rem;
flex-direction: column;
height: 100vh;
transition: right 0.3s ease;
}
.navbar.open {
right: 0;
}
.navbar ul {
flex-direction: column;
gap: 0;
}
body {
padding-right: 0;
}
}

13
assets/js/script.js
View File

@@ -161,4 +161,15 @@ function base_main() {
} }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
base_main(); base_main();
}); });
document.addEventListener("DOMContentLoaded", () => {
const toggle = document.querySelector(".mobile-nav-toggle");
const navbar = document.querySelector(".navbar");
if (toggle && navbar) {
toggle.addEventListener("click", () => {
navbar.classList.toggle("open");
});
}
});

4
index.html
View File

@@ -83,6 +83,10 @@
</div> </div>
</div> </div>
<button class="mobile-nav-toggle" aria-label="Toggle menu">
☰
</button>
<nav class="navbar"> <nav class="navbar">
<div class="navbar-top-icons"> <div class="navbar-top-icons">

3
pages/contact.html
View File

@@ -13,6 +13,9 @@
</head> </head>
<body> <body>
<button class="mobile-nav-toggle" aria-label="Toggle menu">
☰
</button>
<nav class="navbar"> <nav class="navbar">
<div class="navbar-top-icons"> <div class="navbar-top-icons">
<div class="icon-item"> <div class="icon-item">

3
pages/projects.html
View File

@@ -20,6 +20,9 @@
</head> </head>
<body> <body>
<button class="mobile-nav-toggle" aria-label="Toggle menu">
☰
</button>
<nav class="navbar"> <nav class="navbar">
<div class="navbar-top-icons"> <div class="navbar-top-icons">
<div class="icon-item"> <div class="icon-item">