be3388cf58
- Replaced the Header component with a mobile-only hamburger menu in the AppShell for improved navigation on smaller screens. - Integrated user profile information directly into the Sidebar for better accessibility. - Removed the Settings link from the navigation to streamline the user experience. - Updated Sidebar and NotificationBell components to accommodate new user profile display logic.
79 lines
2.9 KiB
Markdown
79 lines
2.9 KiB
Markdown
# Portal Layout Redesign
|
|
|
|
**Date:** 2026-03-06
|
|
**Status:** Approved
|
|
|
|
## Problem
|
|
|
|
The portal has a double-header issue: a top Header bar (notifications + profile) and a PageLayout page header (title + actions) stack directly, creating two competing bars with different backgrounds and borders. The sidebar already provides navigation context, making the top header redundant.
|
|
|
|
## Decisions
|
|
|
|
1. **Remove the top Header bar entirely on desktop** -- sidebar handles everything
|
|
2. **Move profile into sidebar top** -- compact profile row below the logo
|
|
3. **Notification bell in the profile row** -- reuse existing NotificationBell component, styled for sidebar context
|
|
4. **PageLayout keeps subtle bg, drops the border** -- `bg-muted/40` stays, `border-b` removed
|
|
5. **Mobile keeps a thin hamburger-only bar** -- opens sidebar overlay with full nav + profile + notifications
|
|
|
|
## Design
|
|
|
|
### Sidebar Structure
|
|
|
|
```
|
|
+---------------------+
|
|
| Logo Assist Solns | Logo + brand
|
|
| Customer Portal |
|
|
| +--JD--John Doe--B+ | Profile row + bell icon with badge
|
|
+---------------------+
|
|
| Dashboard |
|
|
| Orders |
|
|
| Billing > |
|
|
| Subscriptions |
|
|
| Services |
|
|
| Support > |
|
|
| Settings |
|
|
+---------------------+
|
|
| Log out |
|
|
+---------------------+
|
|
```
|
|
|
|
- Profile row: avatar initials + display name (links to /account/settings) + notification bell with badge
|
|
- Bell icon uses existing NotificationBell component, restyled for white-on-dark sidebar
|
|
- Separator between profile area and nav list
|
|
|
|
### PageLayout
|
|
|
|
- Keep: `bg-muted/40` background on the title area
|
|
- Remove: `border-b border-border`
|
|
- All existing props stay: icon, title, description, actions, back link, status pill
|
|
- Content flows directly below without a hard line
|
|
|
|
### Mobile
|
|
|
|
- Thin top bar with hamburger + logo mark only
|
|
- Opens sidebar overlay (already exists) which contains profile + bell, full nav, logout
|
|
- No separate header elements on mobile
|
|
|
|
### AppShell Main Content
|
|
|
|
- Desktop: no header, content starts immediately with `<main>`
|
|
- Mobile: thin hamburger bar above `<main>`
|
|
|
|
## Files to Change
|
|
|
|
| File | Change |
|
|
| ---------------- | ------------------------------------------------------------ |
|
|
| `AppShell.tsx` | Remove `<Header>` on desktop, keep mobile-only hamburger bar |
|
|
| `Header.tsx` | Simplify to mobile-only hamburger, or inline into AppShell |
|
|
| `Sidebar.tsx` | Add profile row with bell below logo |
|
|
| `PageLayout.tsx` | Remove `border-b border-border` from page header |
|
|
|
|
## What Stays the Same
|
|
|
|
- Sidebar colors, width (220px), collapse behavior
|
|
- All page content structure
|
|
- Mobile sidebar overlay animation
|
|
- Auth flow, prefetching, sidebar expansion persistence
|
|
- All existing PageLayout props and usage patterns
|
|
- NotificationBell component logic (just restyled)
|