mirror of
https://github.com/harivansh-afk/Austens-Wedding-Guide.git
synced 2026-04-15 10:05:14 +00:00
navbar improvements
This commit is contained in:
parent
8e8d41eab4
commit
e06beffcac
2 changed files with 255 additions and 771 deletions
|
|
@ -1,81 +1,106 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import { Feather } from 'lucide-react';
|
||||
import { Feather, Menu, X } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Character Blogs', path: '/blogs' },
|
||||
{ name: 'Bride Quiz', path: '/quiz' },
|
||||
{ name: 'Vendors', path: '/vendors' },
|
||||
{ name: 'Success Stories', path: '/success-stories' },
|
||||
{ name: 'Market Value', path: '/market-calculator' },
|
||||
];
|
||||
|
||||
const analysisItems = [
|
||||
{ name: 'Literary Analysis', path: '/analysis' },
|
||||
{ name: 'Character Network', path: '/network' },
|
||||
{ name: 'Timeline', path: '/timeline' },
|
||||
{ name: 'Social Class', path: '/social-class' },
|
||||
];
|
||||
|
||||
const Navbar = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="border-b bg-cream-50">
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-cream-50/80 backdrop-blur-sm">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center space-x-2">
|
||||
<Feather className="h-6 w-6 text-sage-700" />
|
||||
<span className="font-cormorant text-xl text-sage-900">Austen's Wedding Guide</span>
|
||||
</Link>
|
||||
|
||||
<nav className="flex items-center">
|
||||
<div className="flex items-center space-x-2 mr-6">
|
||||
<Link
|
||||
to="/blogs"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Character Blogs
|
||||
</Link>
|
||||
<Link
|
||||
to="/quiz"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Bride Quiz
|
||||
</Link>
|
||||
<Link
|
||||
to="/vendors"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Vendors
|
||||
</Link>
|
||||
<Link
|
||||
to="/success-stories"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Success Stories
|
||||
</Link>
|
||||
<Link
|
||||
to="/market-calculator"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Market Value
|
||||
</Link>
|
||||
</div>
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="lg:hidden rounded-md p-2 text-sage-700 hover:bg-sage-100"
|
||||
>
|
||||
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||
</button>
|
||||
|
||||
<div className="flex items-center space-x-2 border-l border-sage-200 pl-6">
|
||||
<Link
|
||||
to="/analysis"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Literary Analysis
|
||||
</Link>
|
||||
<Link
|
||||
to="/network"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Character Network
|
||||
</Link>
|
||||
<Link
|
||||
to="/timeline"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Timeline
|
||||
</Link>
|
||||
<Link
|
||||
to="/social-class"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Social Class
|
||||
</Link>
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex lg:items-center lg:space-x-1">
|
||||
<div className="flex items-center space-x-1">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className="px-3 py-2 text-sm font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="h-6 mx-4 w-px bg-sage-200" />
|
||||
<div className="flex items-center space-x-1">
|
||||
{analysisItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className="px-3 py-2 text-sm font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<div
|
||||
className={cn(
|
||||
'lg:hidden',
|
||||
isOpen ? 'block border-t border-sage-200' : 'hidden'
|
||||
)}
|
||||
>
|
||||
<div className="space-y-1 px-2 pb-3 pt-2">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className="block px-3 py-2 text-base font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<div className="my-2 h-px bg-sage-200" />
|
||||
{analysisItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className="block px-3 py-2 text-base font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue