Feature/navbar header

[pujitakalinadhabhotla]

Description

Implemented the admin dashboard Sidebar and Header components based on the latest Figma designs. There are a few differences between what is on the screenshot of the ticket and what is on the Figma but I followed the Figma Hi-Fi

Changes Made

• Frontend changes

• Created Sidebar component with:
  Navigation items (Dashboard Overview, Donation Tracker, Email Communication, Admin Approval, Settings)

• Created Header component with:
  Page title ("Dashboard Overview") and User profile section (avatar + name + role)

• Added temporary tester routes:
  /sidebar-test
  /header-test

Testing & Verification

• Manual testing completed
• No breaking changes

Screenshots (if relevant)

Future Improvements/Notes

• Dynamically change menu item based on which user is logged in

Related Issues

Closes #90

[thaninbew]

Great work!

In the interest of time, I made a couple of changes:

• SVG files were a fine choice for generic icons but because we are already using a component library (react-lucide), I opted with react-lucide icons and removed the SVGs. Note that design uses shadcn components (which are react-lucide anyway..) in Figma.

• i updated the sidebar to use useLocation from react-router-dom to automatically detect the active route based on the current URL path. it wilkl ensure that the correct navigation item remains highlighted after page refreshes or when deep-linking directly to a specific dashboard page. This is just future proofing for edge cases where we reload or share; the sidebar's highlighting should still be consistent.

• out of ticket scope but I implemented dynamic username and role in the visible profile.