84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Menu, X } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export function Navigation() {
|
|
const [isScrolled, setIsScrolled] = useState(false)
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 20)
|
|
}
|
|
window.addEventListener("scroll", handleScroll)
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, [])
|
|
|
|
const navLinks = [
|
|
{ href: "#systems", label: "Time Systems" },
|
|
{ href: "#kairos", label: "Kairos vs Chronos" },
|
|
{ href: "#indigenous", label: "Indigenous Wisdom" },
|
|
{ href: "#translator", label: "Calendar Translator" },
|
|
{ href: "#alternatives", label: "Natural Rhythms" },
|
|
]
|
|
|
|
return (
|
|
<nav
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
isScrolled ? "bg-background/80 backdrop-blur-lg border-b border-border" : "bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="container mx-auto px-4 lg:px-8">
|
|
<div className="flex items-center justify-between h-16 lg:h-20">
|
|
<a href="#" className="font-serif text-xl lg:text-2xl font-bold text-primary">
|
|
decolonizeti.me
|
|
</a>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center gap-8">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-sm text-foreground/70 hover:text-foreground transition-colors"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="md:hidden"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
{isMobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMobileMenuOpen && (
|
|
<div className="md:hidden py-4 border-t border-border">
|
|
<div className="flex flex-col gap-4">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-sm text-foreground/70 hover:text-foreground transition-colors py-2"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|