Merge pull request #49 from hack4impact-calpoly/3-volunteer-guest-das…

…hboard-frontend

feat: guest sidebar

src/app/admin/page.tsx

@@ -7,3 +7,4 @@ const dashboard = () => {
 };
 
 export default dashboard;
+

src/app/components/Sidebar.tsx

@@ -35,11 +35,13 @@ const Sidebar = () => {
       icon: <CalendarDaysIcon style={{ width: "35px", height: "35px" }} />,
       current: `/${segement}` === "/events" ? true : false,
     },
+
   ];
 
   return (
     <div
       className={`${style.sidebar} ${isCollapsed ? style.collapsedSidebar : ""}`}
+      style={{ backgroundColor: "#5DADE2"}}
     >
       <div className={style.toggleButton} onClick={toggleSlider}>
         {isCollapsed ? (
@@ -57,7 +59,7 @@ const Sidebar = () => {
               className={`${option.current ? style.currentOption : ""}`}
             >
               <Link href={option.href}>
-                <div className={style.option}>
+                <div className={style.option} >
                   {option.icon}
                   <p>{isCollapsed ? "" : option.name}</p>
                 </div>

src/app/components/Sidebar_Guest.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { useState } from "react";
+import Link from "next/link";
+import style from "@styles/admin/sidebar.module.css";
+import {
+  Bars3Icon,
+  XMarkIcon,
+  HomeIcon,
+  CalendarDaysIcon,
+  UserIcon,
+  HandRaisedIcon
+} from "@heroicons/react/16/solid";
+
+const Sidebar = () => {
+  // returns the current route that user is on, null if user is on the root (admin page.tsx)
+  const segement = useSelectedLayoutSegment();
+
+  // useState 1ining if slider is collapased
+  const [isCollapsed, setCollapsed] = useState(false);
+
+  const toggleSlider = () => {
+    setCollapsed(!isCollapsed);
+  };
+
+  // can add more options here for admin
+  const sideBarOptions = [
+    {
+      name: "Home",
+      href: "/dashboard",
+      icon: <HomeIcon style={{ width: "35px", height: "35px" }} />,
+      current: !segement ? true : false,
+    },
+    {
+      name: "Events",
+      href: "/dashboard/events",
+      icon: <CalendarDaysIcon style={{ width: "35px", height: "35px" }} />,
+      current: `/${segement}` === "/events" ? true : false,
+    },
+    {
+      name: "Volunteer",
+      href: "/dashboard/volunteer",
+      icon: <HandRaisedIcon style={{ width: "35px", height: "35px" }} />,
+      current: `/${segement}` === "/volunteer" ? true : false, 
+    },
+    {
+      name: "Profile",
+      href: "/dashboard/profile",
+      icon: <UserIcon style={{ width: "35px", height: "35px" }} />,
+      current: `/${segement}` === "/profile" ? true : false, 
+    },
+  ];
+
+  return (
+    <div
+      className={`${style.sidebar} ${isCollapsed ? style.collapsedSidebar : ""}`}
+      style={{ backgroundColor: "#5DADE2"}}
+    >
+      <div className={style.toggleButton} onClick={toggleSlider}>
+        {isCollapsed ? (
+          <Bars3Icon style={{ width: "35px", height: "35px" }} />
+        ) : (
+          <XMarkIcon style={{ width: "35px", height: "35px" }} />
+        )}
+      </div>
+      <div className={style.adminOptions}>
+        <ul>
+          {sideBarOptions.map((option) => (
+            <li
+              key={option.name}
+              className={`${option.current ? style.currentOption : ""}`}
+            >
+              <Link href={option.href}>
+                <div className={style.option} >
+                  {option.icon}
+                  <p>{isCollapsed ? "" : option.name}</p>
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

src/app/dashboard/events/page.tsx

@@ -0,0 +1,9 @@
+const dashboard = () => {
+  return (
+    <div>
+      <h2>Event Guest Page</h2>
+    </div>
+  );
+};
+
+export default dashboard;

src/app/dashboard/layout.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { Montserrat } from "next/font/google";
+import Sidebar from "@components/Sidebar_Guest";
+import style from "@styles/admin/layout.module.css";
+
+type Props = {
+  children: ReactNode;
+};
+
+const montserrat = Montserrat({ subsets: ["latin"], weight: ["300"] });
+
+const Layout = (props: Props) => {
+  return (
+    <div className={montserrat.className}>
+      <div className={style.adminDash}>
+        <div>
+          <Sidebar />
+        </div>
+        <main className={style.mainContainer}>{props.children}</main>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

src/app/dashboard/page.tsx

@@ -0,0 +1,10 @@
+const dashboard = () => {
+  return (
+    <div>
+      <h2>Main Guest Dashboard</h2>
+    </div>
+  );
+};
+
+export default dashboard;
+

src/app/dashboard/profile/page.tsx

@@ -0,0 +1,10 @@
+const dashboard = () => {
+    return (
+      <div>
+        <h2>Profile Guest Page</h2>
+      </div>
+    );
+  };
+
+  export default dashboard;
+

src/app/dashboard/volunteer/page.tsx

@@ -0,0 +1,10 @@
+const dashboard = () => {
+    return (
+      <div>
+        <h2>Volunteer Guest Page</h2>
+      </div>
+    );
+  };
+
+  export default dashboard;
+

src/app/styles/admin/layout.module.css

@@ -1,9 +1,10 @@
 .adminDash {
-  display: flex;
+    display: flex;
 }
 
 .mainContainer {
-  width: 100%;
-  text-align: center;
-  height: 100vh;
+    padding-top: 50px;
+    width: 100%;
+    text-align: center;
+    height: 100vh;
 }

src/app/styles/admin/sidebar.module.css

@@ -1,4 +1,4 @@
-/* common style for collapsed and non-callapsed */
+/* common style for collapsed and non-collapsed */
 .sidebar {
   width: 225px;
   height: 100vh;
@@ -20,20 +20,45 @@
   list-style: none;
 }
 
+.adminOptions li:hover {
+  background-color: #3498db; /* Lighter color on hover */
+}
+
 .adminOptions ul li a {
   color: black;
   text-decoration: none;
 }
 
-.adminOptions ul li:hover {
-  background-color: #f0f0f0;
+.option {
+  padding: 10px;
+  margin: 0 10px;
+  padding: 30px 0;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  transition: color 0.3s;
+  cursor: pointer;
+}
+
+.option p {
+  margin-left: 10px;
 }
 
-.adminOptions p {
-  font-size: 1.5vh;
-  text-align: center;
-  padding-top: 9px;
-  padding-left: 15px;
+.option:hover {
+  color: white; /* Text color on hover */
+}
+
+.currentOption {
+  background-color: #3498db;
+}
+
+.toggleButton {
+  display: inline-block;
+  margin-top: 20px;
+  margin-left: 80%;
+  text-align: right;
+  cursor: pointer;
 }
 
 /* when slider is collapsed */
@@ -61,44 +86,16 @@
 
 /* option button */
 .option {
-  padding: 10px;
-  margin: 0 10px;
-  padding: 30px 0;
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: row;
-  transition: color 0.3s;
+  font-weight: normal; /* Reset font weight on regular state */
 }
 
 .option:hover {
   font-weight: bold;
 }
 
-.currentOption {
-  background-color: #f0f0f0;
-}
-
-.toggleButton {
-  display: inline-block;
-  margin-top: 20px;
-  margin-left: 80%;
-  text-align: right;
-  cursor: pointer;
-}
-
 /* mobile view */
 @media (max-width: 768px) {
-  .sidebar {
-    width: 45vw;
-    text-align: center;
-  }
-
   .collapsedSidebar {
-    width: 40px;
-    padding-left: 10px;
-    overflow: hidden;
-    height: 60px;
     box-shadow: 0px 0 0px rgba(0, 0, 0, 0.1);
   }
 }