Revert "removed animation from menu bar in mobile view"

This reverts commit d0fb558.

frontend/components/Links.tsx

@@ -1,8 +1,8 @@
+import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { motion } from 'framer-motion';
-import Link from 'next/link';
 
 export enum Route {
   Home,
@@ -11,54 +11,35 @@ export enum Route {
   Blog,
   Events
 }
-
 interface NavLinkProp {
   selectedRoute: Route;
   i: number;
   route: String | Route;
 }
-
-const NavLink = ({ selectedRoute, i, route }: NavLinkProp): ReactElement => {
+const NavLink  = ({selectedRoute,i,route}: NavLinkProp): ReactElement => {
   return (
     <motion.li
-      initial={{ opacity: 0, y: -30 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3, delay: 0.10 * i }}
-      viewport={{ once: true }}
+    initial={{ opacity: 0, y: -30 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.3 , delay: 0.10 * i  }}
+    viewport={{ once: true }}
     >
-      <Link
-        href={`${route.toString().toLowerCase()}` === "home" ? "/" : `/${route.toString().toLowerCase()}`}
-        scroll={false}
-      >
-        <a
-          className={`link underline-offset-2 ${
-            Route[selectedRoute] === route ? 'decoration-2' : 'link-hover'
-          }`}
-        >
-          {route.toString()}
-        </a>
-      </Link>
+      <Link href={`${route.toString().toLowerCase()}` === "home" ? "/" : `/${route.toString().toLowerCase()}`} scroll={false}>
+          <a
+            className={`link underline-offset-2 ${
+              Route[selectedRoute] === route ? 'decoration-2' : 'link-hover'
+            }`}
+            >
+            {route.toString()}
+          </a>
+        </Link>
     </motion.li>
   );
 };
-
-const Links = (props: any): ReactElement => {
+const Links = (props: any): ReactElement => {   
   const router = useRouter();
 
   const [selectedRoute, setSelectedRoute] = props.state;
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 768);
-    };
-
-    handleResize(); 
-
-    window.addEventListener('resize', handleResize);
-
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
 
   useEffect(() => {
     switch (router.route) {
@@ -87,19 +68,11 @@ const Links = (props: any): ReactElement => {
 
   return (
     <>
-      {Object.values(Route).filter((v) => isNaN(Number(v))).map((route, i) =>isMobile ? 
-      (<li key={i}> 
-        <Link href={`${route.toString().toLowerCase()}` === "home" ? "/" : `/${route.toString().toLowerCase()}`} scroll={false}>
-        <a 
-          className={`link underline-offset-2 ${ 
-            Route[selectedRoute] === route ? 'decoration-2' : 'link-hover'
-          }`}> 
-          {route.toString()} 
-        </a>
-        </Link>
-      </li>) : ( <NavLink selectedRoute={selectedRoute} i={i + 5} route={route} key={i} />))} 
+      {Object.values(Route).filter((v) => isNaN(Number(v))).map((route, i) => (
+        <NavLink selectedRoute={selectedRoute} i={i + 5} route={route} key={i} /> // i + 5 to offset the delay
+      ))}
     </>
   );
 };
 
-export default Links;
+export default Links;