78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Menu, X } from "lucide-react"
|
|
|
|
export function Navigation() {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-background/85 backdrop-blur-lg border-b border-border">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
<Link href="/" className="text-xl font-bold text-foreground">
|
|
Soul Speaks Soil
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center gap-8">
|
|
<Link href="/" className="text-foreground hover:text-primary transition-colors">
|
|
Home
|
|
</Link>
|
|
<Link href="/about" className="text-foreground hover:text-primary transition-colors">
|
|
About
|
|
</Link>
|
|
<Link href="/episodes" className="text-foreground hover:text-primary transition-colors">
|
|
Episodes
|
|
</Link>
|
|
<Link href="/contact" className="text-foreground hover:text-primary transition-colors">
|
|
Contact
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<Button variant="ghost" size="icon" className="md:hidden" onClick={() => setIsOpen(!isOpen)}>
|
|
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isOpen && (
|
|
<div className="md:hidden py-4 space-y-4">
|
|
<Link
|
|
href="/"
|
|
className="block text-foreground hover:text-primary transition-colors"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Home
|
|
</Link>
|
|
<Link
|
|
href="/about"
|
|
className="block text-foreground hover:text-primary transition-colors"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
About
|
|
</Link>
|
|
<Link
|
|
href="/episodes"
|
|
className="block text-foreground hover:text-primary transition-colors"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Episodes
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="block text-foreground hover:text-primary transition-colors"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Contact
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|