From 1345012a6a6b3b8baf74f3c5227c3e8ed1e5ef0d Mon Sep 17 00:00:00 2001 From: Nicholai Date: Sun, 18 Jan 2026 04:08:18 -0700 Subject: [PATCH] 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 --- src/components/Navigation.astro | 302 +++++++++++++++++------------ src/components/sections/Hero.astro | 4 +- src/layouts/BaseLayout.astro | 2 +- 3 files changed, 183 insertions(+), 125 deletions(-) diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index 3de6e8c..9e84b0a 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -1,100 +1,120 @@ --- 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); +} --- -