marwan/HH

Fork 0

ismail 39b1dcb8c0 lots of updates

2026-02-22 08:35:53 +03:00

6.3 KiB

Raw Blame History

Sidebar Layout Update

Date: February 17, 2026
Status: ✅ Complete

Overview

The sidebar has been completely redesigned to match the complaint_list_temp.html template. The new design features:

Narrow icon-only sidebar (80px width)
Expands on hover to show text labels (256px width)
Navy background matching Al Hammadi brand
User profile & logout at bottom
No topbar - content starts immediately

Layout Changes

Before

┌─────────────┬────────────────────────────────────────┐
│             │  ┌──────────────────────────────────┐  │
│   SIDEBAR   │  │           TOPBAR                  │  │
│   (256px)   │  │  Search | Notifications | Profile │  │
│             │  └──────────────────────────────────┘  │
│  - Logo     │                                        │
│  - Text     │  ┌──────────────────────────────────┐  │
│  - Icons    │  │                                  │  │
│  - Submenus │  │        PAGE CONTENT              │  │
│             │  │                                  │  │
└─────────────┴────────────────────────────────────────┘

After

┌────────┬─────────────────────────────────────────────┐
│        │                                             │
│  NAVY  │                                             │
│ SIDEBAR│         PAGE CONTENT                        │
│(80px)  │         (starts at top)                     │
│        │                                             │
│  ┌──┐  │                                             │
│  │📊│  │                                             │
│  └──┘  │                                             │
│  ┌──┐  │                                             │
│  │📝│  │                                             │
│  └──┘  │                                             │
│        │                                             │
│  👤 ✕  │                                             │
└────────┴─────────────────────────────────────────────┘
     ↑
  Expands on hover to show text labels

Key Features

1. Narrow Icon-Only Design

Default width: 80px (5rem)
Shows only icons
Hover to expand and see text labels

2. Expand on Hover

Hover width: 256px (16rem)
Smooth CSS transition (0.3s)
Text labels fade in
Main content shifts to accommodate

3. Navy Background

background: #005696; /* Al Hammadi Navy */

4. Active State

.nav-item-active {
    background-color: rgba(255,255,255,0.1);
    border-left: 3px solid #fff;
}

5. User Profile at Bottom

Avatar with initials
User name and role (visible on hover)
Logout button
Click to expand profile menu

Icon	Label	URL
📊	Dashboard	Command Center
📝	Complaints	Complaint List
💬	Feedback	Feedback List
❤️	Appreciation	Appreciation List
📄	Surveys	Survey Instances
👥	Staff	Staff List
🩺	Physicians	Physician List
📈	Analytics	Analytics Dashboard
⚙️	Settings	Config (Admin only)

User Profile Section

┌─────────────────────┐
│ [AA]  John Doe   ✕ │  ← Click to expand
│       Admin         │
├─────────────────────┤
│ 👤 Profile          │  ← Dropdown menu
│ 🚪 Logout           │
└─────────────────────┘

CSS Transitions

Sidebar Width

.sidebar-icon-only {
    width: 5rem;
    transition: width 0.3s ease;
}
.sidebar-icon-only:hover {
    width: 16rem;
}

Text Opacity

.sidebar-text {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.sidebar-icon-only:hover .sidebar-text {
    opacity: 1;
    visibility: visible;
}

Main Content Shift

.main-content {
    margin-left: 5rem;
    transition: margin-left 0.3s ease;
}
#sidebar:hover ~ .main-content {
    margin-left: 16rem;
}

Files Modified

templates/layouts/
├── base.html              # Removed topbar, updated margins
└── partials/
    └── sidebar.html       # Complete redesign

Removed Components

❌ Topbar (search, notifications, user dropdown)
❌ Breadcrumbs
❌ Wide sidebar with text labels
❌ Collapsible sidebar toggle button
❌ Submenu chevrons (visible on expand only)

Mobile Behavior

Sidebar hidden by default on mobile (< 1024px)
Floating toggle button (bottom right)
Full width when shown (256px)
Slide-in animation

Testing Checklist

Sidebar shows icons only by default
Sidebar expands on hover
Main content shifts when sidebar expands
Active page highlighted correctly
User profile shows at bottom
Profile menu expands on click
Logout button works
Mobile toggle button appears
Mobile sidebar slides in/out
No topbar visible
Content starts at top of page
All navigation links work
Badge counts show correctly

RTL Support

[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: 5rem;
}
[dir="rtl"] #sidebar {
    left: auto;
    right: 0;
}

Notes

Sidebar uses position: fixed to stay in place
Main content has overflow: hidden on container, overflow-y: auto on main
Hover effect works on desktop only
Mobile uses toggle button instead of hover
All text is translatable with {% trans %} tags

Implementation Complete ✅

6.3 KiB Raw Blame History