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
26 lines
919 B
TypeScript
26 lines
919 B
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { useScrollNavigation } from '@/hooks/useScrollNavigation';
|
|
import { NavLogo } from './NavLogo';
|
|
import { DesktopNav } from './DesktopNav';
|
|
import { MobileNav } from './MobileNav';
|
|
|
|
const Navbar = () => {
|
|
const { handleNavClick } = useScrollNavigation();
|
|
|
|
return (
|
|
<div className="w-full px-4 sm:px-6 lg:px-8 flex justify-center mt-4 z-50 fixed">
|
|
<header className="bg-background/50 backdrop-blur-md border shadow-lg rounded-xl w-full max-w-screen-xl py-3 px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between">
|
|
<NavLogo onLogoClick={() => handleNavClick('start')} />
|
|
<DesktopNav onNavClick={handleNavClick} />
|
|
<MobileNav onNavClick={handleNavClick} />
|
|
</div>
|
|
</header>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|