ChangePlusPlusVandy · kohrachel · Dec 20, 2024 · Dec 20, 2024 · Dec 20, 2024 · Dec 20, 2024
diff --git a/frontend/public/assets/fostersource-logo.png b/frontend/public/assets/fostersource-logo.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/frontend/src/components/headerBar.css b/frontend/src/components/headerBar.css
@@ -0,0 +1,73 @@
+.header {
+  width: 100%;
+  height: 4rem;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  background-color: white;
+  align-items: center;
+  transition: height 0.3s;
+}
+
+.header-image {
+  height: 45px;
+  margin-left: 12rem;
+  margin-right: 12rem;
+  transition: margin 0.3s;
+}
+
+.header-menu {
+  display: flex;
+  flex: 1;
+  justify-content: space-around;
+  /* flex-direction: row; */
+  text-align: center;
+}
+
+.header-menu li {
+  font-variant-caps: all-petite-caps;
+  font-size: medium;
+  line-height: 0.8;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.header-menu li:hover a:hover {
+  color: #f79518;
+}
+
+.header-hamburger {
+  display: flex;
+  flex: 1;
+  justify-content: end;
+  flex-direction: row;
+  text-align: center;
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+  font-size: large;
+}
+
+@media (max-width: 1140px) {
+  .header-image {
+    margin-left: 5rem;
+    margin-right: 5rem;
+  }
+
+  .header-menu {
+    justify-content: space-between; /* Adjust spacing for smaller screens */
+  }
+}
+
+/* TODO: @kohrachel add hamburger menu support for widths less than 900px */
+@media (max-width: 900px) {
+  .header-image {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .header-menu {
+    justify-content: space-between; /* Adjust spacing for smaller screens */
+  }
+}
diff --git a/frontend/src/components/headerBar.tsx b/frontend/src/components/headerBar.tsx
@@ -0,0 +1,115 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { Menu, X } from "lucide-react";
+import "./headerBar.css";
+
+export const headerItems = [
+  {
+    description: "Home",
+    href: "#",
+  },
+  {
+    description: "About",
+    href: "#",
+  },
+  {
+    description: "Programs",
+    href: "#",
+  },
+  {
+    description: "Calendar",
+    href: "#",
+  },
+  {
+    description: "How to Help",
+    href: "#",
+  },
+  {
+    description: "News",
+    href: "#",
+  },
+  {
+    description: "Contact",
+    href: "#",
+  },
+  {
+    description: "Portal",
+    href: "#",
+  },
+  {
+    description: "🇺🇸 English",
+    href: "#",
+  },
+];
+
+interface HeaderBarProps {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+// The Header Bar
+export function HeaderBar({ isOpen, setIsOpen }: HeaderBarProps) {
+  // State to handle collapsibility
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
+
+  // Automatically collapse header bar for narrow screens
+  useEffect(() => {
+    const handleResize = () => {
+      setIsCollapsed(window.innerWidth < 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return (
+    <div className="header flex flex-row w-full mb-3">
+      <FosterSourceLogo />
+      {!isCollapsed ? (
+        <HeaderItems displayOptions="header-menu flex-row" />
+      ) : (
+        <ul className="header-hamburger">
+          <a href="#" className="w-full">
+            <button
+              className="rounded p-3 flex gap-3 justify-end text-center w-full"
+              onClick={() => setIsOpen(!isOpen)}
+            >
+              {isOpen ? <X /> : <Menu />}
+            </button>
+          </a>
+        </ul>
+      )}
+    </div>
+  );
+}
+
+// Display the Fostersource logo
+function FosterSourceLogo() {
+  return (
+    <img
+      src="/assets/fostersource-logo.png"
+      alt="FosterSource logo"
+      className="header-image"
+    />
+  );
+}
+
+interface HeaderItemsProps {
+  displayOptions: string;
+  outline?: string;
+}
+
+// Display and handle header bar entries
+export function HeaderItems({ displayOptions, outline }: HeaderItemsProps) {
+  const headerItemList = headerItems.map(({ description, href }) => (
+    <li className="border-black border-solid">
+      <Link to={href}>{description}</Link>
+    </li>
+  ));
+
+  return <ul className={`${displayOptions}`}>{headerItemList}</ul>;
+}
+
+export default HeaderBar;
diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
@@ -0,0 +1,146 @@
+.sidebar {
+  width: 20%;
+  min-width: 240px;
+  max-width: 300px;
+  max-height: min-content;
+  background-color: #ffffff;
+  margin-right: 0.75rem;
+  margin-left: 0.75rem;
+  height: 80vh;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+  border-radius: 0.7rem;
+  overflow: auto;
+  transition: all 0.2s;
+}
+
+.profile {
+  vertical-align: middle;
+  font: medium;
+  max-width: 75%;
+  margin-top: 1.8rem;
+  margin-left: 1.8rem;
+  margin-right: 1.8rem;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.profile-pic {
+  vertical-align: middle;
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+}
+
+.login {
+  background-color: #f79518;
+  text-align: center;
+  border-radius: 0.5rem;
+}
+
+.menu {
+  font-weight: 500;
+  list-style-type: none;
+}
+
+.menu li {
+  vertical-align: middle;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-top: 0.7rem;
+  padding-bottom: 0.7rem;
+  padding-left: 1.8rem;
+  padding-right: 1.8rem;
+  position: relative;
+}
+
+.menu a {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+
+.menu li:hover a {
+  color: #f79518;
+}
+
+.menu li:hover svg {
+  color: #f79618;
+}
+
+.menu li.active {
+  background-color: #f7951833;
+  color: #e28815;
+}
+
+.menu li.active a {
+  color: #e28815;
+}
+
+.menu li.active::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 65%;
+  background-color: #f79518;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.menu .logout li:hover a {
+  color: #be0000 !important;
+}
+
+.menu .logout li:hover svg {
+  color: #be0000 !important;
+}
+
+.menu .logout li.active {
+  background-color: #f7181833 !important;
+  color: #be0000 !important;
+}
+
+.menu .logout li.active a {
+  color: #be0000 !important;
+}
+
+.menu .logout li.active::after {
+  background-color: #be0000 !important;
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+  font-size: large;
+}
+
+@media (max-width: 768px) {
+  .profile-pic {
+    width: 40px;
+    height: 40px;
+  }
+
+  .sidebar {
+    min-width: 70px;
+    width: 70px;
+    padding-left: 0;
+  }
+
+  .menu li {
+    padding-left: 1.5rem;
+  }
+
+  .profile {
+    padding-left: 0px;
+    padding-right: 0px;
+    margin-left: 0.95rem;
+    margin-right: 0px;
+    max-width: 60%;
+  }
+  .login {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}