Reduce vertical spacing within the sidebar navigation elements

Adjust padding and margin values in Sidebar.tsx to decrease vertical space between navigation items and sections.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1e4433b5-47ab-464c-b663-fea2e53367dd
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4b811e9d-0853-4094-95a1-246dfe207fec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/1e4433b5-47ab-464c-b663-fea2e53367dd/oKSi9br
This commit is contained in:
michaelschal committed 2025-11-04 13:23:36 +00:00
1 parent 7512cee938
commit 6e4f0289f3
1 file changed
+18 -18
+18 -18
View File
@@ -578,29 +578,29 @@ export default function Sidebar() {
</div> </div>
{/* Navigation */} {/* Navigation */}
<nav className="flex-1 py-5 px-3 overflow-y-auto"> <nav className="flex-1 py-2 px-3 overflow-y-hidden">
<div className="space-y-7"> <div className="space-y-3">
{menuSections.map((section, sectionIndex) => { {menuSections.map((section, sectionIndex) => {
// Vérifier si au moins un item de la section est accessible // Vérifier si au moins un item de la section est accessible
const hasAccessibleItems = section.items.some(item => hasPermission(item.roles)); const hasAccessibleItems = section.items.some(item => hasPermission(item.roles));
if (!hasAccessibleItems) return null; if (!hasAccessibleItems) return null;
return ( return (
<div key={section.title} className="space-y-3"> <div key={section.title} className="space-y-1">
{/* Titre de section - caché en mode collapsed */} {/* Titre de section - caché en mode collapsed */}
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<h3 className="px-3 mb-3 text-[11px] font-bold text-gray-500 uppercase tracking-widest"> <h3 className="px-3 mb-1 text-[11px] font-bold text-gray-500 uppercase tracking-widest">
{section.title} {section.title}
</h3> </h3>
)} )}
{/* Séparateur visuel en mode collapsed */} {/* Séparateur visuel en mode collapsed */}
{sidebarCollapsed && sectionIndex > 0 && ( {sidebarCollapsed && sectionIndex > 0 && (
<div className="border-t border-gray-200 my-4"></div> <div className="border-t border-gray-200 my-2"></div>
)} )}
{/* Items du menu */} {/* Items du menu */}
<div className="space-y-1.5"> <div className="space-y-0.5">
{section.items.map((item) => { {section.items.map((item) => {
const hasRolePermission = hasPermission(item.roles); const hasRolePermission = hasPermission(item.roles);
@@ -615,10 +615,10 @@ export default function Sidebar() {
className={`flex items-center transition-colors hover:bg-gray-100 rounded-md ${ className={`flex items-center transition-colors hover:bg-gray-100 rounded-md ${
// Espacement adaptatif selon l'écran et l'état // Espacement adaptatif selon l'écran et l'état
sidebarCollapsed && !isMobile sidebarCollapsed && !isMobile
? 'px-3 py-3 justify-center min-h-11' ? 'px-3 py-2 justify-center min-h-9'
: isMobileOrTablet : isMobileOrTablet
? 'px-4 py-3.5 min-h-12' ? 'px-4 py-2.5 min-h-10'
: 'px-3 py-3 min-h-11' : 'px-3 py-2 min-h-9'
} ${ } ${
active active
? 'bg-blue-50 text-blue-700 border-r-2 border-blue-600' ? 'bg-blue-50 text-blue-700 border-r-2 border-blue-600'
@@ -653,15 +653,15 @@ export default function Sidebar() {
{/* Administration Section */} {/* Administration Section */}
{adminItems.some(item => hasPermission(item.roles)) && ( {adminItems.some(item => hasPermission(item.roles)) && (
<div className="border-t border-gray-200 py-5 px-3"> <div className="border-t border-gray-200 py-2 px-3">
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<div className="mb-3"> <div className="mb-1">
<h3 className="px-3 text-[11px] font-bold text-gray-500 uppercase tracking-widest"> <h3 className="px-3 text-[11px] font-bold text-gray-500 uppercase tracking-widest">
Administration Administration
</h3> </h3>
</div> </div>
)} )}
<div className="space-y-1.5"> <div className="space-y-0.5">
{adminItems.map((item) => { {adminItems.map((item) => {
if (!hasPermission(item.roles)) return null; if (!hasPermission(item.roles)) return null;
@@ -674,10 +674,10 @@ export default function Sidebar() {
<div <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-3 justify-center min-h-11' ? 'px-3 py-2 justify-center min-h-9'
: isMobileOrTablet : isMobileOrTablet
? 'px-4 py-3.5 min-h-12' ? 'px-4 py-2.5 min-h-10'
: 'px-3 py-3 min-h-11' : 'px-3 py-2 min-h-9'
} text-gray-700`} } text-gray-700`}
title={sidebarCollapsed && !isMobile ? item.label : undefined} title={sidebarCollapsed && !isMobile ? item.label : undefined}
onClick={() => { onClick={() => {
@@ -705,10 +705,10 @@ export default function Sidebar() {
<div <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-3 justify-center min-h-11' ? 'px-3 py-2 justify-center min-h-9'
: isMobileOrTablet : isMobileOrTablet
? 'px-4 py-3.5 min-h-12' ? 'px-4 py-2.5 min-h-10'
: 'px-3 py-3 min-h-11' : 'px-3 py-2 min-h-9'
} ${ } ${
active active
? 'bg-blue-50 text-blue-700 border-r-2 border-blue-600' ? 'bg-blue-50 text-blue-700 border-r-2 border-blue-600'