Merge pull request #178 from HackMelbourne/navbar-update

Navbar update

package.json

@@ -28,7 +28,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
-    "react-icons": "^4.8.0",
+    "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.9.0",
     "styled-components": "^5.3.9",

src/features/Navbar/NavbarPill.tsx

@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+import { NavbarPillProps } from "./NavbarPillProps";
+
+const NavbarPill = ({ title, desc, Icon, image, link } : NavbarPillProps) => {
+  return (
+      <Link to={link}>
+        <div className="relative w-full flex gap-4 items-center justify-center px-3 py-4 mt-2 rounded-md border border-white bg-center bg-cover"
+          style={{ backgroundImage: `url(${image})` }}>
+            <div className="absolute inset-0 bg-black opacity-50 z-0"></div>
+            <Icon className="relative w-8 h-8 z-10" />
+            <div className="relative flex flex-col gap-1 z-10">
+              <h3 className="font-semibold text-md">{title}</h3>
+              <p className="text-sm">{desc}</p>
+            </div>
+        </div>
+      </Link>
+  )
+}
+
+export default NavbarPill;

src/features/Navbar/NavbarPillProps.ts

@@ -0,0 +1,10 @@
+import { IconType } from "react-icons";
+
+export interface NavbarPillProps {
+  title: string;
+  desc: string;
+  Icon: IconType;
+  image: string;
+  link: string;
+}
+

src/layouts/Layout.tsx

@@ -1,6 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { Outlet, useLocation } from "react-router";
-import { FaDiscord, FaEnvelope, FaFacebook, FaInstagram, FaLinkedin, FaTiktok } from "react-icons/fa";
+import {
+  FaDiscord,
+  FaEnvelope,
+  FaFacebook,
+  FaInstagram,
+  FaLinkedin,
+  FaTiktok,
+  FaCalendar,
+  FaLink,
+  FaFlag,
+  FaPersonBooth,
+  FaUser,
+} from "react-icons/fa";
 import {
   DISCORD_LINK,
   FACEBOOK_LINK,
@@ -14,6 +26,7 @@ import {
 
 // Components
 import Navbar from "./Navbar";
+import { NavbarPillProps } from "../features/Navbar/NavbarPillProps";
 import Footer from "./Footer";
 
 // Styles
@@ -40,11 +53,50 @@ const Layout = () => {
     setIsShowFooter(!isFooterHidden);
   }, [location]);
 
+  const homePills: NavbarPillProps[] = [];
+
+  const aboutPills: NavbarPillProps[] = [
+    {
+      title: "Events",
+      desc: "Our flagship Events!",
+      Icon: FaFlag,
+      image: "/img/temp-bg.jpg",
+      link: "/about/events",
+    },
+    {
+      title: "Meet the team",
+      desc: "See our amazing team",
+      Icon: FaUser,
+      image: "/img/temp-bg.jpg",
+      link: "/about/meettheteam",
+    },
+  ];
+
+  const calenderPills: NavbarPillProps[] = [
+    {
+      title: "Calender",
+      desc: "See what's going on!",
+      Icon: FaCalendar,
+      image: "/img/temp-bg.jpg",
+      link: "/upcoming/calendar",
+    },
+    {
+      title: "Links",
+      desc: "Signups, events and more",
+      Icon: FaLink,
+      image: "/img/temp-bg.jpg",
+      link: "/upcoming/links",
+    },
+  ];
+
+  const sponsorPills: NavbarPillProps[] = [];
+
   const nav = {
     clubname: "HackMelbourne",
     logo: "/img/HM_White_Transparent.png",
-    pages: ["Home", "Meet The Team", "Calendar", "Sponsors"],
-    links: ["/", "about/meettheteam", "upcoming/calendar", "sponsors"],
+    pages: ["Home", "About", "Upcoming", "Sponsors"],
+    links: ["/", "/about/meettheteam", "/upcoming/calendar", "/sponsors"],
+    pills: [homePills, aboutPills, calenderPills, sponsorPills],
   };
 
   const footer = {
@@ -89,7 +141,9 @@ const Layout = () => {
   return (
     <>
       <div className="w-screen max-w-full overflow-x-clip">
-        {isShowNavbar ? <Navbar clubname={nav.clubname} logo={nav.logo} pages={nav.pages} links={nav.links} /> : null}
+        {isShowNavbar ? (
+          <Navbar clubname={nav.clubname} logo={nav.logo} pages={nav.pages} links={nav.links} pills={nav.pills} />
+        ) : null}
         <Outlet />
         {isShowFooter ? <Footer links={footer.links} icons={footer.icons} /> : null}