From bc115d2e8ed879adde439afe531f3de742ad2c78 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 7 Apr 2025 08:50:34 +0200
Subject: [PATCH] Improve layout of the navbar

---
 ui/src/components/NavigationBar.tsx | 81 ++++++++++++++++++++---------
 1 file changed, 55 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/NavigationBar.tsx b/ui/src/components/NavigationBar.tsx
index f62a403..c64478e 100644
--- a/ui/src/components/NavigationBar.tsx
+++ b/ui/src/components/NavigationBar.tsx
@@ -69,7 +69,7 @@ function NavLink(props: NavLinkProps) {
         "[&>[data-ui=notification-badge]]:-translate-y-1/2",
         "[&>[data-ui=notification-badge]]:bg-navbar-darker",
         "[&>[data-ui=notification-badge]]:p-3",
-        "[&>[data-ui=notification-badge]]:text-xs/6",
+        "[&>[data-ui=nxotification-badge]]:text-xs/6",
         "[&>[data-ui=notification-badge]]:font-semibold",
         isActive
           ? "bg-navbar-darker font-semibold text-white [&>[data-ui=notification-badge]]:bg-transparent"
@@ -98,11 +98,11 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
         ref={ref}
         isIconOnly={isCollapsed}
         className={twMerge(
-          "flex items-center w-90 justify-start hover:bg-navbar-darker"
+          "flex items-center justify-start hover:bg-navbar-darker w-full"
         )}
       >
         <Avatar
-          className="rounded-full"
+          className={twMerge("rounded-full", isCollapsed ? "size-7" : "size-8")}
           src={session?.user?.user_metadata?.avatar_url}
           alt="Avatar"
         />
@@ -177,9 +177,9 @@ export const SideNavigation = ({
   return (
     <div
       className={twMerge(
-        "group isolate flex flex-col overflow-y-auto bg-navbar-background transition-all duration-300",
+        "group isolate flex flex-col overflow-y-auto overflow-x-hidden bg-navbar-background transition-all duration-300",
         "fixed md:relative h-screen z-50",
-        isCollapsed ? "w-20" : "w-52",
+        isCollapsed ? "w-16" : "w-48",
         "md:flex",
         "transform md:transform-none",
         isMobileMenuOpen
@@ -187,18 +187,21 @@ export const SideNavigation = ({
           : "-translate-x-full md:translate-x-0"
       )}
     >
-      <div className="relative flex flex-col items-center px-3 py-3">
+      <div className="relative flex flex-col items-center px-2 py-3 w-full">
         <RouterLink
           to="/"
           className={twMerge(
-            "flex flex-col items-center gap-2",
-            isCollapsed ? "w-full justify-center" : ""
+            "flex flex-col items-center gap-2 w-full",
+            isCollapsed ? "justify-center" : ""
           )}
         >
           <img
             src={logo}
             alt="Logo XTablo"
-            className={twMerge(isCollapsed ? "w-8 h-8" : "w-18 h-18")}
+            className={twMerge(
+              isCollapsed ? "w-8 h-8" : "w-16 h-16",
+              "rounded-lg"
+            )}
           />
           <h1
             className={twMerge(
@@ -230,7 +233,12 @@ export const SideNavigation = ({
         )}
       </div>
       <MainNavigation isCollapsed={isCollapsed} />
-      <div className="bg-navbar-background sticky bottom-0 left-0 flex mx-3 py-2">
+      <div
+        className={twMerge(
+          "bg-navbar-background flex px-1 pb-1.5 w-full",
+          isCollapsed ? "pl-2.5 pr-3.5" : ""
+        )}
+      >
         <UserMenuPopover isCollapsed={isCollapsed} />
       </div>
     </div>
@@ -242,43 +250,53 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
     {
       path: "/",
       label: "Tableau de Bord",
-      icon: <TableIcon className="w-4 h-4" />,
+      icon: <TableIcon className="w-5 h-5" />,
     },
     {
       path: "/devis",
       label: "Devis",
-      icon: <SettingsIcon className="w-4 h-4" />,
+      icon: <SettingsIcon className="w-5 h-5" />,
     },
     {
       path: "/factures",
       label: "Factures",
-      icon: <SettingsIcon className="w-4 h-4" />,
+      icon: <SettingsIcon className="w-5 h-5" />,
     },
     {
       path: "/planning",
       label: "Planning",
-      icon: <SettingsIcon className="w-4 h-4" />,
+      icon: <SettingsIcon className="w-5 h-5" />,
     },
     {
       path: "/chantiers",
       label: "Chantiers",
-      icon: <ConstructionIcon className="w-4 h-4" />,
+      icon: <ConstructionIcon className="w-5 h-5" />,
     },
   ];
 
   return (
     <nav className="flex flex-1 flex-col">
-      <ul className="grid gap-y-0.5 px-2 py-3">
+      <ul
+        className={twMerge(
+          "grid gap-y-1 py-3",
+          isCollapsed ? "pl-2.5 pr-3" : ""
+        )}
+      >
         {navItems.map(({ path, label, icon }) => (
           <li key={label}>
             <NavLink>
-              <RouterLink to={path}>
-                <div className="flex items-center gap-x-2">
+              <RouterLink to={path} className="w-full">
+                <div
+                  className={twMerge(
+                    "flex items-center gap-x-2",
+                    isCollapsed ? "" : "pl-2"
+                  )}
+                >
                   <Icon>{icon}</Icon>
                   <span
                     className={twMerge(
                       "text-sm transition-all duration-300",
-                      isCollapsed ? "opacity-0 w-0" : "opacity-100"
+                      isCollapsed ? "opacity-0 w-0 hidden" : "opacity-100"
                     )}
                   >
                     {label}
@@ -289,16 +307,24 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
           </li>
         ))}
       </ul>
-      <ul className="mt-auto grid gap-y-0.5 px-2 py-2">
+      <ul
+        className={twMerge(
+          "mt-auto grid gap-y-1 py-1",
+          isCollapsed ? "pl-2.5 pr-3" : ""
+        )}
+      >
         <li>
           <NavLink>
-            <RouterLink to="/">
+            <RouterLink
+              to="/"
+              className={twMerge("w-full", isCollapsed ? "" : "pl-2")}
+            >
               <div className="flex items-center gap-x-2">
-                <HelpCircleIcon className="w-4 h-4" />
+                <HelpCircleIcon className="w-5 h-5" />
                 <span
                   className={twMerge(
                     "text-sm transition-all duration-300",
-                    isCollapsed ? "opacity-0 w-0" : "opacity-100"
+                    isCollapsed ? "opacity-0 w-0 hidden" : "opacity-100"
                   )}
                 >
                   Support
@@ -309,13 +335,16 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
         </li>
         <li>
           <NavLink>
-            <RouterLink to="/">
+            <RouterLink
+              to="/"
+              className={twMerge("w-full", isCollapsed ? "" : "pl-2")}
+            >
               <div className="flex items-center gap-x-2">
-                <SendIcon className="w-4 h-4" />
+                <SendIcon className="w-5 h-5" />
                 <span
                   className={twMerge(
                     "text-sm transition-all duration-300",
-                    isCollapsed ? "opacity-0 w-0" : "opacity-100"
+                    isCollapsed ? "opacity-0 w-0 hidden" : "opacity-100"
                   )}
                 >
                   Feedback