Implement main view sidebar

frontend/src/main-page/MainPage.tsx

@@ -1,26 +1,30 @@
 import { Routes, Route } from "react-router-dom";
 import Dashboard from "./dashboard/Dashboard";
 import GrantPage from "./grants/GrantPage";
-import Header from "./header/Header";
+import NavBar from "./navbar/NavBar";
 import Users from "./users/Users";
 import RestrictedPage from "./restricted/RestrictedPage";
-
+import CashFlowPage from "./cash-flow/CashFlowPage";
+import SettingsPage from "./settings/SettingsPage";
 
 function MainPage() {
-
 
   return (
-    <div className="w-full">
-      <Header />
+    <div className="w-full h-screen flex flex-row">
+      <NavBar/>
+      <div className="flex-1 overflow-auto">
       <Routes>
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/all-grants" element={<GrantPage showOnlyMyGrants={false} />} />
         <Route path="/my-grants" element={<GrantPage showOnlyMyGrants={true} />} /> 
         <Route path="/users" element={<Users />} />
         <Route path="/restricted" element={<RestrictedPage />} />
+        <Route path="/cash-flow" element={<CashFlowPage />} />
+        <Route path="/settings" element={<SettingsPage />} />
         {/* fallback route */}
         <Route path="*" element={<GrantPage />} />
       </Routes>
+      </div>
     </div>
   );
 }

frontend/src/main-page/cash-flow/CashFlowPage.tsx

@@ -0,0 +1,10 @@
+function CashFlowPage() {
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">PLACEHOLDER</h1>
+      {/* Add more content and components related to cash flow here */}
+    </div>
+  );
+}
+
+export default CashFlowPage;

frontend/src/main-page/grants/GrantPage.tsx

@@ -20,6 +20,7 @@ import { toJS } from "mobx";
 import { fetchGrants } from "./filter-bar/processGrantData.ts";
 import { UserStatus } from "../../../../middle-layer/types/UserStatus.ts";
 import { Navigate } from "react-router-dom";
+import BellButton from "../navbar/Bell.tsx";
 
 interface GrantPageProps {
   showOnlyMyGrants?: boolean; //if true, filters grants by user email
@@ -29,6 +30,7 @@ function GrantPage({ showOnlyMyGrants = false }: GrantPageProps) {
   const [showNewGrantModal, setShowNewGrantModal] = useState(false);
   const [wasGrantSubmitted, setWasGrantSubmitted] = useState(false);
   const [selectedGrant, setSelectedGrant] = useState<Grant | null>(null);
+  const [openModal, setOpenModal] = useState(false);
 
   const { user } = useAuthContext(); //gets current logged in user
   const userObj = toJS(user);
@@ -60,6 +62,9 @@ function GrantPage({ showOnlyMyGrants = false }: GrantPageProps) {
         <div className="flex justify-end align-middle p-4 gap-4">
           <GrantSearch />
           <AddGrantButton onClick={() => setShowNewGrantModal(true)} />
+          <div className="bell-container">
+            <BellButton setOpenModal={setOpenModal} openModal={openModal} />
+          </div>
         </div>
         <div className="grid grid-cols-5 gap-8 px-4">
           <div className="col-span-1">

frontend/src/main-page/header/Bell.tsx → frontend/src/main-page/navbar/Bell.tsx

@@ -13,8 +13,8 @@ import { api } from "../../api";
 
 interface BellButtonProps {
   // onClick handler to open notification popup
-  setOpenModal: (modal: string | null) => void;
-  openModal: string | null;
+  setOpenModal: (open: boolean) => void;
+  openModal: boolean;
 }
 
 const BellButton: React.FC<BellButtonProps> = observer(({ setOpenModal, openModal }) => {
@@ -38,7 +38,7 @@ const BellButton: React.FC<BellButtonProps> = observer(({ setOpenModal, openModa
     console.log(response);
     const currNotifications = await response.json();
     setNotificationsAction(currNotifications);
-    setOpenModal(openModal === "bell" ? null : "bell");
+    setOpenModal(!openModal);
     return notifications;
   };
 
@@ -48,7 +48,7 @@ const BellButton: React.FC<BellButtonProps> = observer(({ setOpenModal, openModa
         className="bell-wrapper inline-block relative p-2 hover:bg-primary-700 rounded-md"
       >
         <button
-          className={`bell-button ${openModal === "bell" ? "hovered" : ""} bg-none border-none relative`}
+          className={`bell-button ${openModal ? "hovered" : ""} bg-none border-none relative`}
           onClick={handleClick}
         >
           <FontAwesomeIcon
@@ -63,7 +63,7 @@ const BellButton: React.FC<BellButtonProps> = observer(({ setOpenModal, openModa
 
       </div>
 
-      {(openModal === "bell" ? (
+      {(openModal ? (
         <NotificationPopup
           setOpenModal={setOpenModal}
         />