Implement main view sidebar

[lyannne]

ℹ️ Issue

Closes #299

📝 Description

Write a short summary of what you added. Why is it important? Any member of C4C should be able to read this and understand your contribution -- not just your team members.

Briefly list the changes made to the code:

1. Edited Header.tsx component to now be NavBar.tsx with abstracted tab component NavTab.tsx
2. Removed old unused components UserButton.tsx and AccountInfo.tsx
3. Created placeholder pages for settings and cash flow.
4. I took a creative liberty with having pages you hover over have a gray background. If this looks ugly, I can change it!

✔️ Verification

What steps did you take to verify your changes work? These should be clear enough for someone to be able to clone the branch and follow the steps themselves.

Provide screenshots of any new components, styling changes, or pages.

Test Changes

If your new feature required some test to be changed or added to fit the new functionality or changes please document these changes here.

N/A

🏕️ (Optional) Future Work / Notes

• Since "My grants" is no longer an accessible page via nav bar, we need to add in that filtering functionality to the main grants page!
• Adding this side bar in squished the main content on most pages, so that needs to be changed.
• There is an issue of being able to access pages when the user is not logged in through the url (for example, /main/dashboard even after user logs out). This issue is also in main, but I though I'd note it anyways.
• Icons don't match perfectly, but they were the best I could find with font awesome. If this is an issue, lmk!

[Copilot]

Pull request overview

This PR implements a sidebar navigation to replace the previous horizontal header navigation, as specified in issue #299. The changes transform the main navigation from a top header to a left sidebar, providing a more modern UI layout for the application.

Changes:

• Replaced the Header component with a new NavBar sidebar component, introducing a reusable NavTab abstraction for navigation items
• Removed unused components (UserButton, AccountInfo) that displayed user account information
• Added placeholder pages for Settings and Cash Flow features
• Updated notification modal state management from string-based to boolean for simplification
• Adjusted notification popup positioning to accommodate the new sidebar layout

Reviewed changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
frontend/src/main-page/MainPage.tsx	Updated layout to flexbox row with sidebar and scrollable content area
frontend/src/main-page/navbar/NavBar.tsx	New sidebar navigation component with admin-conditional Users tab
frontend/src/main-page/navbar/NavTab.tsx	Reusable navigation tab component with active state styling
frontend/src/main-page/navbar/Bell.tsx	Simplified modal state from string to boolean
frontend/src/main-page/navbar/styles/Header.css	Added CSS file (contains unused styles)
frontend/src/main-page/navbar/styles/AccountInfo.css	Added CSS file (not imported anywhere)
frontend/src/main-page/notifications/NotificationPopup.tsx	Updated to use boolean modal state
frontend/src/main-page/grants/GrantPage.tsx	Added BellButton component to page
frontend/src/main-page/settings/SettingsPage.tsx	New placeholder settings page
frontend/src/main-page/cash-flow/CashFlowPage.tsx	New placeholder cash flow page
frontend/src/main-page/header/Header.tsx	Deleted old header component
frontend/src/main-page/header/UserButton.tsx	Deleted unused user button component
frontend/src/main-page/header/AccountInfo.tsx	Deleted account info modal component
frontend/src/styles/notification.css	Adjusted notification popup positioning for sidebar layout

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.