247 lines
6.3 KiB
Markdown
247 lines
6.3 KiB
Markdown
# 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:
|
|
|
|
1. **Narrow icon-only sidebar** (80px width)
|
|
2. **Expands on hover** to show text labels (256px width)
|
|
3. **Navy background** matching Al Hammadi brand
|
|
4. **User profile & logout at bottom**
|
|
5. **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
|
|
|
|
```css
|
|
background: #005696; /* Al Hammadi Navy */
|
|
```
|
|
|
|
### 4. Active State
|
|
|
|
```css
|
|
.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
|
|
|
|
---
|
|
|
|
## Navigation Items
|
|
|
|
| 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
|
|
|
|
```css
|
|
.sidebar-icon-only {
|
|
width: 5rem;
|
|
transition: width 0.3s ease;
|
|
}
|
|
.sidebar-icon-only:hover {
|
|
width: 16rem;
|
|
}
|
|
```
|
|
|
|
### Text Opacity
|
|
|
|
```css
|
|
.sidebar-text {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.sidebar-icon-only:hover .sidebar-text {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
```
|
|
|
|
### Main Content Shift
|
|
|
|
```css
|
|
.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
|
|
|
|
```css
|
|
[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** ✅
|