'use client'; import { cn } from '@/lib/utils'; import type { SharedData } from '@/types'; import { router, usePage } from '@inertiajs/react'; import { memo, useCallback, useEffect, useState } from 'react'; interface NavigationBarProps { appName?: string; appLogoUrl?: string | null; appLogoWebP?: string | null; appFont?: string; heroUseLogo?: boolean; } const allNavItems = [ { label: 'Home', target: 'hero', href: '/' }, { label: 'News', target: 'news', href: '/#news' }, { label: 'Top Up', target: 'donations', href: '/#donations' }, { label: 'Download', target: 'download', href: '/#download' }, { label: 'Event', target: 'events', href: '/#events', requiresEventEnabled: true }, ]; // Parse app name for styled logo text (e.g., "MostWanted" -> Most + W + anted) const parseAppName = (name: string) => { if (!name) return { part1: 'Game', highlight: 'S', part2: 'erver' }; // Try to find a good split point const mid = Math.ceil(name.length / 2); return { part1: name.slice(0, mid - 1), highlight: name.slice(mid - 1, mid), part2: name.slice(mid), }; }; export const NavigationBar = memo(function NavigationBar({ appName, appLogoUrl, appLogoWebP: _appLogoWebP, appFont: _appFont, heroUseLogo: _heroUseLogo }: NavigationBarProps) { const [open, setOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const { auth, socialMedia } = usePage().props; const isLoggedIn = auth?.user != null; const menuEventEnabled = (usePage().props as any).services?.menu_event_enabled ?? true; const navItems = allNavItems.filter((item) => !item.requiresEventEnabled || menuEventEnabled); const logoParts = parseAppName(appName || 'Server'); // Handle scroll useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); // Handle body scroll lock useEffect(() => { if (open) { document.body.style.overflow = 'hidden'; document.documentElement.style.overflow = 'hidden'; } else { document.body.style.removeProperty('overflow'); document.documentElement.style.removeProperty('overflow'); } return () => { document.body.style.removeProperty('overflow'); document.documentElement.style.removeProperty('overflow'); }; }, [open]); const toggleMenu = useCallback(() => { setOpen((prev) => !prev); }, []); const closeMenu = useCallback(() => { setOpen(false); }, []); const scrollToTarget = useCallback( (target: string) => { const el = document.getElementById(target); if (el) { el.scrollIntoView({ behavior: 'smooth' }); closeMenu(); } else { if (window.location.pathname !== '/') { router.visit('/#' + target, { preserveState: false }); } else { window.scrollTo({ top: 0, behavior: 'smooth' }); } closeMenu(); } }, [closeMenu], ); return ( <>
{/* Mobile Drawer */}
{/* Backdrop */}
{/* Panel */}
{navItems.map((item) => ( ))} {/* Mobile Actions */}
{isLoggedIn ? ( Dashboard ) : ( )}
); });