Presupuestador_web/client/src/components/Layout/LayoutHeader.tsx

import { Button, Sheet, SheetContent, SheetTrigger } from "@/ui";

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";

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>
        {/*<Link
          to='/home'
          className={cn(
            "transition-colors text-muted-foreground hover:text-foreground",
            isActiveLink("/home") ? "text-foreground" : "text-muted-foreground"
          )}
        >
          <Trans i18nKey='main_menu.home' />
        </Link>*/}
        <Link
          to='/quotes'
          className={cn(
            "transition-colors text-muted-foreground hover:text-foreground",
            isActiveLink("/quotes") ? "text-foreground" : "text-muted-foreground"
          )}
        >
          <Trans i18nKey='main_menu.quotes' />
        </Link>
        <Link
          to='/catalog'
          className={cn(
            "transition-colors text-muted-foreground hover:text-foreground",
            isActiveLink("/catalog") ? "text-foreground" : "text-muted-foreground"
          )}
        >
          <Trans i18nKey='main_menu.catalog' />
        </Link>
        {/*<Link
          to='/dealers'
          className={cn(
            "transition-colors text-muted-foreground hover:text-foreground",
            isActiveLink("/dealers") ? "text-foreground" : "text-muted-foreground"
          )}
          <Trans i18nKey='main_menu.dealers' />
        </Link>*/}
        <Link
          to='/settings'
          className={cn(
            "transition-colors text-muted-foreground hover:text-foreground",
            isActiveLink("/settings") ? "text-foreground" : "text-muted-foreground"
          )}
        >
          <Trans i18nKey='main_menu.settings' />
        </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>
            {/*<Link to='/home' className='text-muted-foreground hover:text-foreground'>
              <Trans i18nKey='main_menu.home' />
            </Link>*/}
            <Link to='/quotes' className='text-muted-foreground hover:text-foreground'>
              <Trans i18nKey='main_menu.quotes' />
            </Link>
            <Link to='/catalog' className='text-muted-foreground hover:text-foreground'>
              <Trans i18nKey='main_menu.catalog' />
            </Link>
            <Link to='/dealers' className='text-muted-foreground hover:text-foreground'>
              <Trans i18nKey='main_menu.dealers' />
            </Link>
            <Link to='/settings' className='hover:text-foreground'>
              <Trans i18nKey='main_menu.settings' />
            </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 />
      </div>
    </header>
  );
};

LayoutHeader.displayName = "LayoutHeader";