Merge pull request #23 from noahgiboney/admin-panel

feat: admin-dashboard

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+/.env
 
 # vercel
 .vercel

package.json

@@ -10,6 +10,7 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.1",
     "eslint-plugin-prettier": "^5.1.3",
     "mongoose": "^7.6.3",
     "next": "14.0.0",

src/app/admin/events/page.tsx

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

src/app/admin/layout.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { Montserrat } from "next/font/google";
+import Sidebar from "@components/Sidebar";
+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/admin/page.tsx

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

src/app/components/Sidebar.tsx

@@ -0,0 +1,73 @@
+"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,
+} 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 for determining if slider is collapased
+  const [isCollapsed, setCollapsed] = useState(false);
+
+  const toggleSlider = () => {
+    setCollapsed(!isCollapsed);
+  };
+
+  // can add more options here for admin
+  const sideBarOptions = [
+    {
+      name: "Dashboard",
+      href: "/admin",
+      icon: <HomeIcon style={{ width: "35px", height: "35px" }} />,
+      current: !segement ? true : false,
+    },
+    {
+      name: "Events",
+      href: "/admin/events",
+      icon: <CalendarDaysIcon style={{ width: "35px", height: "35px" }} />,
+      current: `/${segement}` === "/events" ? true : false,
+    },
+  ];
+
+  return (
+    <div
+      className={`${style.sidebar} ${isCollapsed ? style.collapsedSidebar : ""}`}
+    >
+      <div className={style.toggleButton} onClick={toggleSlider}>
+        {isCollapsed ? (
+          <Bars3Icon style={{ width: "35px", height: "35px" }} />
+        ) : (
+          <XMarkIcon style={{ width: "35px", height: "35px" }} />
+        )}
+      </div>
+      <h1>{isCollapsed ? "" : "Admin"}</h1>
+      <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/globals.css

@@ -0,0 +1,3 @@
+* {
+    margin: 0px;
+}

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

@@ -0,0 +1,9 @@
+.adminDash {
+  display: flex;
+}
+
+.mainContainer {
+  width: 100%;
+  text-align: center;
+  height: 100vh;
+}

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

@@ -0,0 +1,104 @@
+/* common style for collapsed and non-callapsed */
+.sidebar {
+  width: 225px;
+  height: 100vh;
+  text-align: center;
+  transition: width 0.3s;
+  box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.sidebar h1 {
+  padding: 20px 50px;
+}
+
+.adminOptions ul {
+  padding-inline-start: 0;
+  text-align: left;
+}
+
+.adminOptions li {
+  list-style: none;
+}
+
+.adminOptions ul li a {
+  color: black;
+  text-decoration: none;
+}
+
+.adminOptions ul li:hover {
+  background-color: #f0f0f0;
+}
+
+.adminOptions p {
+  font-size: 1.5vh;
+  text-align: center;
+  padding-top: 9px;
+  padding-left: 15px;
+}
+
+/* when slider is collapsed */
+.collapsedSidebar {
+  width: 55px;
+  margin: 1px;
+  padding: 0px;
+}
+
+.collapsedSidebar .option {
+  padding: 20px 0;
+}
+
+.collapsedSidebar .option p {
+  padding-left: 0px;
+}
+
+.collapsedSidebar .toggleButton {
+  text-align: center;
+}
+
+.collapsedSidebar .toggleButton {
+  margin-left: 0;
+}
+
+/* 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;
+}
+
+.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);
+  }
+}