Thatsaphorn Atchariyaphap
d9ff535ac0
New Project Structure: - Created reusable UI components (ServiceCard, AnimatedSection, SectionTitle) - Split large components into smaller, focused ones - Extracted shared hooks for common functionality - Organized constants into separate files Key Improvements: - Hooks: useScrollNavigation, useScrollToSection, useCookieSettings - UI Components: Modular components for consistent styling and behavior - Constants: Centralized data management (ServicesData, NavigationData) - Component Split: Navbar, Hero, and Footer broken into logical sub-components
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
|
import { Menu } from 'lucide-react';
|
|
import { ThemeToggle } from '@/components/theme-toggle';
|
|
import { navLinks } from '@/constant/NavigationData';
|
|
|
|
interface MobileNavProps {
|
|
onNavClick: (id: string) => void;
|
|
}
|
|
|
|
export const MobileNav = ({ onNavClick }: MobileNavProps) => {
|
|
return (
|
|
<div className="lg:hidden flex items-center gap-3">
|
|
<ThemeToggle />
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<Menu className="h-5 w-5" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="top" className="pt-10">
|
|
<div className="flex flex-col space-y-4 text-center">
|
|
{navLinks.map((link) => (
|
|
<button
|
|
key={link.id}
|
|
onClick={() => onNavClick(link.id)}
|
|
className="cursor-pointer text-base font-semibold text-muted-foreground hover:text-primary transition-colors"
|
|
>
|
|
{link.label}
|
|
</button>
|
|
))}
|
|
<Button asChild className="mt-4 w-full">
|
|
<Link href="/contact">Kontakt</Link>
|
|
</Button>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
);
|
|
}; |