Add new routes to the navbar

components/Navbar.tsx

@@ -50,24 +50,35 @@ const menu: NavLink[] = [
   },
   {
     name: "Resources",
-    route: "/resources",
+    route: "/resources/services",
+    submenu: [
+      {
+        name: "Services",
+        route: "/resources/services",
+      },
+      {
+        name: "Tech Talks",
+        route: "/resources/tech-talks",
+      },
+      {
+        name: "CS Club Wiki",
+        route: "https://wiki.csclub.uwaterloo.ca/",
+      },
+    ],
   },
 ];
 
 function NavItem(props: NavLink) {
   const router = useRouter();
+  const externalLink =
+    props.route.includes("http://") || props.route.includes("https://");
   return (
     <>
-      <Link href={props.route}>
+      {externalLink ? (
         <a
-          title={props.name}
-          className={
-            router.pathname === props.route ||
-            ((props.submenu?.length ?? 0) > 0 &&
-              router.pathname.startsWith(props.route))
-              ? styles.currentPage
-              : ""
-          }
+          href={props.route}
+          target="_blank"
+          rel="noopener noreferrer"
           onClick={() => {
             if (document.activeElement instanceof HTMLElement) {
               document.activeElement.blur();
@@ -76,7 +87,27 @@ function NavItem(props: NavLink) {
         >
           {props.name}
         </a>
-      </Link>
+      ) : (
+        <Link href={props.route}>
+          <a
+            title={props.name}
+            className={
+              router.pathname === props.route ||
+              ((props.submenu?.length ?? 0) > 0 &&
+                router.pathname.startsWith(props.route))
+                ? styles.currentPage
+                : ""
+            }
+            onClick={() => {
+              if (document.activeElement instanceof HTMLElement) {
+                document.activeElement.blur();
+              }
+            }}
+          >
+            {props.name}
+          </a>
+        </Link>
+      )}
       {(props.submenu?.length ?? 0) > 0 ? (
         <ul className={styles.dropdown}>
           {props.submenu?.map((item) => {

pages/resources.mdx

@@ -1 +0,0 @@
-# Resources page

pages/resources/services.mdx

@@ -0,0 +1 @@
+# Services Page

pages/resources/tech-talks.mdx

@@ -0,0 +1 @@
+# Tech Talks Page