82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { useState } from "react";
|
|
import { Link, useLocation } from "wouter";
|
|
import { Logo } from "@/components/ui/logo";
|
|
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetTrigger,
|
|
SheetClose
|
|
} from "@/components/ui/sheet";
|
|
import { Menu } from "lucide-react";
|
|
|
|
export default function Header() {
|
|
const [location] = useLocation();
|
|
|
|
const isActive = (path: string) => {
|
|
return location === path
|
|
? "text-white"
|
|
: "text-white text-opacity-80 hover:text-white";
|
|
};
|
|
|
|
const navLinks = [
|
|
{ name: "Class Calendar", path: "/calendar" },
|
|
{ name: "Meet Fadia", path: "/about" },
|
|
{ name: "Contact", path: "/contact" },
|
|
];
|
|
|
|
return (
|
|
<header className="sticky top-0 bg-teal shadow-sm z-50">
|
|
<div className="max-w-7xl mx-auto px-2 sm:px-3 lg:px-4">
|
|
<div className="flex justify-between items-center py-1">
|
|
<div className="flex items-center">
|
|
<Logo />
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex space-x-8">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.path}
|
|
href={link.path}
|
|
className={`transition-colors duration-200 font-raleway font-bold text-lg ${isActive(link.path)}`}
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
|
|
|
|
{/* Mobile Menu */}
|
|
<div className="md:hidden">
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<button type="button" className="text-white hover:text-opacity-80">
|
|
<span className="sr-only">Open main menu</span>
|
|
<Menu className="h-6 w-6" />
|
|
</button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-[300px] sm:w-[400px] bg-teal">
|
|
<div className="px-2 pt-2 pb-4 space-y-1 sm:px-3">
|
|
{navLinks.map((link) => (
|
|
<SheetClose asChild key={link.path}>
|
|
<Link
|
|
href={link.path}
|
|
className={`block px-4 py-4 text-xl font-bold text-white hover:text-white hover:text-opacity-80`}
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
</SheetClose>
|
|
))}
|
|
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|