personal website
nekomimi.pet
1import type { Section } from "../data/portfolio"
2import { useSystemTheme } from "../hooks/useSystemTheme"
3
4interface SectionNavProps {
5 sections: readonly Section[]
6 activeSection: string
7}
8
9export function SectionNav({ sections, activeSection }: SectionNavProps) {
10 const scrollToSection = (section: string) => {
11 document.getElementById(section)?.scrollIntoView({ behavior: "smooth" })
12 }
13
14 return (
15 <nav className="fixed left-8 top-1/2 -translate-y-1/2 z-10 hidden lg:block">
16 <div className="flex flex-col gap-4">
17 {sections.map((section) => (
18 <button
19 key={section}
20 onClick={() => scrollToSection(section)}
21 className={`w-2 h-8 rounded-full transition-all duration-500 ${
22 activeSection === section ? "bg-foreground" : "glass glass-hover"
23 }`}
24 aria-label={`Navigate to ${section}`}
25 />
26 ))}
27 </div>
28 </nav>
29 )
30}