navbar admin mode

admin-portal-frontend/package.json

@@ -13,8 +13,12 @@
     "lint-check": "npm run check-git-hooks && eslint --cache --report-unused-disable-directives . && prettier --check ."
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "bootstrap": "^5.3.3",
     "next": "14.1.4",
     "react": "^18",
+    "react-bootstrap": "^2.10.2",
     "react-dom": "^18"
   },
   "devDependencies": {

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

@@ -0,0 +1,60 @@
+const HorizonalNavBarStyles = {
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: '#ffffff',
+        height: '72px',
+        padding: '0 22px',
+        boxShadow: '0px 1px 0px 0px #D9D9D9',
+      },
+      logoContainer: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+      logoBackground: {
+        width: '40px',
+        height: '40px',
+        backgroundColor: 'var(--DFM-Navy, #182B49)',
+        borderRadius: '3px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: '14px',
+      },
+      logoText: {
+        fontWeight: 'bold',
+        marginRight: '239px',
+      },
+      searchBarContainer: {
+        flex: 1,
+        display: 'flex',
+        justifyContent: 'center',
+        marginLeft: '50vh',
+        marginRight: '50vh',
+      },
+      profileContainer: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+      profileBackground: {
+        width: '40px',
+        height: '40px',
+        backgroundColor: '#00629B',
+        borderRadius: '4.683px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: '14px',
+      },
+      profileLogoText: {
+        fontWeight: 'bold',
+        color:'#FFFFFF' 
+      },
+      profileText: {
+        fontWeight: 'bold',
+      },
+  };
+
+  export default HorizonalNavBarStyles;
+

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

@@ -0,0 +1,42 @@
+'use client'
+
+import React from 'react';
+import SearchBar from './SearchBar';
+import Image from 'next/image';
+import IconSearch from './icons/ic_search.png';
+import styles from './HorizontalNavBarStyles'
+
+const HorizontalNavBar: React.FC = () => {
+    return (
+        <div style={styles.container}>
+
+            <div style={styles.logoContainer}>
+                <div style={styles.logoBackground}>
+                    <Image
+                        src={IconSearch}
+                        alt="Image"
+                        width={18}
+                        height={18}
+                        style={{ filter: 'invert(100%)' }}
+                    />
+                </div>
+                <span style={styles.logoText}>Sideline Sidekick</span>
+            </div>
+
+
+            <div style={styles.searchBarContainer}>
+                <SearchBar onClear={() => {}} />
+            </div>
+
+            <div style={styles.profileContainer}>
+                <div style={styles.profileBackground}>
+                    <span style={styles.profileLogoText}>PN</span>
+                </div>
+                <span style={styles.profileText}>Profile Name</span>
+            </div>
+        </div>
+    );
+};
+
+export default HorizontalNavBar;
+

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './searchbarStyles';
+import searchIcon from './icons/ic_search_grey.png'
+import Image from 'next/image';
+
+interface SearchBarProps {
+  onClear: () => void;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ onClear }) => {
+  return (
+    <div>
+      <div style={styles.searchSection}>
+        <div>
+            <Image src={searchIcon} alt="Search" style={styles.searchIcon} />
+        </div>
+              <input
+          style={styles.input}
+          type="text"
+          placeholder="Search"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;

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

@@ -0,0 +1,29 @@
+const styles = {
+  searchSection: {
+    display: 'flex',
+    flex: 1,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: '9.367px',
+    border: '0.937px solid var(--Neutral-Gray2, #D8D8D8)',
+    background: 'var(--Neutral-Gray0, #F3F3F3)',
+    height: '46px',
+    width: '561px'
+  },
+  input: {
+    flex: 1,
+    color: '#424242',
+    background: 'var(--Neutral-Gray0, #F3F3F3)',
+    font: 'Roboto',
+    fontSize: '14.987px'
+  },
+  searchIcon: {
+    marginRight: '10px',
+    marginLeft: '15px',
+    height: '17.733px',
+    width: '18.733px',
+
+  },
+};
+
+export default styles;

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

@@ -0,0 +1,114 @@
+'use client'
+
+import styles from './VerticalNavBarStyles';
+import profileIcon from './Profile Icon.png'
+import React, { ReactNode } from 'react';
+import Accordion from 'react-bootstrap/Accordion';
+import 'bootstrap/dist/css/bootstrap.css';
+import Image from 'next/image';
+import homeIcon from './icons/Home.png'
+import searchIcon from './icons/ic_search.png'
+import gpIcon from './icons/gen principles.png'
+import { Card, useAccordionButton } from 'react-bootstrap';
+
+
+  const VerticalNavBar: React.FC = () => {
+
+      interface CustomAccordionProps {
+        eventKey: string;
+        children: ReactNode;
+      }
+
+      const CustomAccordion = ({ eventKey, children }: CustomAccordionProps) => {
+        const decoratedOnClick = useAccordionButton(eventKey, () => {});
+
+        return (
+          <div onClick={decoratedOnClick}>
+            {children}
+          </div>
+        );
+      }
+
+    return (
+
+
+      <div style={styles.container}>
+        <nav style={styles.nav}>
+        <div>
+      </div>
+
+
+
+      <div style={styles.accordionContainer}>
+
+        <Accordion defaultActiveKey="0">
+          <a href="#homepagelink" style={{ textDecoration: 'none' }}>
+            <Card style={{ border: 'none', borderBottom: 'none'}}>
+              <Card.Header style={styles.cardHeader}>
+                <CustomAccordion eventKey="0">
+                  <div style={styles.firstCarDiv}>
+                    <div style={styles.image}>
+                      <Image src={homeIcon} alt={'Home'} style={styles.homeIcon} />
+                    </div>
+                    Home
+                  </div>
+                </CustomAccordion>
+              </Card.Header>
+            </Card>
+          </a>
+
+          <Accordion.Item eventKey="1" style={{ border: 'none'}}>
+            <Accordion.Header>
+              <div style={styles.cardDivs}>
+                <div style={styles.image}>
+                  <Image src={searchIcon} alt={'Search'} style={styles.searchIcon} />
+                </div>
+                Search
+              </div>
+            </Accordion.Header>
+            <Accordion.Body>
+                <ul>
+                  <li>All</li>
+                  <li>By Category</li>
+                </ul>
+            </Accordion.Body>
+          </Accordion.Item>
+          <Accordion.Item eventKey="2" style={{ border: 'none'}}>
+            <Accordion.Header>
+              <div style={styles.cardDivs}>
+                <div style={styles.image}>
+                  <Image src={gpIcon} alt={'General Principles'} style={styles.gpIcon} />
+                </div>
+                General Principles
+              </div>
+            </Accordion.Header>
+            <Accordion.Body>
+                <ul>
+                  <li>All</li>
+                  <li>Emergency Action Plan</li>
+                  <li>Trauma Centers</li>
+                  <li>Burn Centers</li>
+                  <li>Stroke Centers</li>
+                  <li>Serious On-Field Injury</li>
+                  <li>Catastrophic Incident</li>
+                  <li>Adminstering Medication</li>
+                  <li>Muscle Injuries</li>
+                  <li>Ligament Injuries</li>
+                  <li>Dislocations/Sublaxations</li>
+                  <li>Fractures</li>
+                </ul>
+            </Accordion.Body>
+          </Accordion.Item>
+        </Accordion>
+      </div>
+
+
+
+
+        </nav>
+
+      </div>
+    );
+  };
+
+  export default VerticalNavBar;

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

@@ -0,0 +1,54 @@
+const VerticalNavBarStyles = {
+  container: {
+    display: 'flex',
+    height: '100vh',
+  },
+  nav: {
+    width: '350px',
+    backgroundColor: '#fff',
+  },
+  cardHeader: {
+    backgroundColor: '#ffffff',
+    border: 'none',
+  },
+  accordionContainer: {
+    paddingTop: '109px' 
+  },
+  iconContainer: {
+    width: '30.855px',
+    height: '30.855px',
+    marginRight: '20px',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  homeIcon: {
+    width: '24px',
+    height: '23px',
+  },
+  searchIcon: {
+    width: '31px',
+    height: '30px',
+  },
+  gpIcon: {
+    width: '13px',
+    height: '27px',
+  },
+  image: {
+    width: '30.855px',
+    height: '30.855px',
+    marginRight: '20px',
+    display: 'flex',
+    alignItems: 'center' 
+  },
+  firstCarDiv: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '10px' 
+  },
+  cardDivs: {
+    display: 'flex',
+    alignItems: 'center'
+  }
+};
+
+export default VerticalNavBarStyles;