diff --git a/assets/css/style.css b/assets/css/style.css index 81eea88..c05bd7c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -132,6 +132,23 @@ body { .tor-label { color: #6e2b9e; } .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 { position: relative; width: 100%; @@ -372,3 +389,50 @@ a:not(:has(img)):hover { text-decoration: underline; } 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; + } +} \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 01bdccb..3f41bc2 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -161,4 +161,15 @@ function base_main() { } document.addEventListener("DOMContentLoaded", () => { base_main(); -}); \ No newline at end of file +}); + +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"); + }); + } +}); diff --git a/index.html b/index.html index ee21864..7c8fd6b 100644 --- a/index.html +++ b/index.html @@ -83,6 +83,10 @@ + +