# Responsive Behavior Diagram

Visual guide to understand how your application adapts across different screen sizes.

---

## 📱 Layout Behavior by Screen Size

```
┌─────────────────────────────────────────────────────────────────────┐
│                    MOBILE (320px - 767px)                           │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ┌───────────────────────────────────────────────────────────┐    │
│  │ ☰  لوحة التحكم                              أحمد  [خروج] │    │
│  │ Header (z-index: 50)                                      │    │
│  └───────────────────────────────────────────────────────────┘    │
│                                                                     │
│  ┌───────────────────────────────────────────────────────────┐    │
│  │                                                            │    │
│  │  Content Area (Full Width)                                │    │
│  │  - Single column grid                                     │    │
│  │  - Stacked cards                                          │    │
│  │  - Full-width buttons                                     │    │
│  │                                                            │    │
│  └───────────────────────────────────────────────────────────┘    │
│                                                                     │
│  When hamburger (☰) clicked:                                       │
│  ┌──────────────────────┐                                          │
│  │ [Overlay: 50% black] │  ┌────────────────────────┐             │
│  │                      │  │ نظام الصيانة      [×] │             │
│  │                      │  ├────────────────────────┤             │
│  │                      │  │ 📊 لوحة التحكم        │             │
│  │                      │  │ 👥 العملاء            │             │
│  │                      │  │ 🚗 المركبات           │             │
│  │                      │  │ 🔧 زيارات الصيانة     │             │
│  │                      │  │ 💰 المصروفات          │             │
│  │                      │  │ 📈 التقارير المالية   │             │
│  │                      │  │ 👤 إدارة المستخدمين   │             │
│  │                      │  │ ⚙️  إعدادات النظام     │             │
│  │                      │  └────────────────────────┘             │
│  │  (z-index: 45)       │  Sidebar (z-index: 40)                  │
│  └──────────────────────┘  Width: 320px (max 85vw)                │
│                             Slides in from right                    │
└─────────────────────────────────────────────────────────────────────┘


┌─────────────────────────────────────────────────────────────────────┐
│                    TABLET (768px - 1023px)                          │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ┌───────────────────────────────────────────────────────────┐    │
│  │ ☰  نظام الصيانة                        أحمد محمد  [خروج] │    │
│  │ Header (z-index: 50)                                      │    │
│  └───────────────────────────────────────────────────────────┘    │
│                                                                     │
│  ┌───────────────────────────────────────────────────────────┐    │
│  │                                                            │    │
│  │  Content Area (Full Width)                                │    │
│  │  - 2-3 column grids                                       │    │
│  │  - Side-by-side cards                                     │    │
│  │  - Inline buttons                                         │    │
│  │                                                            │    │
│  └───────────────────────────────────────────────────────────┘    │
│                                                                     │
│  Behavior: Same as mobile (overlay menu)                           │
│  Reason: Prevents sidebar from taking too much space               │
└─────────────────────────────────────────────────────────────────────┘


┌─────────────────────────────────────────────────────────────────────┐
│                  DESKTOP (1024px - 1279px)                          │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ┌──────────┬──────────────────────────────────────────────────┐  │
│  │ نظام     │  مرحباً، أحمد محمد                       [خروج] │  │
│  │ الصيانة  │  مدير عام                                       │  │
│  │    [<]   │  Header (z-index: 50)                            │  │
│  ├──────────┴──────────────────────────────────────────────────┤  │
│  │ 📊 لوحة  │                                                  │  │
│  │    التحكم│                                                  │  │
│  │          │  Content Area                                    │  │
│  │ 👥 العملاء│  - 3-4 column grids                             │  │
│  │          │  - Multi-column layouts                          │  │
│  │ 🚗 المركبات│  - Optimized spacing                            │  │
│  │          │                                                  │  │
│  │ 🔧 زيارات │                                                  │  │
│  │   الصيانة│                                                  │  │
│  │          │                                                  │  │
│  │ 💰 المصروفات│                                                 │  │
│  │          │                                                  │  │
│  │ 📈 التقارير│                                                 │  │
│  │   المالية│                                                  │  │
│  │          │                                                  │  │
│  │ 👤 إدارة  │                                                  │  │
│  │ المستخدمين│                                                  │  │
│  │          │                                                  │  │
│  │ ⚙️ إعدادات│                                                  │  │
│  │   النظام │                                                  │  │
│  │          │                                                  │  │
│  └──────────┴──────────────────────────────────────────────────┘  │
│  Sidebar: 256px (expanded)                                         │
│  Click [<] to collapse to 64px                                     │
└─────────────────────────────────────────────────────────────────────┘


┌─────────────────────────────────────────────────────────────────────┐
│            DESKTOP COLLAPSED (1024px+, Sidebar Collapsed)           │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ┌──┬────────────────────────────────────────────────────────────┐ │
│  │🏢│  مرحباً، أحمد محمد                                [خروج] │ │
│  │  │  مدير عام                                                │ │
│  │[>]│  Header (z-index: 50)                                    │ │
│  ├──┴────────────────────────────────────────────────────────────┤ │
│  │📊│                                                            │ │
│  │  │                                                            │ │
│  │👥│  Content Area (More Space)                                │ │
│  │  │  - 4-6 column grids possible                              │ │
│  │🚗│  - Maximum content width                                  │ │
│  │  │  - Optimal for data tables                                │ │
│  │🔧│                                                            │ │
│  │  │                                                            │ │
│  │💰│                                                            │ │
│  │  │                                                            │ │
│  │📈│                                                            │ │
│  │  │                                                            │ │
│  │👤│                                                            │ │
│  │  │                                                            │ │
│  │⚙️│                                                            │ │
│  │  │                                                            │ │
│  └──┴────────────────────────────────────────────────────────────┘ │
│  Sidebar: 64px (collapsed, icons only)                             │
│  Hover over icons shows tooltip                                    │
│  Click [>] to expand back to 256px                                 │
└─────────────────────────────────────────────────────────────────────┘


┌─────────────────────────────────────────────────────────────────────┐
│              ULTRA-WIDE (1920px+)                                   │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ┌──────────┬──────────────────────────────────────────────────┐  │
│  │ نظام     │  مرحباً، أحمد محمد بن علي                [خروج] │  │
│  │ الصيانة  │  مدير عام - المستوى 1                           │  │
│  │    [<]   │  Header (z-index: 50)                            │  │
│  ├──────────┴──────────────────────────────────────────────────┤  │
│  │ 📊 لوحة  │                                                  │  │
│  │    التحكم│                                                  │  │
│  │          │  Content Area (Max Width Container)              │  │
│  │ 👥 العملاء│  - Centered with max-width                       │  │
│  │          │  - 4-6 column grids                              │  │
│  │ 🚗 المركبات│  - Prevents content from being too wide         │  │
│  │          │  - Optimal reading width                         │  │
│  │ 🔧 زيارات │                                                  │  │
│  │   الصيانة│                                                  │  │
│  │          │                                                  │  │
│  │ 💰 المصروفات│                                                 │  │
│  │          │                                                  │  │
│  │ 📈 التقارير│                                                 │  │
│  │   المالية│                                                  │  │
│  │          │                                                  │  │
│  │ 👤 إدارة  │                                                  │  │
│  │ المستخدمين│                                                  │  │
│  │          │                                                  │  │
│  │ ⚙️ إعدادات│                                                  │  │
│  │   النظام │                                                  │  │
│  │          │                                                  │  │
│  └──────────┴──────────────────────────────────────────────────┘  │
│  Sidebar: 256px (expanded)                                         │
│  Content: Centered with comfortable max-width                      │
│  No layout breaks or overflow                                      │
└─────────────────────────────────────────────────────────────────────┘
```

---

## 🎯 Grid Behavior Examples

### Dashboard Stats Cards

```
Mobile (xs):
┌─────────────────┐
│   Card 1        │
├─────────────────┤
│   Card 2        │
├─────────────────┤
│   Card 3        │
├─────────────────┤
│   Card 4        │
└─────────────────┘
cols={{ xs: 1 }}

Tablet (sm):
┌─────────┬─────────┐
│ Card 1  │ Card 2  │
├─────────┼─────────┤
│ Card 3  │ Card 4  │
└─────────┴─────────┘
cols={{ sm: 2 }}

Desktop (lg):
┌────┬────┬────┬────┐
│ C1 │ C2 │ C3 │ C4 │
└────┴────┴────┴────┘
cols={{ lg: 4 }}

Usage:
<Grid cols={{ xs: 1, sm: 2, lg: 4 }} gap="md">
  <StatCard />
  <StatCard />
  <StatCard />
  <StatCard />
</Grid>
```

### Form Layout

```
Mobile (xs):
┌─────────────────┐
│   Name          │
├─────────────────┤
│   Email         │
├─────────────────┤
│   Phone         │
├─────────────────┤
│   Address       │
└─────────────────┘

Desktop (md):
┌─────────┬─────────┐
│  Name   │  Email  │
├─────────┼─────────┤
│  Phone  │ Address │
└─────────┴─────────┘

Usage:
<Grid cols={{ xs: 1, md: 2 }} gap="md">
  <FormField label="الاسم" />
  <FormField label="البريد" />
  <FormField label="الهاتف" />
  <FormField label="العنوان" />
</Grid>
```

---

## 🎨 Z-Index Layering

```
┌─────────────────────────────────────────┐
│  Toast Notifications (z-index: 70)     │  ← Highest
├─────────────────────────────────────────┤
│  Modals (z-index: 60)                  │
├─────────────────────────────────────────┤
│  Header (z-index: 50)                  │
├─────────────────────────────────────────┤
│  Overlay (z-index: 45)                 │
├─────────────────────────────────────────┤
│  Sidebar (z-index: 40)                 │
├─────────────────────────────────────────┤
│  Content (z-index: 0)                  │  ← Base
└─────────────────────────────────────────┘

This ensures:
✅ Modals appear above everything
✅ Header stays on top during scroll
✅ Overlay appears between sidebar and content
✅ No z-index conflicts
```

---

## 📱 Touch Target Sizes

```
Minimum Touch Target: 44x44px (WCAG Guidelines)

❌ Too Small:
┌──────┐
│ [×]  │  30x30px - Hard to tap
└──────┘

✅ Good:
┌──────────┐
│   [×]    │  44x44px - Easy to tap
└──────────┘

✅ Better:
┌────────────┐
│    [×]     │  48x48px - Very comfortable
└────────────┘

Implementation:
<button className="min-h-[44px] min-w-[44px] p-2">
  <Icon />
</button>
```

---

## 🔄 Sidebar Transition States

```
Desktop Sidebar Toggle Animation:

Expanded (256px)          Collapsing              Collapsed (64px)
┌──────────────┐         ┌────────┐              ┌──┐
│ نظام الصيانة │   →     │ نظام   │      →       │🏢│
│      [<]     │         │  [<]   │              │[>]│
├──────────────┤         ├────────┤              ├──┤
│ 📊 لوحة التحكم│         │ 📊 لوحة│              │📊│
│ 👥 العملاء   │         │ 👥 العم│              │👥│
│ 🚗 المركبات  │         │ 🚗 المر│              │🚗│
└──────────────┘         └────────┘              └──┘
   300ms transition with ease-out easing
   GPU-accelerated (transform: translateX)

Mobile Menu Animation:

Closed                   Opening                 Open
                        ┌──────────┐            ┌──────────────┐
                        │[Overlay] │            │  [Overlay]   │
                        │          │            │              │
                        │      ┌───┤            │  ┌───────────┤
                        │      │نظام│            │  │ نظام      │
                        │      │[×]│            │  │ الصيانة [×]│
                        │      ├───┤            │  ├───────────┤
                        │      │📊 │            │  │📊 لوحة    │
                        │      │👥 │            │  │👥 العملاء  │
                        │      └───┘            │  └───────────┘
   Slides in from right with overlay fade-in
   300ms transition with ease-out easing
```

---

## 🎯 Responsive Padding Scale

```
Component Padding by Screen Size:

Mobile (xs):     p-4  (16px)
┌────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓ Content  ▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓ │
└────────────────┘

Tablet (md):     p-5  (20px)
┌──────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓  Content   ▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└──────────────────┘

Desktop (lg):    p-6  (24px)
┌────────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓   Content    ▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└────────────────────┘

Large (xl):      p-8  (32px)
┌──────────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓    Content     ▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└──────────────────────┘

Usage:
<div className="p-4 sm:p-5 md:p-6 lg:p-8">
```

---

## 📐 Typography Scale

```
Heading 1:
Mobile:   text-xl     (20px)  ████████
Tablet:   text-2xl    (24px)  ██████████
Desktop:  text-3xl    (30px)  ████████████

Heading 2:
Mobile:   text-lg     (18px)  ██████
Tablet:   text-xl     (20px)  ████████
Desktop:  text-2xl    (24px)  ██████████

Body:
Mobile:   text-sm     (14px)  ████
Tablet:   text-base   (16px)  █████
Desktop:  text-base   (16px)  █████

Small:
Mobile:   text-xs     (12px)  ███
Tablet:   text-sm     (14px)  ████
Desktop:  text-sm     (14px)  ████
```

---

## 🎨 Color & Contrast

```
Background Colors:
┌─────────────────────────────────┐
│ bg-gray-50   (Very light gray)  │  ← Page background
├─────────────────────────────────┤
│ bg-white     (White)            │  ← Cards, sidebar
├─────────────────────────────────┤
│ bg-blue-50   (Light blue)       │  ← Active states
└─────────────────────────────────┘

Text Colors:
┌─────────────────────────────────┐
│ text-gray-900  (Almost black)   │  ← Primary text (4.5:1)
├─────────────────────────────────┤
│ text-gray-600  (Medium gray)    │  ← Secondary text (4.5:1)
├─────────────────────────────────┤
│ text-gray-500  (Light gray)     │  ← Tertiary text (4.5:1)
└─────────────────────────────────┘

All combinations meet WCAG AA standards (4.5:1 contrast ratio)
```

---

## 🚀 Performance Optimizations

```
Sidebar Animation:
✅ Uses transform (GPU-accelerated)
✅ Uses transition-transform
❌ Avoids animating width directly

Before (Slow):
.sidebar {
  width: 256px;
  transition: width 300ms;  ← CPU-intensive
}

After (Fast):
.sidebar {
  width: 256px;
  transform: translateX(0);
  transition: transform 300ms;  ← GPU-accelerated
}

Result: Smooth 60fps animations
```

---

## 📱 Breakpoint Decision Tree

```
Is viewport width < 768px?
├─ YES → Mobile Layout
│  ├─ Hamburger menu
│  ├─ Single column grids
│  ├─ Stacked buttons
│  └─ Compact header
│
└─ NO → Is viewport width < 1024px?
   ├─ YES → Tablet Layout
   │  ├─ Hamburger menu (like mobile)
   │  ├─ 2-3 column grids
   │  ├─ Inline buttons
   │  └─ Medium header
   │
   └─ NO → Desktop Layout
      ├─ Persistent sidebar
      ├─ 3-4+ column grids
      ├─ Full header
      └─ Collapsible sidebar option
```

---

**Use these diagrams as reference while implementing responsive design! 📐**