ahasani
730e2d8ca8
- Implemented CertificateGallery component to display certification images in a gallery format. - Created CertificationsSection component to showcase certifications with titles and descriptions. - Enhanced Gallery component to support animations and keyboard navigation. - Introduced Select component for dropdown selection with images. - Added utility functions for API responses and pagination handling. - Implemented localization functions for text and content. - Created a custom hook for detecting clicks outside of a component.
93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import routeFactory from '@/assets/constants/routeFactory';
|
|
import images from '@/assets/images/images';
|
|
import { Icon } from '@/components/uikit/icons';
|
|
import { useTranslations } from 'next-intl';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { useParams, usePathname } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
import HamburgerMenu from '../hamburgerMenu';
|
|
import LanguageSwitch from '../languageSwitch';
|
|
|
|
export default function Navbar() {
|
|
const [open, setOpen] = useState<boolean>(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) => {
|
|
let isActive = false;
|
|
if (href === '/' || href === `/${locale}`) {
|
|
isActive = pathname === '/' || pathname === `/${locale}`;
|
|
} else {
|
|
isActive = pathname.startsWith(href);
|
|
}
|
|
return isActive ? 'text-primary font-semibold' : 'text-white';
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<nav className="relative z-50 bg-gradient-to-b from-black to-black/0 pt-7 md:pt-11">
|
|
<div className="container mx-auto flex items-center justify-between border-b-0 border-white/10 pb-6">
|
|
<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 items-center space-x-6 text-sm lg:flex lg:text-base">
|
|
{links.map(({ route, title }) => (
|
|
<li key={route()}>
|
|
<Link
|
|
href={route()}
|
|
className={`${linkClass(route())} hover:text-primary-light`}
|
|
>
|
|
{title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
<div className="h-4 w-px bg-white opacity-35"></div>
|
|
|
|
<li>
|
|
<a className="flex items-center gap-2" href="tel:+098123456789">
|
|
<Icon name="phone" className="text-primary" />
|
|
<p>+098 123456789</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<LanguageSwitch />
|
|
</li>
|
|
</ul>
|
|
|
|
{!open && (
|
|
<button
|
|
className="text-white lg:hidden"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<Icon name="menu" className="h-6 w-6" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
|
|
<HamburgerMenu isOpen={open} onClose={() => setOpen(false)} />
|
|
</>
|
|
);
|
|
}
|