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

Improve layout responsiveness and remove duplicate scrollbars

Browse Source 
Refactor layout and sidebar components to enhance responsiveness across devices and eliminate redundant scrollbars, adjusting padding and margins for a cleaner UI.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cc8ba926-557c-4bf1-a2ea-ceabbcf38824
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc8ba926-557c-4bf1-a2ea-ceabbcf38824/Msc3nwI
This commit is contained in:
michaelschal committed 2025-08-12 20:01:08 +00:00
1 parent 1933819155
commit d647925394
7 files changed
+23 -19
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/Layout.tsx
+5 -9
View File
@@ -91,10 +91,10 @@ export default function Layout({ children }: LayoutProps) {
{!isMobile && <Sidebar />}
<main className={`flex-1 flex flex-col overflow-hidden ${
isMobile ? 'ml-0' : sidebarCollapsed ? 'ml-16' : 'ml-72 xl:ml-80'
isMobile ? 'ml-0' : sidebarCollapsed ? 'ml-16' : 'ml-64'
}`}>
{/* Header with store selector for admin */}
<header className="h-20 xl:h-24 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-6 sm:px-8 xl:px-12">
<header className="h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-6">
<div className="flex items-center gap-4">
{/* Mobile menu button */}
{isMobile && (
@@ -107,7 +107,7 @@ export default function Layout({ children }: LayoutProps) {
{mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</Button>
)}
<h1 className="text-xl xl:text-2xl font-semibold text-gray-800 dark:text-gray-200">LogiFlow</h1>
<h1 className="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-200">LogiFlow</h1>
</div>
{/* Store selector for admin - moved to top right */}
@@ -168,12 +168,8 @@ export default function Layout({ children }: LayoutProps) {
</header>
{/* Main content area */}
<div className="flex-1 bg-gray-50 dark:bg-gray-900 p-6 sm:p-8 xl:p-12 overflow-y-auto">
<div className="container-responsive">
<div className="desktop-spacing">
{children}
</div>
</div>
<div className="flex-1 bg-gray-50 dark:bg-gray-900 overflow-hidden">
{children}
</div>
</main>
client/src/components/Sidebar.tsx
+6 -6
View File
@@ -259,13 +259,13 @@ export default function Sidebar() {
}
return (
<aside className={`${isCollapsed ? 'w-16' : 'w-72 xl:w-80'} bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col shadow-xl transition-all duration-300 ease-in-out`}>
<aside className={`${isCollapsed ? 'w-16' : 'w-64'} bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col shadow-lg transition-all duration-300 ease-in-out`}>
{/* Logo et bouton de collapse */}
<div className="h-20 xl:h-24 flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 xl:px-6">
<div className="h-16 flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4">
{!isCollapsed && (
<div className="flex items-center space-x-3">
<Store className="h-6 w-6 text-blue-600 dark:text-blue-400" />
<span className="text-xl xl:text-2xl font-bold text-gray-900 dark:text-gray-100">LogiFlow</span>
<span className="text-lg font-bold text-gray-900 dark:text-gray-100">LogiFlow</span>
</div>
)}
{isCollapsed && (
@@ -290,8 +290,8 @@ export default function Sidebar() {
</div>
{/* Navigation */}
<nav className="flex-1 py-6 xl:py-8 px-4 xl:px-6">
<div className="space-y-2 xl:space-y-3">
<nav className="flex-1 py-4 px-4 overflow-y-auto">
<div className="space-y-1">
{menuItems.map((item) => {
const hasRolePermission = hasPermission(item.roles);
// console.log(`🔍 Menu item ${item.path} (${item.label}):`, {
@@ -374,7 +374,7 @@ export default function Sidebar() {
</h3>
</div>
)}
<div className="space-y-2 xl:space-y-3">
<div className="space-y-1">
{adminItems.map((item) => {
if (!hasPermission(item.roles)) return null;