From 4187790a4b7203a0954fb7a42195e3c67de43c70 Mon Sep 17 00:00:00 2001 From: Patrick Schwarzer Date: Mon, 12 May 2025 19:04:58 +0200 Subject: [PATCH] mobile navbar --- index.css | 124 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 25 +++++++++++ script.js | 15 ++++++- 3 files changed, 163 insertions(+), 1 deletion(-) diff --git a/index.css b/index.css index bff1325..6dcc798 100644 --- a/index.css +++ b/index.css @@ -425,3 +425,127 @@ body.light-mode .contact-container h1 { footer a { transition: background-color 0.3s ease, transform 0.15s ease; } + + +/* Mobile Compat */ +.mobile-nav, .mobile-nav-toggle { + display: none; +} + +@media (max-width: 768px) { + nav ul { + display: none; + } + .dark-mode-toggle { + display: none; + } + header { + z-index: 100; + } + + .mobile-nav-toggle { + display: block; + margin-left: auto; + width: 48px; + height: 48px; + align-items: center; + justify-content: center; + font-size: 24px; + color: white; + + background: none; + border: none; + } + body.light-mode .mobile-nav-toggle { + color: rgb(28, 33, 37); + } + + + .mobile-nav { + display: block; + position: fixed; + right: -18rem; + width: 18rem; + height: 100vh; + background-color: rgb(34, 40, 44); + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); + z-index: 50; + } + body.light-mode .mobile-nav { + background-color: #ffffff; + } + .mobile-nav.active { + right: 0; + } + + .mobile-nav ul { + width: 100%; + margin-top: 2.5rem; + list-style: none; + display: flex; + flex-direction: column; + } + .mobile-nav li { + margin-left: 2rem; + } + + .mobile-nav .links { + margin-left: auto; + margin-right: auto; + margin-top: 1.5rem; + } + .mobile-nav .links a { + display: inline-flex; + align-items: center; + justify-content: center; + + width: 48px; + height: 48px; + + background-color: rgb(44, 49, 54); + color: white; + font-size: 20px; + border: none; + border-radius: 50%; + text-decoration: none; + + transition: color 0s; + transition: transform 0.15s ease; + } + .mobile-nav .links a:hover { + background-color: #5865f2; + transform: translateY(-3px); + } + body.light-mode .mobile-nav .links a { + background-color: #f7f7f7; + color: rgb(29, 29, 29); + } + body.light-mode .mobile-nav .links a:hover { + color: white; + background-color: #5865f2; + } + + .dark-mode-toggle-mobile { + width: 48px; + height: 48px; + align-items: center; + justify-content: center; + + background-color: rgb(40, 45, 48); + color: white; + font-size: 24px; + border: none; + border-radius: 50%; + } + .dark-mode-toggle-mobile:hover { + background-color: rgb(28, 33, 37); + } + + body.light-mode .dark-mode-toggle-mobile { + color: #242424; + background-color: #f7f7f7; + } + body.light-mode .dark-mode-toggle-mobile:hover { + background-color: #e0e0e0; + } +} \ No newline at end of file diff --git a/index.html b/index.html index d9cdd53..aef0713 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Tarions Portfolio @@ -30,8 +31,32 @@ + + + +
diff --git a/script.js b/script.js index 6db1174..f132291 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,7 @@ document.addEventListener("DOMContentLoaded", () => { const darkModeButton = document.getElementById("dark-mode-toggle"); + const mobileDarkModeButton = document.getElementById("dark-mode-toggle-mobile"); const body = document.body; function toggleDarkMode(save){ @@ -21,7 +22,11 @@ document.addEventListener("DOMContentLoaded", () => { darkModeButton.addEventListener("click", () => { toggleDarkMode(true); - }) + }) + + mobileDarkModeButton.addEventListener("click", () => { + toggleDarkMode(true); + }) // Add/remove scrolled style to header window.addEventListener("scroll", () => { @@ -33,4 +38,12 @@ document.addEventListener("DOMContentLoaded", () => { header.classList.add("scrolled"); } }) + + // Mobile Nav + const mobileNavButton = document.getElementById("mobile-nav-toggle"); + const mobileNav = document.getElementById("mobile-nav"); + + mobileNavButton.addEventListener("click", () => { + mobileNav.classList.toggle("active"); + }) })