|
|
"use client" |
|
|
|
|
|
import type React from "react" |
|
|
import { Inter } from "next/font/google" |
|
|
import "./globals.css" |
|
|
import Link from "next/link" |
|
|
import { Shield, UserPlus, Home, Menu, X, BookOpen, Activity } from "lucide-react" |
|
|
import { useState, useEffect } from "react" |
|
|
import { ThemeProvider } from "@/components/theme-provider" |
|
|
import { usePathname } from "next/navigation" |
|
|
import { SocialLinks } from "@/components/social-links" |
|
|
|
|
|
const inter = Inter({ subsets: ["latin"] }) |
|
|
|
|
|
export default function ClientLayout({ |
|
|
children, |
|
|
}: { |
|
|
children: React.ReactNode |
|
|
}) { |
|
|
return ( |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> |
|
|
</head> |
|
|
<body className={inter.className}> |
|
|
<ThemeProvider attribute="class" defaultTheme="dark"> |
|
|
<div className="min-h-screen bg-black"> |
|
|
<MobileNavigation /> |
|
|
<main className="pt-16">{children}</main> |
|
|
</div> |
|
|
</ThemeProvider> |
|
|
</body> |
|
|
</html> |
|
|
) |
|
|
} |
|
|
|
|
|
function MobileNavigation() { |
|
|
const [isOpen, setIsOpen] = useState(false) |
|
|
const pathname = usePathname() |
|
|
|
|
|
const toggleMenu = () => { |
|
|
setIsOpen(!isOpen) |
|
|
} |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
setIsOpen(false) |
|
|
}, [pathname]) |
|
|
|
|
|
const isActive = (path: string) => { |
|
|
return pathname === path ? "text-flame" : "text-gray-300 hover:text-flame-red" |
|
|
} |
|
|
|
|
|
return ( |
|
|
<header className="fixed top-0 left-0 right-0 z-50 border-b border-gray-800 bg-black/90 backdrop-blur-sm"> |
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div className="flex justify-between items-center h-16"> |
|
|
<div className="flex items-center"> |
|
|
<Link href="/" className="text-2xl font-bold text-flame-red"> |
|
|
FLAMEBORN |
|
|
</Link> |
|
|
</div> |
|
|
|
|
|
{/* Desktop Navigation */} |
|
|
<nav className="hidden md:flex items-center space-x-4"> |
|
|
<Link href="/" className={`flex items-center ${isActive("/")}`}> |
|
|
<Home className="h-4 w-4 mr-1" /> |
|
|
<span>Home</span> |
|
|
</Link> |
|
|
<Link href="/guardians-sanctuary" className={`flex items-center ${isActive("/guardians-sanctuary")}`}> |
|
|
<Shield className="h-4 w-4 mr-1" /> |
|
|
<span>Sanctuary</span> |
|
|
</Link> |
|
|
<Link href="/flameborn-journey" className={`flex items-center ${isActive("/flameborn-journey")}`}> |
|
|
<BookOpen className="h-4 w-4 mr-1" /> |
|
|
<span>Journey</span> |
|
|
</Link> |
|
|
<Link href="/community-pulse" className={`flex items-center ${isActive("/community-pulse")}`}> |
|
|
<Activity className="h-4 w-4 mr-1" /> |
|
|
<span>Pulse</span> |
|
|
</Link> |
|
|
<Link href="/register-chw" className={`flex items-center ${isActive("/register-chw")}`}> |
|
|
<UserPlus className="h-4 w-4 mr-1" /> |
|
|
<span>Register</span> |
|
|
</Link> |
|
|
<div className="ml-4 pl-4 border-l border-gray-700"> |
|
|
<SocialLinks iconSize={16} /> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
{/* Mobile Menu Button */} |
|
|
<button |
|
|
className="md:hidden text-gray-300 hover:text-flame-red" |
|
|
onClick={toggleMenu} |
|
|
aria-label={isOpen ? "Close menu" : "Open menu"} |
|
|
> |
|
|
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />} |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
{/* Mobile Menu */} |
|
|
{isOpen && ( |
|
|
<div className="md:hidden bg-black/95 border-b border-gray-800"> |
|
|
<div className="px-2 pt-2 pb-3 space-y-1"> |
|
|
<Link |
|
|
href="/" |
|
|
className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/").replace("flex", "")}`} |
|
|
> |
|
|
<Home className="h-5 w-5 mr-2 inline-block" /> |
|
|
Home |
|
|
</Link> |
|
|
<Link |
|
|
href="/guardians-sanctuary" |
|
|
className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/guardians-sanctuary").replace("flex", "")}`} |
|
|
> |
|
|
<Shield className="h-5 w-5 mr-2 inline-block" /> |
|
|
Guardian's Sanctuary |
|
|
</Link> |
|
|
<Link |
|
|
href="/flameborn-journey" |
|
|
className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/flameborn-journey").replace("flex", "")}`} |
|
|
> |
|
|
<BookOpen className="h-5 w-5 mr-2 inline-block" /> |
|
|
Flameborn's Journey |
|
|
</Link> |
|
|
<Link |
|
|
href="/community-pulse" |
|
|
className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/community-pulse").replace("flex", "")}`} |
|
|
> |
|
|
<Activity className="h-5 w-5 mr-2 inline-block" /> |
|
|
Pulse of Community |
|
|
</Link> |
|
|
<Link |
|
|
href="/register-chw" |
|
|
className={`block px-3 py-4 text-base font-medium rounded-md ${isActive("/register-chw").replace("flex", "")}`} |
|
|
> |
|
|
<UserPlus className="h-5 w-5 mr-2 inline-block" /> |
|
|
Register |
|
|
</Link> |
|
|
</div> |
|
|
</div> |
|
|
)} |
|
|
</header> |
|
|
) |
|
|
} |
|
|
|
