131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
import { PRODUCT_INFO } from '@/shared/constants/data';
|
|
import { Accordion } from '@/shared/ui/accordion';
|
|
import { Button } from '@/shared/ui/button';
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuList,
|
|
} from '@/shared/ui/navigation-menu';
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from '@/shared/ui/sheet';
|
|
import { Menu } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { menu } from '../lib/data';
|
|
import { ChangeLang } from './ChangeLang';
|
|
import RenderMenuItem from './RenderItem';
|
|
import RenderMobileMenuItem from './RenderMobileMenuItem';
|
|
|
|
const Navbar = () => {
|
|
const auth = {
|
|
login: { title: 'Login', url: '#' },
|
|
signup: { title: 'Sign up', url: '#' },
|
|
};
|
|
|
|
return (
|
|
<section className="py-4">
|
|
<div className="custom-container">
|
|
{/* Desktop Menu */}
|
|
<nav className="hidden justify-between lg:flex">
|
|
<div className="flex items-center gap-6">
|
|
{/* Logo */}
|
|
<Link href={'/'} className="flex items-center gap-2">
|
|
<Image
|
|
width={500}
|
|
height={500}
|
|
src={PRODUCT_INFO.logo}
|
|
className="max-h-8"
|
|
alt={PRODUCT_INFO.name}
|
|
/>
|
|
<span className="text-lg font-semibold tracking-tighter">
|
|
{PRODUCT_INFO.name}
|
|
</span>
|
|
</Link>
|
|
<div className="flex items-center">
|
|
<NavigationMenu>
|
|
<NavigationMenuList>
|
|
{menu.map((item) => RenderMenuItem(item))}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<ChangeLang />
|
|
<Button asChild variant="outline">
|
|
<Link href={auth.login.url}>{auth.login.title}</Link>
|
|
</Button>
|
|
<Button asChild>
|
|
<Link href={auth.signup.url}>{auth.signup.title}</Link>
|
|
</Button>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile Menu */}
|
|
<div className="block lg:hidden">
|
|
<div className="flex items-center justify-between">
|
|
{/* Logo */}
|
|
<Link href={'/'} className="flex items-center gap-2">
|
|
<Image
|
|
width={500}
|
|
height={500}
|
|
src={PRODUCT_INFO.logo}
|
|
className="max-h-8"
|
|
alt={PRODUCT_INFO.name}
|
|
/>
|
|
</Link>
|
|
<Sheet>
|
|
<div className="space-x-2">
|
|
<ChangeLang />
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<Menu className="size-4" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
</div>
|
|
<SheetContent className="overflow-y-auto">
|
|
<SheetHeader>
|
|
<SheetTitle>
|
|
<Link href={'/'} className="flex items-center gap-2">
|
|
<Image
|
|
width={500}
|
|
height={500}
|
|
src={PRODUCT_INFO.logo}
|
|
className="max-h-8"
|
|
alt={PRODUCT_INFO.name}
|
|
/>
|
|
</Link>
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="flex flex-col gap-6 p-4">
|
|
<Accordion
|
|
type="single"
|
|
collapsible
|
|
className="flex w-full flex-col gap-4"
|
|
>
|
|
{menu.map((item) => RenderMobileMenuItem(item))}
|
|
</Accordion>
|
|
|
|
<div className="flex flex-col gap-3">
|
|
<Button asChild variant="outline">
|
|
<Link href={auth.login.url}>{auth.login.title}</Link>
|
|
</Button>
|
|
<Button asChild>
|
|
<Link href={auth.signup.url}>{auth.signup.title}</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|