yazan/car_mms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo2

Browse Source
This commit is contained in:
yznahmad
2026-03-08 14:27:16 +03:00
parent 66c151653e
commit 11b58b68c3
22 changed files with 4652 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
app/components/layout/DashboardLayout.tsx
View File

@@ -4,6 +4,7 @@ import { Sidebar } from './Sidebar';
import { Container } from './Container';
import { Flex } from './Flex';
import { Text, Button } from '../ui';
import { designTokens } from '~/lib/design-tokens';
interface DashboardLayoutProps {
children: ReactNode;
@@ -12,20 +13,29 @@ interface DashboardLayoutProps {
name: string;
authLevel: number;
};
title?: string; // Optional page title for mobile header
}
export function DashboardLayout({ children, user }: DashboardLayoutProps) {
export function DashboardLayout({ children, user, title }: DashboardLayoutProps) {
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [isClient, setIsClient] = useState(false);
// Set client-side flag
useEffect(() => {
setIsClient(true);
}, []);
// Handle responsive behavior
useEffect(() => {
if (!isClient) return;
const checkMobile = () => {
const mobile = window.innerWidth < 768;
const mobile = window.innerWidth < 768; // md breakpoint
setIsMobile(mobile);
// Auto-collapse sidebar on mobile
// Auto-collapse sidebar on mobile and tablet
if (mobile) {
setSidebarCollapsed(true);
}
@@ -35,15 +45,17 @@ export function DashboardLayout({ children, user }: DashboardLayoutProps) {
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
}, [isClient]);
// Load sidebar state from localStorage
useEffect(() => {
if (!isClient) return;
const savedState = localStorage.getItem('sidebarCollapsed');
if (savedState !== null && !isMobile) {
setSidebarCollapsed(JSON.parse(savedState));
}
}, [isMobile]);
}, [isMobile, isClient]);
// Save sidebar state to localStorage
const handleSidebarToggle = () => {
@@ -84,66 +96,87 @@ export function DashboardLayout({ children, user }: DashboardLayoutProps) {
/>
{/* Main Content */}
<div className={`
flex-1 min-h-screen transition-all duration-300 ease-in-out
${!isMobile ? (sidebarCollapsed ? 'mr-16' : 'mr-64') : 'mr-0'}
`}>
<div
className="flex-1 min-h-screen transition-all duration-300 ease-out"
style={{
marginRight: isClient ? (isMobile ? '0' : (sidebarCollapsed ? '4rem' : '16rem')) : '16rem'
}}
>
{/* Header */}
<div className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-10">
<header
className="bg-white shadow-sm border-b border-gray-200 sticky top-0"
style={{ zIndex: designTokens.zIndex.header }}
>
<div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-4">
{/* Mobile menu button and title */}
<div className="flex items-center gap-4">
{isMobile && (
<button
onClick={() => setMobileMenuOpen(true)}
className="p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
<div className="flex justify-between items-center h-16">
{/* Mobile menu button and title - Always render, hide with CSS */}
<div className="flex items-center gap-3 md:gap-4">
<button
onClick={() => setMobileMenuOpen(true)}
className="md:hidden p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
aria-label="فتح القائمة"
aria-expanded={mobileMenuOpen}
>
<svg
className="h-6 w-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<svg
className="h-6 w-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
)}
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
{/* Page title - only show on mobile when sidebar is closed */}
{isMobile && (
<h1 className="text-lg font-semibold text-gray-900">
لوحة التحكم
</h1>
)}
{/* Page title - show on mobile */}
<h1 className="text-base font-bold text-gray-900 md:hidden">
{title || 'لوحة التحكم'}
</h1>
</div>
{/* User info and actions */}
<div className="flex items-center gap-4">
<div className="text-right">
<div className="text-sm text-gray-600">
مرحباً، <span className="font-medium text-gray-900">{user.name}</span>
<div className="flex items-center gap-2 sm:gap-3 md:gap-4">
{/* Desktop: Full user info */}
<div className="hidden lg:block text-right">
<div className="text-sm font-medium text-gray-900">
مرحباً، {user.name}
</div>
<div className="text-xs text-gray-500">
{getAuthLevelText(user.authLevel)}
</div>
</div>
{/* Tablet: Name only */}
<div className="hidden md:block lg:hidden text-right">
<div className="text-sm font-medium text-gray-900">
{user.name}
</div>
</div>
{/* Mobile: Compact display */}
<div className="md:hidden text-right">
<div className="text-xs font-medium text-gray-900">
{user.name}
</div>
</div>
<Form action="/logout" method="post">
<button
type="submit"
className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-150"
className="inline-flex items-center px-2.5 py-1.5 sm:px-3 sm:py-2 border border-transparent text-xs sm:text-sm leading-4 font-medium rounded-lg text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-150"
aria-label="تسجيل الخروج"
>
<svg
className="h-4 w-4 mr-1"
className="h-4 w-4 sm:mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
@@ -152,16 +185,16 @@ export function DashboardLayout({ children, user }: DashboardLayoutProps) {
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
خروج
<span className="hidden sm:inline">خروج</span>
</button>
</Form>
</div>
</div>
</div>
</div>
</header>
{/* Page Content */}
<main className="flex-1 p-6">
<main className="flex-1 p-4 sm:p-5 md:p-6 lg:p-8">
{children}
</main>
</div>