NavBar extended middleware

admin-portal-frontend/package.json

@@ -19,7 +19,8 @@
     "next": "14.1.4",
     "react": "^18",
     "react-bootstrap": "^2.10.2",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/node": "^20",

admin-portal-frontend/src/app/RightArrowComponent.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+
+const RightArrowComponent: FC = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="23" height="24" viewBox="0 0 23 24" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.01513 17.3372C8.6486 16.9706 8.6486 16.3764 9.01513 16.0099L13.0442 11.9808L9.01513 7.95179C8.6486 7.58527 8.6486 6.99102 9.01513 6.6245C9.38165 6.25798 9.9759 6.25798 10.3424 6.6245L15.0351 11.3172C15.4016 11.6837 15.4016 12.278 15.0351 12.6445L10.3424 17.3372C9.9759 17.7037 9.38165 17.7037 9.01513 17.3372Z" fill="black"/>
+  </svg>
+);
+
+export default RightArrowComponent;
+
+

admin-portal-frontend/src/app/api/categories.tsx

@@ -0,0 +1,26 @@
+export interface CategoriesData {
+    title: string;
+    items: [],
+    type: String
+  }
+
+  const port = process.env.DEV_PORT || 3001;
+  const CATEGORIES_URL = `http://localhost:${port}/api/categories`;
+
+  export const getAllCategories = async () => {
+    try {
+      const response = await fetch(CATEGORIES_URL, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      let data = await response.json();
+      data = data.categories;
+      console.log(data);
+      return data;
+    } catch (error) {
+      console.log(error)
+      return [];
+    }
+  };

admin-portal-frontend/src/app/components/BlankPageComponent.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+interface Props {
+    category?: string;
+  }
+
+const BlankPageComponent: FC<Props> = ({ category }) => {
+    return (
+        <div>
+            <p>This is the blank page </p>
+        </div>
+    );
+};
+
+export default BlankPageComponent;

admin-portal-frontend/src/app/components/VerticalNavBar.tsx

@@ -2,14 +2,15 @@
 
 import styles from './VerticalNavBarStyles';
 import HomeComponent from './HomeComponent';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import Accordion from 'react-bootstrap/Accordion';
 import 'bootstrap/dist/css/bootstrap.css';
 import { Card } from 'react-bootstrap';
 import GpComponent from './GPComponent';
 import SearchComponent from './SearchComponent';
+import { getAllCategories } from '../api/categories';
+import { NavLink } from 'react-router-dom';
 
-
   const VerticalNavBar: React.FC = () => {
 
       interface CustomAccordionProps {
@@ -26,6 +27,24 @@ import SearchComponent from './SearchComponent';
         );
       }
 
+      interface Category {
+        _id: string;
+        title: String;
+        items: [];
+        type: String;
+      }
+
+      const [items, setItems] = useState<Category[]>([]);
+      useEffect(() => {
+        (async () => {
+          const categories = await getAllCategories();
+          setItems(categories);
+        })();
+      }, []);
+
+      const generalPrinciples = items.filter(category => category.type === 'General Principle');
+
+
     return (
 
 
@@ -82,19 +101,19 @@ import SearchComponent from './SearchComponent';
               </div>
             </Accordion.Header>
             <Accordion.Body>
-            <ul style={{ listStyleType: 'none' }}>
-              <li style={styles.listItem}>All</li>
-              <li style={styles.listItem}>Emergency Action Plan</li>
-              <li style={styles.listItem}>Trauma Centers</li>
-              <li style={styles.listItem}>Burn Centers</li>
-              <li style={styles.listItem}>Stroke Centers</li>
-              <li style={styles.listItem}>Serious On-Field Injury</li>
-              <li style={styles.listItem}>Catastrophic Incident</li>
-              <li style={styles.listItem}>Adminstering Medication</li>
-              <li style={styles.listItem}>Muscle Injuries</li>
-              <li style={styles.listItem}>Ligament Injuries</li>
-              <li style={styles.listItem}>Dislocations/Sublaxations</li>
-              <li style={styles.listItem}>Fractures</li>
+
+            <ul>
+              {generalPrinciples.map(category => (
+                <li style={styles.listItem} key={category._id}>
+                  <NavLink to={`/category/${category._id}`} style={({ isActive }) => {
+                    return {
+                      textDecoration: 'none',
+                      fontWeight: isActive ? "bold" : "",
+                      color: isActive ? "var(--DFM-Navy, #182B49)" : "var(--Neutral-Gray6, #484848)",
+                    };
+                }} className="active">{category.title}</NavLink>
+                              </li>
+                ))}
             </ul>
 
             </Accordion.Body>
@@ -110,5 +129,6 @@ import SearchComponent from './SearchComponent';
       </div>
     );
   };
+
 
   export default VerticalNavBar;

admin-portal-frontend/src/app/page.tsx

@@ -1,15 +1,28 @@
+'use client'
 import HorizontalNavBar from './components/HorizontalNavbar'
-import React from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import VerticalNavBar from './components/VerticalNavBar';
 import styles from './pageStyles'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import BlankPageComponent from './components/BlankPageComponent';
 
 const AnotherPage: React.FC = () => {
-
   return (
     <div>
-      <div style={styles.verticalNavBar}>
-        <VerticalNavBar/>
-      </div>
+      <Router>
+        <div style={styles.verticalNavBar}>
+          <VerticalNavBar/>
+          <Routes>
+            <Route path="/category/:id" element={
+              <div style={styles.blankPage}>
+                <BlankPageComponent/>
+              </div>
+            } />
+          </Routes>
+        </div>
+
+
+      </Router>
       <div style={styles.horizontalNavBar}>
         <HorizontalNavBar />
       </div>

admin-portal-frontend/src/app/pageStyles.tsx

@@ -11,6 +11,14 @@ const styles = {
       zIndex: 1,
       position: 'absolute' as const
     },
+    blankPage: {
+      position: 'absolute' as const,
+      zIndex: 2,
+      backgroundColor: 'white',
+      top: '50vh',
+      left: '50vw',
+      bottom: '50vh',
+    },
   };
 
 export default styles;