create-crm-tmp 1.1.3 → 2.1.0

package/template/src/components/sidebar.tsx

@@ -9,29 +9,22 @@ import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
 import { useSidebarContext } from '@/contexts/sidebar-context';
 import { useViewAs } from '@/contexts/view-as-context';
 import { ViewAsModal } from '@/components/view-as-modal';
-import {
-  LayoutDashboard,
-  Users,
-  UserCog,
-  Settings,
-  Calendar as CalendarIcon,
-  FileText,
-  Eye,
-  Zap,
-  Columns3,
-  X,
-} from 'lucide-react';
+import { Eye, X, PanelLeftClose, PanelLeftOpen, FlaskConical } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { NAV_PAGES } from '@/config/nav-pages';
 
 export function Sidebar() {
   const pathname = usePathname();
   const { data: session } = useSession();
   const router = useRouter();
   const { isOpen: isMobileMenuOpen, setIsOpen: setIsMobileMenuOpen } = useMobileMenuContext();
-  const { isCollapsed, isPinned, setIsCollapsed } = useSidebarContext();
+  const { isPinned, togglePin } = useSidebarContext();
   const { viewAsUser, isViewingAsOther } = useViewAs();
   const [showViewAsModal, setShowViewAsModal] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
+  /** Ouvert au survol uniquement (desktop, sans modifier le pin) */
+  const [expandedByHover, setExpandedByHover] = useState(false);
+  const isSidebarExpanded = isPinned || expandedByHover;
 
   // Éviter l'erreur d'hydratation
   useEffect(() => {
@@ -39,36 +32,15 @@ export function Sidebar() {
   }, []);
 
   // Obtenir le rôle de l'utilisateur via le hook personnalisé
-  const { isAdmin, isRealAdmin } = useUserRole();
+  const { isRealAdmin, hasPermission } = useUserRole();
 
-  // Navigation principale (Dashboard section)
-  const dashboardNav = useMemo(() => {
-    const baseNav = [
-      { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
-      { name: 'Contacts', href: '/contacts', icon: Users },
-      { name: 'Agenda', href: '/agenda', icon: CalendarIcon },
-      { name: 'Closing', href: '/closing', icon: Columns3 },
-      { name: 'Automatisations', href: '/automatisation', icon: Zap },
-      { name: 'Templates', href: '/templates', icon: FileText },
-    ];
-
-    // Ajouter la gestion des droits d'accès seulement pour les admins
-    if (isAdmin) {
-      baseNav.push({
-        name: "Droits d'accès",
-        href: '/users',
-        icon: UserCog,
-      });
-    }
-
-    baseNav.push({
-      name: 'Paramètres',
-      href: '/settings',
-      icon: Settings,
-    });
-
-    return baseNav;
-  }, [isAdmin]);
+  const dashboardNav = useMemo(
+    () =>
+      NAV_PAGES.filter(
+        (page) => !page.parentLabel && page.permissions.some((p) => hasPermission(p)),
+      ),
+    [hasPermission],
+  );
 
   const handleSignOut = async () => {
     await signOut();
@@ -84,7 +56,7 @@ export function Sidebar() {
       {/* Overlay for mobile */}
       {isMobileMenuOpen && (
         <div
-          className="fixed inset-0 z-40 bg-gray-500/20 backdrop-blur-sm lg:hidden"
+          className="bg-foreground/10 ui-fade-in fixed inset-0 z-40 backdrop-blur-sm lg:hidden"
           onClick={() => setIsMobileMenuOpen(false)}
         />
       )}
@@ -92,70 +64,79 @@ export function Sidebar() {
       {/* Sidebar */}
       <div
         className={cn(
-          'fixed top-0 left-0 z-40 flex h-screen flex-col border-r border-gray-200 bg-white transition-all duration-300 ease-in-out lg:relative lg:translate-x-0',
+          'group border-sidebar-border bg-sidebar text-sidebar-foreground fixed top-0 left-0 z-40 flex h-screen flex-col border-r shadow-(--shadow-card) transition-[width,transform] duration-300 ease-(--ease-standard) lg:relative lg:translate-x-0',
           isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
-          isCollapsed && !isPinned ? 'w-64 lg:w-16' : 'w-64 lg:w-64',
+          !isSidebarExpanded ? 'w-64 lg:w-16' : 'w-64 lg:w-64',
         )}
         onMouseEnter={() => {
-          if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
-            if (!isPinned && isCollapsed) {
-              setIsCollapsed(false);
-            }
+          if (
+            typeof globalThis.window !== 'undefined' &&
+            globalThis.window.innerWidth >= 1024 &&
+            !isPinned
+          ) {
+            setExpandedByHover(true);
           }
         }}
         onMouseLeave={() => {
-          if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
-            if (!isPinned && !isCollapsed) {
-              setIsCollapsed(true);
-            }
+          if (typeof globalThis.window !== 'undefined' && globalThis.window.innerWidth >= 1024) {
+            setExpandedByHover(false);
           }
         }}
       >
-        {/* Bouton fermer - Mobile seulement */}
-        <div className="flex h-16 items-center justify-end border-b border-gray-200 px-4 lg:hidden">
-          <button
-            onClick={() => setIsMobileMenuOpen(false)}
-            className="cursor-pointer rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100"
-            aria-label="Close menu"
-          >
-            <X className="h-5 w-5" />
-          </button>
-        </div>
-
         {/* Navigation principale */}
         <nav className="flex-1 space-y-6 overflow-y-auto py-4">
           {/* Section Dashboard */}
-          <div className={cn('px-3', isCollapsed && !isPinned && 'lg:px-2')}>
-            {(!isCollapsed || isPinned) && (
-              <h2 className="mb-2 px-3 text-xs font-semibold tracking-wider text-nowrap text-gray-500 uppercase">
-                CRM Template
-              </h2>
-            )}
+          <div className={cn('px-3', !isSidebarExpanded && 'lg:px-2')}>
+            <div className="flex items-center justify-end">
+              <button
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground cursor-pointer rounded-lg p-2 transition-colors duration-200 lg:hidden"
+                aria-label="Close menu"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
             <div className="space-y-1">
               {dashboardNav.map((item) => {
                 const isActive = pathname === item.href;
                 const Icon = item.icon;
+                const displayName = item.name;
                 return (
                   <Link
                     key={item.name}
                     href={item.href}
                     onClick={handleLinkClick}
                     className={cn(
-                      'flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-colors',
-                      isCollapsed && !isPinned ? 'px-3 lg:justify-center lg:px-2' : 'px-3',
+                      'flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-[color,background-color,box-shadow] duration-(--duration-normal) ease-(--ease-standard)',
+                      !isSidebarExpanded ? 'px-3 lg:justify-center lg:px-2' : 'px-3',
                       isActive
-                        ? 'bg-indigo-50 text-indigo-600'
-                        : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900',
+                        ? 'bg-sidebar-primary text-sidebar-primary-foreground shadow-sm'
+                        : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:scale-[0.97]',
                     )}
-                    title={isCollapsed && !isPinned ? item.name : undefined}
+                    title={!isSidebarExpanded ? displayName : undefined}
                   >
-                    <Icon className="h-5 w-5 shrink-0" />
-                    {(!isCollapsed || isPinned) && (
-                      <span className="whitespace-nowrap">{item.name}</span>
-                    )}
+                    <Icon aria-hidden="true" className="h-5 w-5 shrink-0" />
+                    {isSidebarExpanded && <span className="whitespace-nowrap">{displayName}</span>}
                   </Link>
                 );
               })}
+              {process.env.NODE_ENV === 'development' && (
+                <Link
+                  href="/dev"
+                  onClick={handleLinkClick}
+                  className={cn(
+                    'flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-[color,background-color,box-shadow] duration-(--duration-normal) ease-(--ease-standard)',
+                    !isSidebarExpanded ? 'px-3 lg:justify-center lg:px-2' : 'px-3',
+                    pathname === '/dev'
+                      ? 'bg-sidebar-primary text-sidebar-primary-foreground shadow-sm'
+                      : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:scale-[0.97]',
+                  )}
+                  title={!isSidebarExpanded ? 'Dev' : undefined}
+                >
+                  <FlaskConical aria-hidden="true" className="h-5 w-5 shrink-0" />
+                  {isSidebarExpanded && <span className="whitespace-nowrap">Dev</span>}
+                </Link>
+              )}
             </div>
           </div>
         </nav>
@@ -164,18 +145,18 @@ export function Sidebar() {
         {isRealAdmin && (
           <div
             className={cn(
-              'border-t border-gray-200 transition-all duration-300',
-              isCollapsed && !isPinned ? 'p-3 lg:p-2' : 'p-3',
+              'border-sidebar-border border-t transition-[padding] duration-300',
+              !isSidebarExpanded ? 'p-3 lg:p-2' : 'p-3',
             )}
           >
-            {!isCollapsed || isPinned ? (
+            {isSidebarExpanded ? (
               <button
                 onClick={() => setShowViewAsModal(true)}
                 className={cn(
-                  'w-full cursor-pointer rounded-lg border-2 p-3 text-left transition-all',
+                  'w-full cursor-pointer rounded-lg border-2 p-3 text-left transition-colors',
                   isViewingAsOther
-                    ? 'border-indigo-600 bg-indigo-600 text-white hover:border-indigo-700 hover:bg-indigo-700'
-                    : 'border-gray-300 bg-white text-gray-900 hover:border-indigo-300 hover:bg-indigo-50',
+                    ? 'border-sidebar-primary bg-sidebar-primary text-sidebar-primary-foreground hover:opacity-95'
+                    : 'border-sidebar-border bg-sidebar text-sidebar-foreground hover:border-sidebar-ring hover:bg-sidebar-accent',
                 )}
                 aria-label="Changer de vue"
               >
@@ -183,7 +164,9 @@ export function Sidebar() {
                   <div
                     className={cn(
                       'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
-                      isViewingAsOther ? 'bg-white/20 text-white' : 'bg-indigo-100 text-indigo-600',
+                      isViewingAsOther
+                        ? 'bg-sidebar-primary-foreground/20 text-sidebar-primary-foreground'
+                        : 'bg-sidebar-accent text-sidebar-accent-foreground',
                     )}
                   >
                     {!isMounted
@@ -196,7 +179,9 @@ export function Sidebar() {
                     <p
                       className={cn(
                         'text-xs font-medium',
-                        isViewingAsOther ? 'text-white/80' : 'text-gray-500',
+                        isViewingAsOther
+                          ? 'text-sidebar-primary-foreground/80'
+                          : 'text-sidebar-foreground/70',
                       )}
                     >
                       {isViewingAsOther ? 'Vue:' : 'Ma vue'}
@@ -209,7 +194,7 @@ export function Sidebar() {
                           : session?.user?.name || 'Utilisateur'}
                     </p>
                   </div>
-                  <Eye className="h-5 w-5 shrink-0" />
+                  <Eye aria-hidden="true" className="h-5 w-5 shrink-0" />
                 </div>
               </button>
             ) : (
@@ -218,57 +203,89 @@ export function Sidebar() {
                 className={cn(
                   'w-full cursor-pointer rounded-lg p-2 transition-colors',
                   isViewingAsOther
-                    ? 'bg-indigo-600 text-white hover:bg-indigo-700'
-                    : 'text-gray-500 hover:bg-gray-100',
+                    ? 'bg-sidebar-primary text-sidebar-primary-foreground hover:opacity-95'
+                    : 'text-sidebar-foreground/70 hover:bg-sidebar-accent',
                 )}
                 title="Changer de vue"
                 aria-label="Changer de vue"
               >
                 <div className="flex items-center justify-center">
-                  <Eye className="h-5 w-5" />
+                  <Eye aria-hidden="true" className="h-5 w-5" />
                 </div>
               </button>
             )}
           </div>
         )}
 
+        {/* Bouton Réduire / Développer la navigation (desktop uniquement) */}
+        <div
+          className={cn(
+            'border-sidebar-border hidden border-t lg:block',
+            !isSidebarExpanded ? 'p-3 lg:p-2' : 'p-3',
+          )}
+        >
+          <button
+            onClick={togglePin}
+            className={cn(
+              'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex w-full cursor-pointer items-center gap-3 rounded-lg py-2 text-sm font-medium transition-colors duration-200',
+              !isSidebarExpanded ? 'justify-center px-2' : 'px-3',
+            )}
+            title={isPinned ? 'Réduire la navigation' : 'Développer la navigation'}
+            aria-label={isPinned ? 'Réduire la navigation' : 'Développer la navigation'}
+          >
+            {isPinned ? (
+              <>
+                <PanelLeftClose aria-hidden="true" className="h-5 w-5 shrink-0" />
+                <span className="whitespace-nowrap">Réduire la navigation</span>
+              </>
+            ) : (
+              <div className="flex gap-2">
+                <PanelLeftOpen aria-hidden="true" className="h-5 w-5 shrink-0" />
+                <span className="hidden whitespace-nowrap group-hover:block">
+                  Développer la navigation
+                </span>
+              </div>
+            )}
+          </button>
+        </div>
+
         {/* User Profile */}
         <div
           className={cn(
-            'border-t border-gray-200 transition-all duration-300',
-            isCollapsed && !isPinned ? 'p-4 lg:p-2' : 'p-4',
+            'border-sidebar-border border-t transition-[padding] duration-300',
+            !isSidebarExpanded ? 'p-4 lg:p-2' : 'p-4',
           )}
         >
-          {!isCollapsed || isPinned ? (
+          {isSidebarExpanded ? (
             <>
               <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600">
+                <div className="bg-sidebar-accent text-sidebar-accent-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
                   {!isMounted ? 'U' : session?.user?.name?.[0]?.toUpperCase() || 'U'}
                 </div>
                 <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium text-gray-900">
+                  <p className="text-sidebar-foreground truncate text-sm font-medium">
                     {!isMounted ? 'Utilisateur' : session?.user?.name || 'Utilisateur'}
                   </p>
-                  <p className="truncate text-xs text-gray-500">
+                  <p className="text-sidebar-foreground/70 truncate text-xs">
                     {!isMounted ? '' : session?.user?.email}
                   </p>
                 </div>
               </div>
               <button
                 onClick={handleSignOut}
-                className="mt-3 w-full cursor-pointer rounded-lg bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200"
+                className="bg-sidebar-accent text-sidebar-accent-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground mt-3 w-full cursor-pointer rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200"
               >
                 Déconnexion
               </button>
             </>
           ) : (
             <div className="flex flex-col items-center gap-2">
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600">
+              <div className="bg-sidebar-accent text-sidebar-accent-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
                 {!isMounted ? 'U' : session?.user?.name?.[0]?.toUpperCase() || 'U'}
               </div>
               <button
                 onClick={handleSignOut}
-                className="cursor-pointer rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100"
+                className="text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground cursor-pointer rounded-lg p-2 transition-colors duration-200"
                 title="Déconnexion"
                 aria-label="Déconnexion"
               >