Merge pull request #9 from ubc-biztech/navbar-admin-user

Navbar admin user

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^11.2.10",
+    "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "typescript": "^5"
   }
 }

src/components/NavBar/Navbar.tsx

@@ -0,0 +1,83 @@
+import BiztechLogo from "../../../public/assets/biztech_logo.svg";
+import Image from "next/image";
+import NavbarTab from "./NavbarTab";
+import { admin, defaultUser, logout } from "../../constants/tabs";
+import HamburgerMenu from "../../../public/assets/icons/hamburger_menu.svg";
+import { isMobile } from "@/util/isMobile";
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+
+const isAdmin = true; // TO DO: retrieve this data
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMobileDevice, setIsMobileDevice] = useState(false);
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    setIsMobileDevice(isMobile(userAgent));
+  }, []);
+
+  return (
+    <>
+      {isMobileDevice && (
+        <div className="p-4 fixed bg-events-navigation-bg w-full top-0 justify-between flex">
+          <Image
+            src={HamburgerMenu}
+            alt="Hamburger Menu Icon"
+            width={25}
+            height={25}
+            onClick={() => setIsOpen(!isOpen)}
+          />
+          <Image src={BiztechLogo} alt="Biztech Logo" width={30} height={30} />
+        </div>
+      )}
+      {((isOpen && isMobileDevice) || !isMobileDevice) && (
+        <div
+          className={`${
+            isMobileDevice
+              ? "fixed top-[52px] left-0 right-0 bottom-0 bg-black bg-opacity-50 backdrop-filter backdrop-blur-lg"
+              : ""
+          }`}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <motion.div
+            className="pt-9 h-full w-[250px] bg-events-navigation-bg absolute flex flex-col justify-between p-6"
+            initial={isMobileDevice ? { x: "-100%" } : undefined}
+            animate={isMobileDevice ? { x: 0 } : undefined}
+            transition={{
+              type: "tween",
+              ease: "easeInOut",
+              duration: 0.3,
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div>
+              <div className="items-center flex gap-2">
+                <Image
+                  src={BiztechLogo}
+                  alt="BizTech Logo"
+                  width={40}
+                  height={40}
+                />
+                <h5 className="font-600 text-white">UBC BizTech</h5>
+              </div>
+              <div className="w-full h-px bg-navbar-tab-hover-bg mb-4 mt-4" />
+              {isAdmin && (
+                <>
+                  {admin.map((navbarItem, index) => (
+                    <NavbarTab key={index} navbarItem={navbarItem} />
+                  ))}
+                  <div className="w-full h-px bg-navbar-tab-hover-bg mb-4 mt-4" />
+                </>
+              )}
+              {defaultUser(isAdmin).map((navbarItem, index) => (
+                <NavbarTab key={index} navbarItem={navbarItem} />
+              ))}
+            </div>
+            <NavbarTab navbarItem={logout} />
+          </motion.div>
+        </div>
+      )}
+    </>
+  );
+}

src/components/NavBar/NavbarTab.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+interface NavbarProps {
+  navbarItem: {
+    title: string;
+    link: string;
+    icon: any;
+  };
+}
+
+const NavbarTab: React.FC<NavbarProps> = ({ navbarItem }) => {
+  const router = useRouter();
+  const isSelected = router.pathname === navbarItem.link;
+  return (
+    <Link
+      href={navbarItem?.link}
+      className="h-9 flex w-full mb-4 mt-4 hover:opacity-60 cursor-pointer"
+    >
+      <div className={`w-0.5 ${isSelected && "bg-biztech-green"}`} />
+      <div
+        className={`flex items-center p-2 gap-2 grow ${
+          isSelected && "bg-events-active-tab-bg"
+        }`}
+      >
+        <Image
+          src={navbarItem?.icon}
+          alt="BizTech Logo"
+          width={20}
+          height={20}
+          className="m-2"
+        />
+        <h6 className="text-white">{navbarItem?.title}</h6>
+      </div>
+    </Link>
+  );
+};
+
+export default NavbarTab;

src/constants/tabs.ts

@@ -0,0 +1,52 @@
+import EditIcon from "../../public/assets/icons/settings_icon.svg"
+import NewIcon from "../../public/assets/icons/folder_icon.svg"
+import StatsIcon from "../../public/assets/icons/chart_icon.svg"
+import HomeIcon from "../../public/assets/icons/home_icon.svg"
+import DashboardIcon from "../../public/assets/icons/event_icon.svg"
+import ProfileIcon from "../../public/assets/icons/profile_icon.svg"
+import ExitIcon from "../../public/assets/icons/exit_icon.svg"
+
+export const admin = [
+    {
+        title: "Edit Events",
+        link: "",
+        icon: EditIcon
+    },
+    {
+        title: "New Event",
+        link: "",
+        icon: NewIcon
+    },
+    {
+        title: "Statistics",
+        link: "",
+        icon: StatsIcon
+    },
+]
+
+export const defaultUser = (isAdmin: boolean) => {
+    return [
+      {
+        title: "Home",
+        link: "/",
+        icon: HomeIcon
+      },
+      {
+        title: "Event Dashboard",
+        link: "",
+        icon: DashboardIcon
+      },
+      {
+        title: `${isAdmin ? "Admin" : "User"} Profile`,
+        link: "",
+        icon: ProfileIcon
+      },
+    ];
+  };
+
+export const logout = {
+    title: "Logout",
+    link: "",
+    icon: ExitIcon
+}
+

src/pages/_app.tsx

@@ -1,6 +1,11 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import Layout from "./layout";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }

src/pages/index.tsx

@@ -1,14 +1,11 @@
-import Image from "next/image";
 import { Inter } from "next/font/google";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
-    <main>
-      <h1>
-        amazing biztech app
-      </h1>
+    <main className="bg-primary-color min-h-screen">
+      {/* <h1>amazing biztech app</h1> */}
     </main>
   );
 }

src/pages/layout.tsx

@@ -0,0 +1,19 @@
+import Navbar from "@/components/NavBar/Navbar";
+import { isMobile } from "@/util/isMobile";
+import { useEffect, useState } from "react";
+
+export default function Layout({ children }: any) {
+  const [isMobileDevice, setIsMobileDevice] = useState(false);
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    setIsMobileDevice(isMobile(userAgent));
+  }, []);
+  return (
+    <>
+      <Navbar />
+      <main className={`${!isMobileDevice ? "ml-[250px]" : "mt-[52px]"}`}>
+        {children}
+      </main>
+    </>
+  );
+}

src/styles/globals.css

@@ -51,6 +51,9 @@ body {
   h5 {
     @apply font-poppins font-400 text-md text-black;
   }
+  h6 {
+    @apply font-poppins font-400 text-sm text-black;
+  }
   button {
     @apply font-poppins font-600 text-sm text-black;
   }