96 lines
3.6 KiB
PHP
96 lines
3.6 KiB
PHP
<!-- ===== NAV ===== -->
|
||
<nav id="main-nav">
|
||
<div class="logo">
|
||
<a href="index.php" class="logo-link">CG</a><a href="admin/login.php" class="logo-dot-link">.</a>
|
||
</div>
|
||
|
||
<div class="nav-links" id="nav-links" role="navigation">
|
||
<button class="nav-close-btn" id="nav-close-btn" aria-label="Close menu">×</button>
|
||
<a href="index.php#about" class="nav-item">About</a>
|
||
<a href="index.php#projects" class="nav-item">Work</a>
|
||
<a href="index.php#certificates" class="nav-item">Certs</a>
|
||
<a href="blog.php" class="nav-item">Blog</a>
|
||
<a href="index.php#contact" class="nav-item">Contact</a>
|
||
<label for="dark-mode-toggle" class="mode-btn mode-btn-panel" title="Toggle Theme" aria-label="Toggle dark/light mode">
|
||
<span class="icon-moon">🌙</span>
|
||
<span class="icon-sun">☀️</span>
|
||
</label>
|
||
</div>
|
||
|
||
<label for="dark-mode-toggle" class="mode-btn mode-btn-nav" title="Toggle Theme" aria-label="Toggle dark/light mode">
|
||
<span class="icon-moon">🌙</span>
|
||
<span class="icon-sun">☀️</span>
|
||
</label>
|
||
|
||
<div class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false" role="button" tabindex="0">
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Nav overlay backdrop -->
|
||
<div class="nav-overlay" id="nav-overlay"></div>
|
||
|
||
<!-- Shared Navigation Script -->
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
// 1. Persistent Dark Mode Toggle
|
||
const themeToggle = document.getElementById("dark-mode-toggle");
|
||
if (themeToggle) {
|
||
themeToggle.checked = localStorage.getItem("theme") !== "light";
|
||
themeToggle.addEventListener("change", () => {
|
||
localStorage.setItem("theme", themeToggle.checked ? "dark" : "light");
|
||
});
|
||
}
|
||
|
||
// 2. Mobile Hamburger Menu
|
||
const hamburger = document.getElementById("hamburger");
|
||
const navLinks = document.getElementById("nav-links");
|
||
const navCloseBtn = document.getElementById("nav-close-btn");
|
||
const navOverlay = document.getElementById("nav-overlay");
|
||
const navItems = document.querySelectorAll(".nav-item");
|
||
|
||
if (hamburger && navLinks) {
|
||
function openMenu() {
|
||
hamburger.classList.add("active");
|
||
navLinks.classList.add("active");
|
||
if (navOverlay) navOverlay.classList.add("active");
|
||
hamburger.setAttribute("aria-expanded", "true");
|
||
document.body.style.overflow = "hidden";
|
||
}
|
||
|
||
function closeMenu() {
|
||
hamburger.classList.remove("active");
|
||
navLinks.classList.remove("active");
|
||
if (navOverlay) navOverlay.classList.remove("active");
|
||
hamburger.setAttribute("aria-expanded", "false");
|
||
document.body.style.overflow = "";
|
||
}
|
||
|
||
hamburger.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
if (hamburger.classList.contains("active")) {
|
||
closeMenu();
|
||
} else {
|
||
openMenu();
|
||
}
|
||
});
|
||
|
||
// Close via X button
|
||
if (navCloseBtn) navCloseBtn.addEventListener("click", closeMenu);
|
||
|
||
// Close via overlay click
|
||
if (navOverlay) navOverlay.addEventListener("click", closeMenu);
|
||
|
||
// Close on nav link click
|
||
navItems.forEach(item => item.addEventListener("click", closeMenu));
|
||
|
||
// Close on scroll
|
||
window.addEventListener("scroll", () => {
|
||
if (navLinks.classList.contains("active")) closeMenu();
|
||
});
|
||
}
|
||
});
|
||
</script>
|