Nicholai/nicholai-work-2026
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(nav): redesign mobile nav to match desktop

Browse Source 
remove mobile header bar and replace with floating hamburger.
restyle mobile nav links with icons, active states, compact spacing.
integrate theme toggle into nav flow, remove redundant cta button.

- replace full-width header with floating top-right hamburger
- add icons to mobile nav links (matching desktop)
- reduce text size (text-3xl -> text-base) and spacing (gap-8 -> gap-3)
- implement active state indicators using isActive()
- add hover states with proper theme variables
- move theme toggle from decorative area into main nav with divider
- remove "let's talk" cta button (redundant with contact link)
This commit is contained in:
Nicholai Vogel 2026-01-20 08:03:18 -07:00
parent 4c8a6c2e0c
commit c688207865
2 changed files with 74 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/ecosystem-manifest.json
View File

@ -1,5 +1,5 @@
{
"generatedAt": "2026-01-20T13:58:29.727Z",
"generatedAt": "2026-01-20T14:58:35.282Z",
"totalFiles": 143,
"totalSize": 3237922,
"days": [

147
src/components/Navigation.astro
View File

@ -88,28 +88,22 @@ function isActive(href: string): boolean {
</div>
</nav>
<!-- 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 -->
<button
id="mobile-menu-toggle"
class="p-2 text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)] transition-colors z-[60]"
aria-label="Toggle menu"
aria-expanded="false"
>
<!-- Hamburger icon -->
<svg id="menu-icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<!-- Close icon (hidden by default) -->
<svg id="menu-icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</nav>
<!-- Mobile Navigation: Floating hamburger button (< lg) -->
<button
id="mobile-menu-toggle"
class="lg:hidden fixed top-6 right-6 z-50 p-3 bg-[var(--theme-overlay)] backdrop-blur-md border border-[var(--theme-border-primary)] rounded-xl text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)] transition-all duration-200 shadow-sm"
aria-label="Toggle menu"
aria-expanded="false"
>
<!-- Hamburger icon -->
<svg id="menu-icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<!-- Close icon (hidden by default) -->
<svg id="menu-icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<!-- Mobile Menu Overlay -->
<div
@ -118,62 +112,67 @@ function isActive(href: string): boolean {
>
<!-- Menu Content -->
<div class="flex flex-col justify-center items-center h-full px-8">
<!-- Navigation Links -->
<nav class="flex flex-col items-center gap-8 mb-12">
<a
href="/"
class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
>
Home
</a>
<a
href="/dev"
class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
>
Dev
</a>
<a
href="/blog"
class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
>
Blog
</a>
<!-- temporarily disabled
<a
href="/hubert"
class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
>
Hubert
</a>
-->
<a
href="/contact"
class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
>
Contact
</a>
</nav>
<nav class="flex flex-col items-center gap-3 w-full max-w-xs">
{navItems.map((item) => (
<a
href={item.href}
class:list={[
"mobile-nav-link flex flex-col items-center gap-2 px-6 py-3 rounded-xl transition-all duration-200 w-full",
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)]"
]}
>
{/* Home icon */}
{item.icon === 'home' && (
<svg class="w-6 h-6" 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-6 h-6" 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-6 h-6" 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-6 h-6" 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-6 h-6" 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>
)}
<!-- CTA Button -->
<a
href="/contact"
class="border border-brand-accent px-8 py-4 text-sm font-bold uppercase tracking-[0.2em] text-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300 mb-8 rounded-full"
>
Let's Talk
</a>
<span class="text-base font-medium uppercase tracking-wider">{item.label}</span>
</a>
))}
<!-- Decorative Elements -->
<div class="absolute bottom-12 left-8 right-8 flex justify-between items-center">
<div class="flex flex-col gap-2">
<div class="text-[10px] font-mono text-[var(--theme-text-muted)] uppercase tracking-widest">
NV / 2026
</div>
{/* Divider */}
<div class="w-16 h-px bg-[var(--theme-border-primary)] my-4"></div>
{/* Theme Toggle */}
<div class="nav-theme-toggle flex items-center justify-center">
<ThemeToggle />
</div>
<div class="text-[10px] font-mono text-[var(--theme-text-muted)] uppercase tracking-widest self-end">
Menu
</div>
</div>
</nav>
</div>
</div>