barsa be3388cf58 refactor: enhance AppShell layout and remove Header component

- 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.

2026-03-06 14:16:43 +09:00

2.9 KiB

Raw Blame History

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

Remove the top Header bar entirely on desktop -- sidebar handles everything
Move profile into sidebar top -- compact profile row below the logo
Notification bell in the profile row -- reuse existing NotificationBell component, styled for sidebar context
PageLayout keeps subtle bg, drops the border -- bg-muted/40 stays, border-b removed
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)

2.9 KiB Raw Blame History