Refactor navigation to floating left icon bar on desktop
- Replace horizontal top nav with vertical icon-only sidebar on desktop (lg+) - Add hover tooltips showing page labels - Active page highlighted with accent color background - Theme toggle integrated at bottom of nav bar - Mobile retains hamburger menu with full-screen overlay - Fix mobile menu script for Astro view transitions - Reduce hero/layout top padding since desktop nav no longer occupies header space - Add left padding to main content to accommodate fixed left nav Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
0b8a680dcb
commit
40df6db1de
@ -1,78 +1,99 @@
|
||||
---
|
||||
import ThemeToggle from './ThemeToggle.astro';
|
||||
|
||||
const currentPath = Astro.url.pathname;
|
||||
|
||||
// Navigation items
|
||||
const navItems = [
|
||||
{ href: '/', label: 'Home', icon: 'home' },
|
||||
{ href: '/dev', label: 'Dev', icon: 'code' },
|
||||
{ href: '/blog', label: 'Blog', icon: 'file' },
|
||||
{ href: '/hubert', label: 'Hubert', icon: 'chat' },
|
||||
{ href: '/contact', label: 'Contact', icon: 'mail' },
|
||||
];
|
||||
|
||||
// Check if a path is active
|
||||
function isActive(href: string): boolean {
|
||||
if (href === '/') {
|
||||
return currentPath === '/';
|
||||
}
|
||||
return currentPath.startsWith(href);
|
||||
}
|
||||
---
|
||||
|
||||
<nav class="fixed top-0 left-0 w-full z-50 px-6 lg:px-12 py-6 lg:py-8 flex justify-between items-center backdrop-blur-md bg-[var(--theme-overlay)] border-b border-[var(--theme-border-secondary)]">
|
||||
<!-- Left side - branding and theme toggle -->
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="/" class="text-[10px] font-mono text-[var(--theme-text-muted)] tracking-widest uppercase hover:text-brand-accent transition-colors duration-300">NV / 2026</a>
|
||||
<div class="hidden md:block">
|
||||
<!-- Desktop Navigation: Fixed left sidebar (lg: 1024px+) -->
|
||||
<nav class="hidden lg:flex fixed left-6 top-1/2 -translate-y-1/2 z-50 flex-col items-center gap-1 p-2 bg-[var(--theme-overlay)] backdrop-blur-md border border-[var(--theme-border-primary)] rounded-2xl">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
href={item.href}
|
||||
class:list={[
|
||||
"nav-icon relative group w-10 h-10 flex items-center justify-center rounded-xl transition-colors duration-200",
|
||||
isActive(item.href)
|
||||
? "bg-brand-accent/10 text-brand-accent"
|
||||
: "text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)] hover:bg-[var(--theme-hover-bg-strong)]"
|
||||
]}
|
||||
aria-label={item.label}
|
||||
data-icon={item.icon}
|
||||
>
|
||||
{/* Home icon */}
|
||||
{item.icon === 'home' && (
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||||
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||||
</svg>
|
||||
)}
|
||||
{/* Code icon */}
|
||||
{item.icon === 'code' && (
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="16 18 22 12 16 6"></polyline>
|
||||
<polyline points="8 6 2 12 8 18"></polyline>
|
||||
</svg>
|
||||
)}
|
||||
{/* File/Blog icon */}
|
||||
{item.icon === 'file' && (
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||
<polyline points="10 9 9 9 8 9"></polyline>
|
||||
</svg>
|
||||
)}
|
||||
{/* Chat icon */}
|
||||
{item.icon === 'chat' && (
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
)}
|
||||
{/* Mail icon */}
|
||||
{item.icon === 'mail' && (
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||||
<polyline points="22,6 12,13 2,6"></polyline>
|
||||
</svg>
|
||||
)}
|
||||
{/* Tooltip */}
|
||||
<span class="absolute left-full ml-3 px-3 py-1.5 bg-[var(--theme-bg-secondary)] border border-[var(--theme-border-primary)] rounded-lg text-xs font-medium whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-200 shadow-lg">
|
||||
{item.label}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Divider */}
|
||||
<div class="w-6 h-px bg-[var(--theme-border-primary)] my-2"></div>
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<div class="nav-theme-toggle w-10 h-10 flex items-center justify-center">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Right side navigation -->
|
||||
<div class="flex items-center gap-6 lg:gap-10 ml-auto">
|
||||
<div class="hidden md:flex items-center gap-10 lg:gap-12">
|
||||
<a href="/"
|
||||
class:list={[
|
||||
"relative text-xs font-semibold uppercase tracking-[0.15em] transition-all duration-300 py-2 group",
|
||||
Astro.url.pathname === '/' ? "text-[var(--theme-text-primary)]" : "text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)]"
|
||||
]}>
|
||||
<span class="relative z-10">Home</span>
|
||||
<span class:list={[
|
||||
"absolute bottom-0 left-0 h-[1px] bg-brand-accent transition-all duration-300 ease-out",
|
||||
Astro.url.pathname === '/' ? "w-full" : "w-0 group-hover:w-full"
|
||||
]}></span>
|
||||
</a>
|
||||
<a href="/dev"
|
||||
class:list={[
|
||||
"relative text-xs font-semibold uppercase tracking-[0.15em] transition-all duration-300 py-2 group",
|
||||
Astro.url.pathname.startsWith('/dev') ? "text-[var(--theme-text-primary)]" : "text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)]"
|
||||
]}>
|
||||
<span class="relative z-10">Dev</span>
|
||||
<span class:list={[
|
||||
"absolute bottom-0 left-0 h-[1px] bg-brand-accent transition-all duration-300 ease-out",
|
||||
Astro.url.pathname.startsWith('/dev') ? "w-full" : "w-0 group-hover:w-full"
|
||||
]}></span>
|
||||
</a>
|
||||
<a href="/blog"
|
||||
class:list={[
|
||||
"relative text-xs font-semibold uppercase tracking-[0.15em] transition-all duration-300 py-2 group",
|
||||
Astro.url.pathname.startsWith('/blog') ? "text-[var(--theme-text-primary)]" : "text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)]"
|
||||
]}>
|
||||
<span class="relative z-10">Blog</span>
|
||||
<span class:list={[
|
||||
"absolute bottom-0 left-0 h-[1px] bg-brand-accent transition-all duration-300 ease-out",
|
||||
Astro.url.pathname.startsWith('/blog') ? "w-full" : "w-0 group-hover:w-full"
|
||||
]}></span>
|
||||
</a>
|
||||
<a href="/hubert"
|
||||
class:list={[
|
||||
"relative text-xs font-semibold uppercase tracking-[0.15em] transition-all duration-300 py-2 group",
|
||||
Astro.url.pathname.startsWith('/hubert') ? "text-[var(--theme-text-primary)]" : "text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)]"
|
||||
]}>
|
||||
<span class="relative z-10">Hubert</span>
|
||||
<span class:list={[
|
||||
"absolute bottom-0 left-0 h-[1px] bg-brand-accent transition-all duration-300 ease-out",
|
||||
Astro.url.pathname.startsWith('/hubert') ? "w-full" : "w-0 group-hover:w-full"
|
||||
]}></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a href="/contact"
|
||||
class:list={[
|
||||
"hidden md:block border px-5 lg:px-6 py-2.5 lg:py-3 text-xs font-bold uppercase tracking-[0.15em] transition-all duration-300 rounded-full",
|
||||
Astro.url.pathname.startsWith('/contact')
|
||||
? "border-brand-accent bg-brand-accent text-brand-dark"
|
||||
: "border-[var(--theme-border-strong)] text-[var(--theme-text-primary)] hover:border-brand-accent hover:bg-brand-accent hover:text-brand-dark"
|
||||
]}>
|
||||
Let's Talk
|
||||
</a>
|
||||
</div>
|
||||
<!-- Mobile Navigation: Top bar with hamburger (< lg) -->
|
||||
<nav class="lg:hidden fixed top-0 left-0 w-full z-50 px-6 py-6 flex justify-between items-center backdrop-blur-md bg-[var(--theme-overlay)] border-b border-[var(--theme-border-secondary)]">
|
||||
<!-- Left side - branding -->
|
||||
<a href="/" class="text-[10px] font-mono text-[var(--theme-text-muted)] tracking-widest uppercase hover:text-brand-accent transition-colors duration-300">NV / 2026</a>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden flex items-center">
|
||||
<button
|
||||
id="mobile-menu-toggle"
|
||||
class="p-2 text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)] transition-colors z-[60]"
|
||||
@ -88,13 +109,12 @@ import ThemeToggle from './ThemeToggle.astro';
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu Overlay -->
|
||||
<div
|
||||
id="mobile-menu"
|
||||
class="fixed inset-0 z-40 bg-[var(--theme-overlay-heavy)] backdrop-blur-xl transform translate-x-full transition-transform duration-300 ease-out md:hidden"
|
||||
class="fixed inset-0 z-40 bg-[var(--theme-overlay-heavy)] backdrop-blur-xl transform translate-x-full transition-transform duration-300 ease-out lg:hidden"
|
||||
>
|
||||
<!-- Menu Content -->
|
||||
<div class="flex flex-col justify-center items-center h-full px-8">
|
||||
@ -155,7 +175,25 @@ import ThemeToggle from './ThemeToggle.astro';
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Custom styling for the nav theme toggle to make it more compact */
|
||||
.nav-theme-toggle :global(.theme-toggle-group) {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav-theme-toggle :global(.theme-toggle-group > div:first-child) {
|
||||
display: none; /* Hide the arrow icon in compact mode */
|
||||
}
|
||||
|
||||
.nav-theme-toggle :global(.theme-toggle-group > div:last-child) {
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function initMobileNav() {
|
||||
const toggle = document.getElementById('mobile-menu-toggle');
|
||||
const menu = document.getElementById('mobile-menu');
|
||||
const iconOpen = document.getElementById('menu-icon-open');
|
||||
@ -184,7 +222,12 @@ import ThemeToggle from './ThemeToggle.astro';
|
||||
}
|
||||
}
|
||||
|
||||
toggle?.addEventListener('click', toggleMenu);
|
||||
// Remove old listeners by cloning
|
||||
if (toggle) {
|
||||
const newToggle = toggle.cloneNode(true);
|
||||
toggle.parentNode?.replaceChild(newToggle, toggle);
|
||||
newToggle.addEventListener('click', toggleMenu);
|
||||
}
|
||||
|
||||
// Close menu when clicking a link
|
||||
mobileNavLinks.forEach(link => {
|
||||
@ -192,11 +235,26 @@ import ThemeToggle from './ThemeToggle.astro';
|
||||
if (isOpen) toggleMenu();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Close menu on escape key
|
||||
// Close menu on escape key (only add once)
|
||||
let escapeListenerAdded = false;
|
||||
function addEscapeListener() {
|
||||
if (escapeListenerAdded) return;
|
||||
escapeListenerAdded = true;
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
toggleMenu();
|
||||
if (e.key === 'Escape') {
|
||||
const menu = document.getElementById('mobile-menu');
|
||||
if (menu && !menu.classList.contains('translate-x-full')) {
|
||||
const toggle = document.getElementById('mobile-menu-toggle');
|
||||
toggle?.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize on load and view transitions
|
||||
initMobileNav();
|
||||
addEscapeListener();
|
||||
document.addEventListener('astro:page-load', initMobileNav);
|
||||
</script>
|
||||
|
||||
@ -54,8 +54,8 @@ const { headlineLine1, headlineLine2, portfolioYear, location, locationLabel, bi
|
||||
</div>
|
||||
|
||||
<!-- The Content -->
|
||||
<!-- Adjusted pt to clear fixed nav since BaseLayout padding is removed -->
|
||||
<div class="absolute inset-0 z-20 flex flex-col justify-between p-6 md:p-12 lg:p-16 pt-32 lg:pt-40 pointer-events-auto">
|
||||
<!-- Mobile: pt-24 clears mobile top bar. Desktop: pt-16 since nav is on left side -->
|
||||
<div class="absolute inset-0 z-20 flex flex-col justify-between p-6 md:p-12 lg:p-16 pt-24 lg:pt-16 pointer-events-auto">
|
||||
|
||||
<!-- Top Metadata -->
|
||||
<div class="flex justify-between items-start w-full intro-element opacity-0 translate-y-4 transition-all duration-1000 ease-out delay-300">
|
||||
|
||||
@ -118,7 +118,7 @@ const personSchema = {
|
||||
<GridOverlay />
|
||||
<Navigation />
|
||||
|
||||
<main class:list={["relative z-10 min-h-screen pb-24", { "pt-32 lg:pt-48": usePadding }]}>
|
||||
<main class:list={["relative z-10 min-h-screen pb-24 lg:pl-24", { "pt-32 lg:pt-12": usePadding }]}>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user