# 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)