From 4257582d24037a7b1c9a22f607796395e1ea9bc2 Mon Sep 17 00:00:00 2001
From: David Arranz <darranz@rodax-software.com>
Date: Tue, 1 Oct 2024 14:07:28 +0200
Subject: [PATCH] .

---
 client/src/components/Layout/LayoutHeader.tsx | 102 ++++++++----------
 1 file changed, 43 insertions(+), 59 deletions(-)

diff --git a/client/src/components/Layout/LayoutHeader.tsx b/client/src/components/Layout/LayoutHeader.tsx
index 104fa65..ca481f0 100644
--- a/client/src/components/Layout/LayoutHeader.tsx
+++ b/client/src/components/Layout/LayoutHeader.tsx
@@ -9,6 +9,21 @@ 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();
 
@@ -24,50 +39,19 @@ export const LayoutHeader = () => {
           <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>
+        {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>
@@ -82,28 +66,28 @@ export const LayoutHeader = () => {
               <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>
+            {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"
+                )}
+              >
+                {menuItem.icon}
+                <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 />