From cfb4b2b3bdff7cfc893e43d7cf099bd4b529fff5 Mon Sep 17 00:00:00 2001
From: David Arranz <darranz@rodax-software.com>
Date: Sun, 25 Aug 2024 22:20:38 +0200
Subject: [PATCH] .

---
 .../QuoteItemsSortableDataTable.tsx           |  2 +-
 client/src/app/settings/edit.tsx              |  8 +--
 client/src/app/settings/layout.tsx            | 10 +++-
 client/src/components/Layout/LayoutHeader.tsx | 49 +++++++++++++++----
 4 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/client/src/app/quotes/components/QuoteItemsSortableDataTable.tsx b/client/src/app/quotes/components/QuoteItemsSortableDataTable.tsx
index fbf809e..93859e7 100644
--- a/client/src/app/quotes/components/QuoteItemsSortableDataTable.tsx
+++ b/client/src/app/quotes/components/QuoteItemsSortableDataTable.tsx
@@ -270,7 +270,7 @@ export function QuoteItemsSortableDataTable({
       collisionDetection={closestCenter}
     >
       <Card>
-        <CardHeader className='sticky z-10 border-b top-16 bg-card'>
+        <CardHeader className='sticky z-10 top-16 bg-card/90'>
           <CardTitle>
             <QuoteItemsSortableDataTableToolbar table={table} />
           </CardTitle>
diff --git a/client/src/app/settings/edit.tsx b/client/src/app/settings/edit.tsx
index 644ee08..b80f922 100644
--- a/client/src/app/settings/edit.tsx
+++ b/client/src/app/settings/edit.tsx
@@ -30,7 +30,7 @@ import { useSettings } from "./hooks";
 type SettingsDataForm = IUpdateProfile_Request_DTO;
 
 export const SettingsEditor = () => {
-  const [activeSection, setActiveSection] = useState("quotes");
+  const [activeSection, setActiveSection] = useState("profile");
   const { useOne, useUpdate } = useSettings();
 
   const { data, status, error: queryError } = useOne();
@@ -107,12 +107,6 @@ export const SettingsEditor = () => {
 
   return (
     <Form {...form}>
-      <div className='grid w-full max-w-6xl gap-2 mx-auto'>
-        <h1 className='text-2xl font-semibold md:text-3xl'>
-          <Trans i18nKey='settings.edit.title' />
-        </h1>
-      </div>
-
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className='mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]'>
           {form.formState.errors.root?.message && (
diff --git a/client/src/app/settings/layout.tsx b/client/src/app/settings/layout.tsx
index 7fb0af2..0e16be8 100644
--- a/client/src/app/settings/layout.tsx
+++ b/client/src/app/settings/layout.tsx
@@ -1,5 +1,6 @@
 import { Layout, LayoutContent, LayoutHeader } from "@/components";
 import { PropsWithChildren } from "react";
+import { Trans } from "react-i18next";
 import { SettingsProvider } from "./SettingsContext";
 
 export const SettingsLayout = ({ children }: PropsWithChildren) => {
@@ -7,7 +8,14 @@ export const SettingsLayout = ({ children }: PropsWithChildren) => {
     <SettingsProvider>
       <Layout>
         <LayoutHeader />
-        <LayoutContent>{children}</LayoutContent>
+        <LayoutContent>
+          <div className='grid w-full max-w-6xl gap-2 mx-auto'>
+            <h1 className='text-2xl font-semibold md:text-3xl'>
+              <Trans i18nKey='settings.edit.title' />
+            </h1>
+          </div>
+          {children}
+        </LayoutContent>
       </Layout>
     </SettingsProvider>
   );
diff --git a/client/src/components/Layout/LayoutHeader.tsx b/client/src/components/Layout/LayoutHeader.tsx
index 3a56a97..6eccdec 100644
--- a/client/src/components/Layout/LayoutHeader.tsx
+++ b/client/src/components/Layout/LayoutHeader.tsx
@@ -1,41 +1,70 @@
 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 } from "react-router-dom";
+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-10 flex items-center h-16 gap-8 px-4 border-b bg-accent md:px-6'>
+    <header className='sticky top-0 z-20 flex items-center h-16 gap-8 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:gap-5 md:text-sm lg:gap-6'>
         <Link to='/' className='flex items-center font-semibold'>
           <UeckoLogo className='w-24' />
           <span className='sr-only'>Uecko</span>
         </Link>
-        <Link to='/home' className='transition-colors text-muted-foreground hover:text-foreground'>
+        <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='transition-colors text-muted-foreground hover:text-foreground'
+          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='transition-colors text-muted-foreground hover:text-foreground'
+          className={cn(
+            "transition-colors text-muted-foreground hover:text-foreground",
+            isActiveLink("/catalog") ? "text-foreground" : "text-muted-foreground"
+          )}
         >
           <Trans i18nKey='main_menu.catalog' />
         </Link>
-        <Link
+        {/*<Link
           to='/dealers'
-          className='transition-colors text-muted-foreground hover:text-foreground'
-        >
+          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='transition-colors text-foreground hover:text-foreground'>
+        </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>