Improve navbar links with bold

ui/src/components/NavigationBar.tsx

@@ -11,8 +11,9 @@ import {
   NotebookPenIcon,
   MessageCircleIcon,
   SquareKanban,
+  Kanban,
 } from "lucide-react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useLocation } from "react-router-dom";
 import { Separator } from "react-aria-components";
 import { Link } from "@ui/ui-library/link";
 import { Icon } from "@ui/ui-library/icon";
@@ -66,7 +67,7 @@ function NavLink(props: NavLinkProps) {
     <Link
       {...rest}
       className={twMerge(
-        "group w-full gap-x-3 overflow-hidden rounded-md px-2.5 py-1 text-nowrap hover:bg-navbar-darker hover:no-underline focus-visible:outline-offset-0 [&>[data-ui=icon]:not([class*=size-])]:size-4.5",
+        "group w-full gap-x-3 overflow-hidden px-2.5 py-1.5 text-nowrap hover:bg-navbar-darker hover:no-underline focus-visible:outline-offset-0 [&>[data-ui=icon]:not([class*=size-])]:size-4.5",
         "[&>[data-ui=notification-badge]]:bg-navbar-darker",
         "[&>[data-ui=notification-badge]]:rounded-md",
         "[&>[data-ui=notification-badge]]:top-1/2",
@@ -239,6 +240,8 @@ export const SideNavigation = ({
 };
 
 export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
+  const location = useLocation();
+
   const navItems: {
     path: string;
     label: string;
@@ -267,6 +270,12 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
       label: "Planning",
       icon: <SquareKanban className="w-5 h-5" />,
     },
+    {
+      path: "/kanban",
+      label: "Kanban",
+      icon: <Kanban className="w-5 h-5" />,
+      isDisabled: true,
+    },
     {
       path: "/chantiers",
       label: "Chantiers",
@@ -283,15 +292,12 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
     <nav className="flex flex-1 flex-col" aria-label="Primary navigation">
       <ul
         role="list"
-        className={twMerge(
-          "grid gap-y-1 py-3",
-          isCollapsed ? "pl-2.5 pr-3" : ""
-        )}
+        className={twMerge("grid py-3", isCollapsed ? "pl-2.5 pr-3" : "")}
       >
         {navItems.map(({ path, label, icon, isDisabled }) =>
           !isDisabled ? (
             <li key={label}>
-              <NavLink>
+              <NavLink isActive={location.pathname === path}>
                 <RouterLink
                   to={path}
                   className="w-full"
@@ -322,12 +328,12 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
       <ul
         role="list"
         className={twMerge(
-          "mt-auto grid gap-y-1 py-1",
+          "mt-auto grid py-1",
           isCollapsed ? "pl-2.5 pr-3" : ""
         )}
       >
         <li>
-          <NavLink>
+          <NavLink isActive={location.pathname === "/support"}>
             <RouterLink
               to="/support"
               className={twMerge("w-full", isCollapsed ? "" : "pl-2")}
@@ -350,7 +356,7 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
           </NavLink>
         </li>
         <li>
-          <NavLink>
+          <NavLink isActive={location.pathname === "/feedback"}>
             <RouterLink
               to="/feedback"
               className={twMerge("w-full", isCollapsed ? "" : "pl-2")}