add naavbar item for location

LaurierHawkHacks · May 12, 2024 · 8c18536 · 8c18536
1 parent 53ab326
commit 8c18536
Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,5 +1,5 @@
 import { RiDiscordLine } from "react-icons/ri";
-import { FiLogOut } from "react-icons/fi";
+import { FiLogOut, FiMapPin } from "react-icons/fi";
 import { RxStar  } from "react-icons/rx";
 import { useState, useEffect } from "react";
 import { useAuth } from "@/providers/hooks";
@@ -52,6 +52,11 @@ export const Navbar = () => {
             label: "Perks",
             Icon: RxStar,
         },
+        [paths.location]: {
+            label: "Location",
+            Icon: FiMapPin,
+            externalLink: "https://www.google.com/maps/place/Your+Location/",
+        },
     };
 
     const location = useLocation();
@@ -188,6 +193,16 @@ export const Navbar = () => {
                         </div>
                         <ul className="flex flex-col items-start justify-start divide-y divide-charcoalBlack">
                             {currentUser && renderNavItems(true)}
+                            <a
+                                href="https://discord.com/invite/GxwvFEn9TB"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="w-full"
+                            >
+                                <li className="p-4 hover:bg-slate-100 duration-300 transition-colors rounded-md w-full hover:text-black cursor-pointer flex items-center justify-start gap-2">
+                                    Location
+                                </li>
+                            </a>
                             <a
                                 href="https://discord.com/invite/GxwvFEn9TB"
                                 target="_blank"
@@ -199,6 +214,7 @@ export const Navbar = () => {
                                 </li>
                             </a>
                         </ul>
+
                         {currentUser && (
                             <button
                                 className="p-4 hover:bg-slate-100 duration-300 transition-colors rounded-md w-full flex items-center justify-start gap-2 hover:text-black"
@@ -235,6 +251,17 @@ export const Navbar = () => {
                     <aside className="flex flex-col items-start justify-between h-[90%]">
                         <ul className="flex flex-col items-start justify-start gap-4 w-full">
                             {currentUser && renderNavItems(false)}
+                            <a
+                                href="https://maps.app.goo.gl/Fxic5XJBzZjHP4Yt5"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="w-full"
+                            >
+                                <li className="p-4 hover:bg-slate-100 duration-300 transition-colors rounded-md w-full hover:text-black cursor-pointer flex items-center justify-start gap-2">
+                                    <FiMapPin size={32} />
+                                    Location
+                                </li>
+                            </a>
                             <a
                                 href="https://discord.com/invite/GxwvFEn9TB"
                                 target="_blank"
@@ -246,6 +273,7 @@ export const Navbar = () => {
                                     Discord Support
                                 </li>
                             </a>
+
                         </ul>
                         {currentUser && (
                             <button

diff --git a/src/providers/routes.provider.tsx b/src/providers/routes.provider.tsx
@@ -49,6 +49,7 @@ interface PathObject {
     myApp: string;
     ticket: string;
     perks: string;
+    location: string;
 }
 
 interface Title {
@@ -84,6 +85,7 @@ const paths: PathObject = {
     myApp: "/my-application",
     ticket: "/ticket/:ticketId",
     perks: "/perks",
+    location: "/location"
 };
 
 const titles: Record<string, Title> = {
@@ -247,7 +249,7 @@ export const RoutesProvider: FC<ComponentProps> = ({ children }) => {
                     path: paths.networking,
                     element: <NetworkingPage />,
                 },
-                { path: paths.perks, element: <PerksPage /> }
+                { path: paths.perks, element: <PerksPage /> },
             );
 
             setUserRoutes(userRoutes.children);
@@ -291,6 +293,7 @@ export const RoutesProvider: FC<ComponentProps> = ({ children }) => {
                     { path: paths.myTicket, element: <TicketPage /> },
                     { path: paths.myTeam, element: <MyTeamPage /> },
                     { path: paths.perks, element: <PerksPage /> },
+
                     {
                         path: `${paths.joinTeam}/:invitationId`,
                         element: <JoinTeamPage />, // dummy placeholder
@@ -318,6 +321,7 @@ export const RoutesProvider: FC<ComponentProps> = ({ children }) => {
                 },
                 { path: paths.myTicket, element: <TicketPage /> },
                 { path: paths.perks, element: <PerksPage /> },
+
             ];
         }