feat: implement Sidebar component including navigation, user details, logout, and BAP document upload with webhook integration.

client/src/components/Sidebar.tsx

@@ -383,8 +383,7 @@ export default function Sidebar() {
   // Classes responsives adaptées avec support tablette
   const getSidebarClasses = () => {
     if (isMobile) {
-      return `fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200 shadow-lg transform transition-transform duration-300 ease-in-out ${
+      return `fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200 shadow-lg transform transition-transform duration-300 ease-in-out ${mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
-        mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
         }`;
     }
 
@@ -578,7 +577,7 @@ export default function Sidebar() {
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 py-2 px-3 overflow-y-hidden">
+      <nav className="flex-1 py-2 px-3 overflow-y-auto">
         <div className="space-y-3">
           {menuSections.map((section, sectionIndex) => {
             // Vérifier si au moins un item de la section est accessible
@@ -619,8 +618,7 @@ export default function Sidebar() {
                               : isMobileOrTablet
                                 ? 'px-4 py-2.5 min-h-10'
                                 : 'px-3 py-2 min-h-9'
-                          } ${
+                            } ${active
-                            active
                               ? 'bg-blue-50 text-blue-700 border-r-2 border-blue-600'
                               : 'text-gray-700'
                             }`}
@@ -632,8 +630,7 @@ export default function Sidebar() {
                             isMobile ? 'h-5 w-5' :
                               isTablet ? 'h-6 w-6' :
                                 'h-5 w-5'
-                          } ${
+                            } ${active ? 'text-blue-700' : 'text-gray-600'
-                            active ? 'text-blue-700' : 'text-gray-600'
                             } ${sidebarCollapsed && !isMobile ? '' : 'mr-3'}`} />
                           {(!sidebarCollapsed || isMobile) && (
                             <span className={`${isMobileOrTablet ? 'text-base' : 'text-[15px]'} font-medium`}>
@@ -672,8 +669,7 @@ export default function Sidebar() {
                 return (
                   <div key={item.path}>
                     <div
-                      className={`flex items-center cursor-pointer transition-colors hover:bg-gray-100 rounded-md ${
+                      className={`flex items-center cursor-pointer transition-colors hover:bg-gray-100 rounded-md ${sidebarCollapsed && !isMobile
-                        sidebarCollapsed && !isMobile 
                           ? 'px-3 py-2 justify-center min-h-9'
                           : isMobileOrTablet
                             ? 'px-4 py-2.5 min-h-10'
@@ -685,8 +681,7 @@ export default function Sidebar() {
                         if (isMobile) setMobileMenuOpen(false);
                       }}
                     >
-                      <Icon className={`${
+                      <Icon className={`${isMobile ? 'h-5 w-5' :
-                        isMobile ? 'h-5 w-5' : 
                           isTablet ? 'h-6 w-6' :
                             'h-5 w-5'
                         } text-gray-600 ${sidebarCollapsed && !isMobile ? '' : 'mr-3'}`} />
@@ -703,26 +698,22 @@ export default function Sidebar() {
               return (
                 <Link key={item.path} href={item.path}>
                   <div
-                    className={`flex items-center transition-colors hover:bg-gray-100 rounded-md ${
+                    className={`flex items-center transition-colors hover:bg-gray-100 rounded-md ${sidebarCollapsed && !isMobile
-                      sidebarCollapsed && !isMobile 
                         ? 'px-3 py-2 justify-center min-h-9'
                         : isMobileOrTablet
                           ? 'px-4 py-2.5 min-h-10'
                           : 'px-3 py-2 min-h-9'
-                    } ${
+                      } ${active
-                      active
                         ? 'bg-blue-50 text-blue-700 border-r-2 border-blue-600'
                         : 'text-gray-700'
                       }`}
                     title={sidebarCollapsed && !isMobile ? item.label : undefined}
                     onClick={handleMenuClick}
                   >
-                    <Icon className={`${
+                    <Icon className={`${isMobile ? 'h-5 w-5' :
-                      isMobile ? 'h-5 w-5' : 
                         isTablet ? 'h-6 w-6' :
                           'h-5 w-5'
-                    } ${
+                      } ${active ? 'text-blue-700' : 'text-gray-600'
-                      active ? 'text-blue-700' : 'text-gray-600'
                       } ${sidebarCollapsed && !isMobile ? '' : 'mr-3'}`} />
                     {(!sidebarCollapsed || isMobile) && (
                       <span className={`${isMobileOrTablet ? 'text-base' : 'text-[15px]'} font-medium`}>
@@ -870,7 +861,7 @@ export default function Sidebar() {
       </Dialog>
 
       {/* Modal d'attente */}
-      <Dialog open={showWaitingModal} onOpenChange={() => {}}>
+      <Dialog open={showWaitingModal} onOpenChange={() => { }}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">