88 lines
3.4 KiB
JavaScript
88 lines
3.4 KiB
JavaScript
import { useState } from 'react'
|
|
import { Button } from '@/components/ui/button.jsx'
|
|
import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/sheet.jsx'
|
|
import { Globe, Menu } from 'lucide-react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
import navigationData from '../config/navigation.json'
|
|
import ThemeToggle from './ThemeToggle.jsx'
|
|
|
|
function Navigation() {
|
|
const location = useLocation()
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
|
|
|
const isActive = (path) => {
|
|
return location.pathname === path
|
|
}
|
|
|
|
return (
|
|
<nav className="fixed top-0 w-full bg-background border-b border-border z-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
<Link to="/" className="flex items-center space-x-2">
|
|
<Globe className="h-8 w-8 text-primary" />
|
|
<span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
{navigationData
|
|
.filter(item => item.show !== false)
|
|
.map((item) => (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
className={`transition-colors ${isActive(item.path) ? 'text-primary font-medium' : 'text-muted-foreground hover:text-primary'}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
<Button asChild className="bg-primary hover:bg-primary/90">
|
|
<Link to="/register">Join Now</Link>
|
|
</Button>
|
|
<ThemeToggle />
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
<div className="md:hidden">
|
|
<Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<Menu className="h-6 w-6" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="bg-background text-foreground sm:max-w-sm py-6">
|
|
<div className="flex flex-col items-center space-y-4 pt-6">
|
|
{navigationData
|
|
.filter(item => item.show !== false)
|
|
.map((item) => (
|
|
<SheetClose asChild key={item.path}>
|
|
<Link
|
|
to={item.path}
|
|
className={`text-xl font-medium text-center ${isActive(item.path) ? 'text-primary' : 'text-foreground hover:text-primary'}`}
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</SheetClose>
|
|
))}
|
|
<SheetClose asChild>
|
|
<Button asChild className="bg-primary hover:bg-primary/90">
|
|
<Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link>
|
|
</Button>
|
|
</SheetClose>
|
|
<SheetClose asChild>
|
|
<ThemeToggle />
|
|
</SheetClose>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navigation
|
|
|