99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
import { Button, Sheet, SheetContent, SheetTrigger } from "@/ui";
|
|
|
|
import SupportModal from "@/app/support/components/SupportModal";
|
|
import { cn } from "@/lib/utils";
|
|
import { MenuIcon, Package2Icon } from "lucide-react";
|
|
import { useCallback } from "react";
|
|
import { Trans } from "react-i18next";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import { UeckoLogo } from "../UeckoLogo";
|
|
import { UserButton } from "./components";
|
|
|
|
const mainMenu = [
|
|
{
|
|
label: "main_menu.quotes",
|
|
to: "/quotes",
|
|
},
|
|
{
|
|
label: "main_menu.catalog",
|
|
to: "/catalog",
|
|
},
|
|
{
|
|
label: "main_menu.settings",
|
|
to: "/settings",
|
|
},
|
|
];
|
|
|
|
export const LayoutHeader = () => {
|
|
const location = useLocation();
|
|
|
|
const isActiveLink = useCallback(
|
|
(path: string) => location.pathname === path,
|
|
[location.pathname]
|
|
);
|
|
|
|
return (
|
|
<header className='sticky top-0 z-20 flex items-center h-16 gap-6 px-4 border-b shadow bg-accent md:px-6'>
|
|
<nav className='flex-col hidden gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:text-sm'>
|
|
<Link to='/' className='flex items-center mr-6 font-semibold'>
|
|
<UeckoLogo className='w-24' />
|
|
<span className='sr-only'>Uecko</span>
|
|
</Link>
|
|
{mainMenu.map((menuItem) => (
|
|
<Link
|
|
to={menuItem.to}
|
|
className={cn(
|
|
"transition-colors text-muted-foreground hover:text-foreground",
|
|
isActiveLink(menuItem.to)
|
|
? "text-foreground font-bold"
|
|
: "text-muted-foreground font-semibold"
|
|
)}
|
|
>
|
|
<Trans i18nKey={menuItem.label} />
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant='outline' size='icon' className='shrink-0 md:hidden'>
|
|
<MenuIcon className='w-5 h-5' />
|
|
<span className='sr-only'>Toggle navigation menu</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side='left'>
|
|
<nav className='grid gap-6 text-lg font-medium'>
|
|
<Link to='/' className='flex items-center gap-2 text-lg font-semibold'>
|
|
<Package2Icon className='w-6 h-6' />
|
|
<span className='sr-only'>Uecko</span>
|
|
</Link>
|
|
{mainMenu.map((menuItem) => (
|
|
<Link
|
|
key={menuItem.to}
|
|
to={menuItem.to}
|
|
className={cn(
|
|
"flex items-center gap-4 px-4 py-3 rounded-lg transition-colors",
|
|
"hover:bg-primary-light hover:text-primary text-muted-foreground"
|
|
)}
|
|
>
|
|
<Trans i18nKey={menuItem.label} />
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
|
|
<Link to='/' className='flex items-center font-semibold shrink-0 md:hidden'>
|
|
<UeckoLogo className='w-24' />
|
|
<span className='sr-only'>Uecko</span>
|
|
</Link>
|
|
|
|
<div className='flex items-center justify-end w-full gap-4 md:ml-auto md:gap-2 lg:gap-4'>
|
|
<UserButton />
|
|
<SupportModal />
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
LayoutHeader.displayName = "LayoutHeader";
|