Skip to content

[Frontend] Update Dashboard Layout with Role-Based Navigation #575

@mftee

Description

@mftee

Description:
Replace the "Navigation coming soon" placeholder in the dashboard layout with a real, functional sidebar navigation that shows different links depending on the user's role.

Update frontend/app/(dashboard)/layout.tsx.

Acceptance Criteria:

  • 'use client' directive (needs usePathname and auth store)
  • Navigation items by role:
    • Shipper / Admin: Dashboard, My Shipments, Create Shipment
    • Carrier: Dashboard, My Jobs, Marketplace
  • Active link detection: exact match for /dashboard; startsWith for all others
  • Active link styled with bg-primary/10 text-primary; inactive with text-muted-foreground hover:bg-accent hover:text-foreground
  • User footer at the bottom of the sidebar: avatar initials (first letter of first + last name), full name, role (capitalized), "Sign out" button
  • Sign out calls useAuthStore().logout()
  • No breaking changes to the overall flex min-h-screen layout structure

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions