Create Nav Bar Component #130
Description
User Story
As a dev, I want a reusable and flexible navigation bar component so I can use it across BRANCH pages and maintain consistent layout and behavior.
Description
This ticket creates the main navigation bar for the BRANCH frontend. The nav bar should be built as a reusable component using our design system (colors, typography) and should support role-based visibility for menu items (there are 3 different views), though this ticket only builds the layout and structure. Logic for showing/hiding items will be added in a separate ticket. The nav bar will appear on all pages, except login.
Acceptance Criteria
- Create the components folder in frontend/src/app if it does not exist
- Layout includes: BRANCH logo, Dashboard, Donors, Donation, Expenses, Reports, Accounts, Profile, Log Out (Admin Level)
- The component is responsive!
- Current page (active tab highlight)
- Add temporary rendering of NavBar to the Home Page to verify layout
- Write jest tests for your component (.test.tsx)
- Matches Figma structure (spacing, alignment, typography, colors)
Dependencies
- Design System: Colors & Typography
References