ahasani
a3915377bd
- Added RootLayout component to handle locale and message loading. - Created Home page with header, about info, products, and story sections. - Developed ProductPage for displaying product categories and products. - Implemented ProductsPage to list product categories with banners. - Added Projects page with a grid layout for project display. - Configured server settings for port and host. - Established navigation and routing for internationalization. - Set up request handling for locale and message retrieval. - Defined routing structure for supported locales. - Created middleware for locale-based routing. - Defined layout parameters for locale handling.
80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import images from '@/assets/images/images';
|
|
import { Icon } from '@/components/uikit/icons';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { usePathname, useParams } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
import HamburgerMenu from '../hamburgerMenu';
|
|
import { useTranslations } from 'next-intl';
|
|
import routeFactory from '@/assets/constants/routeFactory';
|
|
|
|
export default function Navbar() {
|
|
const [open, setOpen] = useState(false);
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const locale = params.locale as string;
|
|
const t = useTranslations();
|
|
|
|
// Get localized routes
|
|
const routes = routeFactory(t, locale);
|
|
const links = [
|
|
routes.home,
|
|
routes.productCategories,
|
|
routes.projects,
|
|
routes.blog,
|
|
routes.about,
|
|
routes.contact,
|
|
];
|
|
|
|
const linkClass = (href: string) =>
|
|
pathname === href ? 'text-primary font-semibold' : 'text-white';
|
|
|
|
return (
|
|
<>
|
|
<nav className="relative z-50 container mx-auto bg-transparent pt-7 pb-3 md:py-11">
|
|
<div className="flex items-center justify-between border-b-0 border-white/10 pb-6 md:border-b">
|
|
<Link href={`/${locale}`} className="h-12 w-auto">
|
|
<Image
|
|
alt="logo"
|
|
src={images.logo}
|
|
className="h-full w-auto object-contain"
|
|
/>
|
|
</Link>
|
|
|
|
<ul className="hidden space-x-6 text-sm md:flex lg:text-base">
|
|
{links.map(({ route, title }) => (
|
|
<li key={route()}>
|
|
<Link
|
|
href={route()}
|
|
className={`${linkClass(route())} hover:text-primary-light`}
|
|
>
|
|
{title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
<li>
|
|
<a className="flex items-center gap-2" href="tel:+098123456789">
|
|
<Icon name="phone" className="text-primary" />
|
|
<p>+098 123456789</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
{!open && (
|
|
<button
|
|
className="text-white md:hidden"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<Icon name="menu" className="h-6 w-6" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
|
|
<HamburgerMenu isOpen={open} onClose={() => setOpen(false)} />
|
|
</>
|
|
);
|
|
}
|