Michael/LogiFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/LogiFlow.git synced 2026-10-20 13:38:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #508 from R0m1k3/1.1

Browse Source 
Reduce vertical spacing within the sidebar navigation elements
This commit is contained in:
LogiFlow authored and GitHub committed 2025-11-04 14:24:53 +01:00
2 parents 35a346f1ca 6e4f0289f3
commit 4ef30bb045
1 file changed
+18 -18
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Sidebar.tsx
+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'