From 8b7489bc0268c8ad0b0f015e58d5a1bff830e27a Mon Sep 17 00:00:00 2001
From: Sam Young <sam.young@fntech.com>
Date: Tue, 9 Jul 2024 10:27:37 -0700
Subject: [PATCH 1/3] replace Navbar template.js with theme-site

---
 src/components/Link.js            |  43 +++
 src/components/LogoutButton.js    |  28 +-
 src/components/Navbar/template.js | 422 +++++++++++++++++++++++-------
 src/styles/colors.scss            |  26 +-
 src/styles/fonts.scss             |  27 +-
 5 files changed, 415 insertions(+), 131 deletions(-)

diff --git a/src/components/Link.js b/src/components/Link.js
index a22dbbf9..1fe6b7ad 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Link as GatsbyLink } from "gatsby";
+import Box from "@mui/material/Box";
 // Since DOM elements <a> cannot receive activeClassName
 // and partiallyActive, destructure the prop here and
 // pass it only to GatsbyLink
@@ -38,4 +39,46 @@ const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => {
   );
 };
 
+export const AnimatedLink = ({
+  color = "white",
+  hoverColor = "white",
+  children,
+  ...rest
+}) => (
+  <Box
+    component={Link}
+    sx={{
+      position: "relative",
+      color: color,
+      "&:hover, &:focus": {
+        color: hoverColor,
+        textDecoration: "none",
+        "&::before": {
+          backgroundColor: hoverColor,
+          transform: "scaleX(1)",
+          transformOrigin: "left center"
+        }
+      },
+      "&::before": {
+        content: "\"\"",
+        position: "absolute",
+        left: 0,
+        bottom: {
+          xs: -0.5,
+          md: -2
+        },
+        height: "0.5px",
+        width: "100%",
+        backgroundColor: color,
+        transform: "scaleX(0)",
+        transformOrigin: "right center",
+        transition: "transform .45s cubic-bezier(0.86, 0, 0.07, 1)"
+      }
+    }}
+    {...rest}
+  >
+    {children}
+  </Box>
+);
+
 export default Link;
diff --git a/src/components/LogoutButton.js b/src/components/LogoutButton.js
index 15b44cf2..f4e31211 100644
--- a/src/components/LogoutButton.js
+++ b/src/components/LogoutButton.js
@@ -1,6 +1,8 @@
 import React from "react";
 import { navigate } from "gatsby";
 import { triggerLogoutEvent } from "@utils/eventTriggers";
+import IconButton from "@mui/material/IconButton";
+import LogoutIcon from "@mui/icons-material/Logout";
 
 export default class
   LogoutButton extends React.Component {
@@ -15,15 +17,29 @@ export default class
   }
 
   render() {
-    let { isLoggedUser, styles } = this.props;
+    let { isLoggedUser, styles, ...rest } = this.props;
 
     if (isLoggedUser) {
       return (
-        <div className={styles.buttons}>
-          <button className={`link ${styles.userIcon}`} title="Logout" onClick={() => this.onClickLogout()}>
-            <i className="fa fa-sign-out icon is-medium" style={{ fontSize: "1.5rem" }} />
-          </button>
-        </div>
+        <IconButton
+          aria-label="logout"
+          onClick={this.onClickLogout}
+          styles={styles}
+          {...rest}
+        >
+          <LogoutIcon 
+            sx={{
+              color: "white",
+              fontSize: {
+                xs: 18,
+                lg: 19
+              },
+              padding: {
+                xs: 0
+              }
+            }}
+          />
+        </IconButton>
       );
     } else {
       return null;
diff --git a/src/components/Navbar/template.js b/src/components/Navbar/template.js
index ccb3b2c2..16c057e7 100644
--- a/src/components/Navbar/template.js
+++ b/src/components/Navbar/template.js
@@ -1,109 +1,335 @@
 import React, { useState } from "react";
-
-import Link from "../Link";
-import ProfilePopupComponent from "../ProfilePopupComponent";
+import Box from "@mui/material/Box";
+import AppBar from "@mui/material/AppBar"
+import Container from "@mui/material/Container";
+import Toolbar from "@mui/material/Toolbar";
+import Drawer, { drawerClasses } from "@mui/material/Drawer";
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import SvgIcon from "@mui/material/SvgIcon";
+import Avatar from "@mui/material/Avatar";
+import Link, { AnimatedLink } from "../Link";
+import ProfilePopupComponent from "@openeventkit/event-site/src/components/ProfilePopupComponent";
 import LogoutButton from "../LogoutButton";
 
 import styles from "../../styles/navbar.module.scss";
 
-const NavbarTemplate = ({
-  data,
-  summit,
-  isLoggedUser,
-  idpLoading,
-  idpProfile,
-  updateProfile,
-  updateProfilePicture,
-  defaultPath,
-  logo
-}) => {
-  const [active, setActive] = useState(false);
-  const [showProfile, setShowProfile] = useState(false);
-
-  const toggleHamburger = () => {
-    // toggle the active boolean in the state
-    setActive(!active);
-  };
-
-  const handleTogglePopup = () => {
-    if (showProfile) {
-      document.body.classList.remove("is-clipped");
-    } else {
-      document.body.classList.add("is-clipped");
-    }
-    setShowProfile(!showProfile);
-  };
-
-  const navBarActiveClass = active ? styles.isActive : "";
+import { useLocation } from "@reach/router";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
-  return (
-    <React.Fragment>
-      <nav
-        className={`${styles.navbar}`}
-        role="navigation"
-        aria-label="main navigation"
+const MenuIcon = () =>
+    <SvgIcon viewBox="0 0 22 18">
+      <svg width="22" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 1H21" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+        <path d="M1 9H21" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+        <path d="M1 17H21" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+      </svg>
+    </SvgIcon>
+  ;
+  
+  const CloseIcon = () =>
+    <SvgIcon viewBox="0 0 18 18">
+      <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17 1L1 17" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+        <path d="M1 1L17 17" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+      </svg>
+    </SvgIcon>
+  ;
+  
+  const NavbarTemplate = ({
+    data: pages,
+    summit,
+    isLoggedUser,
+    idpLoading,
+    idpProfile,
+    updateProfile,
+    updateProfilePicture,
+    defaultPath,
+    logo
+  }) => {
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [anchorElProfile, setAnchorElProfile] = React.useState(null);
+    const handleOpenProfile = (event) => {
+      setAnchorElProfile(event.currentTarget);
+    };
+    const handleCloseProfile = () => {
+      setAnchorElProfile(null);
+    };
+    const toggleMenu = (open) => (event) => {
+      setMenuOpen(open);
+    };
+    // needed to identify schedule page, to change sticky breakpoint for fnevent stock breakpoints handling 
+    const location = useLocation();
+    const isSchedulePage = location.pathname.startsWith("/a/schedule") || location.pathname.startsWith("/a/my-schedule");
+    const matchesStockEventSiteDesktopBreakpoint = useMediaQuery("(min-width: 991px)");
+    const navbarPosition = matchesStockEventSiteDesktopBreakpoint ? "relative" : "sticky";
+    return (
+      <>
+      <AppBar
+        sx={{
+          zIndex: (theme) => theme.zIndex.drawer + 1,
+          position: isSchedulePage ?
+            navbarPosition
+            :
+            {
+              xs: "sticky",
+              md: "relative"
+            }
+        }}
       >
-        <div className={styles.navbarBrand}>
-          <Link
-            to={isLoggedUser ? defaultPath : "/"}
-            className={styles.navbarItem}
-          >
-            {logo && <img src={logo} alt={summit.name} />}
-          </Link>
-
-          <button
-            className={`link ${styles.navbarBurger} ${styles.burger} ${navBarActiveClass}`}
-            aria-label="menu"
-            aria-expanded="false"
-            data-target="navbar"
-            onClick={() => toggleHamburger()}
-          >
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-          </button>
-        </div>
-
-        <div
-          id="navbar"
-          className={`${styles.navbarMenu} ${navBarActiveClass}`}
+        <Container
+          sx={{
+            px: {
+              xs: 2,
+              md: 3,
+              lg: 4
+            }
+          }}
+          maxWidth="xl"
         >
-          <div className={styles.navbarStart} />
-          <div className={styles.navbarEnd}>
-            {data.map((item, index) => (
-              <div className={styles.navbarItem} key={index}>
-                <Link to={item.link} className={styles.link}>
-                  <span>{item.title}</span>
-                </Link>
-              </div>
-            ))}
-            {isLoggedUser && (
-              <div className={styles.navbarItem}>
-                <button className="link" onClick={() => handleTogglePopup()}>
+          <Toolbar
+            disableGutters
+            sx={{
+              minHeight: {
+                xs: 46,
+                md: 64,
+                lg: 84,
+                xl: 100
+              }
+            }}
+          >
+            {logo &&   
+            <Box
+              sx={{
+                flexGrow: 1,
+                display: {
+                  xs: "flex"
+                },
+              }}
+            >
+              <Link
+                to={isLoggedUser ? defaultPath : "/"}
+              >
+                <Box
+                  sx={{
+                    img: {
+                      height: {
+                        xs: 16,
+                        lg: 20
+                      },
+                      width: {
+                        xs: 71.89,
+                        lg: 89.87
+                      }
+                    }
+                  }}
+                >
                   <img
-                    alt="profile pic"
-                    className={styles.profilePic}
-                    src={idpProfile?.picture}
+                    src={logo}
+                    alt={summit.name}
                   />
-                </button>
-                {showProfile && (
-                  <ProfilePopupComponent
-                    userProfile={idpProfile}
-                    showProfile={showProfile}
-                    idpLoading={idpLoading}
-                    changePicture={updateProfilePicture}
-                    changeProfile={updateProfile}
-                    closePopup={() => handleTogglePopup()}
+                </Box>
+              </Link>
+            </Box>
+            }
+            <Box
+              sx={{
+                flexGrow: 0,
+                display: {
+                  xs: "flex",
+                  md: "none"
+                }
+              }}
+            >
+              <IconButton
+                aria-label="navigation menu"
+                aria-controls="menu-navbar"
+                aria-haspopup="true"
+                onClick={toggleMenu(!menuOpen)}
+                sx={{
+                  p: 0,
+                  borderRadius: 0,
+                  ".MuiTouchRipple-ripple .MuiTouchRipple-child": {
+                    borderRadius: 0,
+                  }
+                }}
+              >
+                { menuOpen ?
+                <CloseIcon />
+                :
+                <MenuIcon />
+                }
+              </IconButton>
+            </Box>
+            <Stack
+              direction="row"
+              spacing={{
+                md: 4
+              }}
+              sx={{
+                flexGrow: 0,
+                display: {
+                  xs: "none",
+                  md: "flex"
+                }
+              }}
+            >
+              {pages.map((page) => (
+                <AnimatedLink
+                  key={page.title}
+                  to={page.link}
+                >
+                  <Typography
+                    variant="caption2"
+                  >
+                    {page.title}
+                  </Typography>
+                </AnimatedLink>
+              ))}
+            </Stack>
+            {isLoggedUser && idpProfile &&
+            <Box
+              sx={{
+                flexGrow: 0,
+                display: {
+                  xs: "none",
+                  md: "flex"
+                },
+                ml: 4
+              }}
+            >
+              <Tooltip
+                title="Edit Profile"
+              >
+                <IconButton
+                  onClick={handleOpenProfile}
+                  sx={{
+                    p: 0
+                  }}
+                >
+                  <Avatar
+                    alt={idpProfile?.name}
+                    src={idpProfile?.picture}
                   />
-                )}
-              </div>
-            )}
-            <LogoutButton styles={styles} isLoggedUser={isLoggedUser} />
-          </div>
-        </div>
-      </nav>
-    </React.Fragment>
-  );
-};
-
-export default NavbarTemplate;
+                </IconButton>
+              </Tooltip>
+            </Box>
+            }
+            {isLoggedUser &&
+            <Box
+              sx={{
+                flexGrow: 0,
+                display: {
+                  xs: "none",
+                  md: "flex"
+                },
+                ml: 1
+              }}
+            >
+              <LogoutButton
+                isLoggedUser={isLoggedUser}
+                styles={styles}
+              />
+            </Box>
+            }
+          </Toolbar>
+        </Container>
+      </AppBar>
+      <Drawer
+        anchor="top"
+        open={menuOpen}
+        onClick={toggleMenu(false)}
+        ModalProps={{
+          // Better open performance on mobile.
+          keepMounted: true
+        }}
+        sx={{
+          display: {
+            xs: "flex",
+            md: "none"
+          },
+          flexShrink: 0,
+          [`& .${drawerClasses.paper}`]: {
+            width: "100%",
+            height: "100%",
+            boxSizing: "border-box",
+            backgroundColor: "black"
+          }
+        }}
+      >
+        <Toolbar
+          style={{
+            minHeight: 46
+          }}
+        />
+        <Stack
+          direction="column"
+          spacing={4}
+          sx={{
+            py: 6,
+            pl: 2
+          }}
+        >
+          {pages.map((page) => (
+          <AnimatedLink
+            key={page.title}
+            to={page.link}
+            style={{
+              width: "fit-content"
+            }}
+          >
+            <Typography
+              variant="caption1"
+            >
+              {page.title}
+            </Typography>
+          </AnimatedLink>
+          ))}
+          {isLoggedUser && idpProfile &&
+          <Box>
+            <IconButton
+              onClick={handleOpenProfile}
+              sx={{
+                p: 0
+              }}
+            >
+              <Avatar
+                alt={idpProfile?.name}
+                src={idpProfile?.picture}
+              />
+            </IconButton>
+          </Box>
+          }
+          {isLoggedUser &&
+          <Box>
+            <LogoutButton
+              sx={{
+                p: 0
+              }}
+              isLoggedUser={isLoggedUser}
+              styles={styles}
+            />
+          </Box>
+          }
+        </Stack>
+      </Drawer>
+      {isLoggedUser && idpProfile &&
+      <ProfilePopupComponent
+        userProfile={idpProfile}
+        showProfile={Boolean(anchorElProfile)}
+        idpLoading={idpLoading}
+        changePicture={updateProfilePicture}
+        changeProfile={updateProfile}
+        closePopup={handleCloseProfile}
+        style={{
+          zIndex: 10000
+        }}
+      />
+      }
+      </>
+    );
+  }
+  export default NavbarTemplate;
+  
\ No newline at end of file
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 4d47b2cd..96d53f64 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,19 +1,13 @@
-/**
-* Warning:
-* Dont edit this file by hand, has been generated by colors scss util
-* Uses default colors as base and then overriden by colors set via marketing
-**/
-
-$color_accent: #ff5e32;
+$color_accent: #d1ae1e;
 $color_alerts: #ff0000;
 $color_background_light: #ffffff;
 $color_background_dark: #000000;
 $color_button_background_color: #ffffff;
 $color_button_color: #000000;
-$color_gray_lighter: #F2F2F2;
-$color_gray_light: #DFDFDF;
+$color_gray_lighter: #f2f2f2;
+$color_gray_light: #dfdfdf;
 $color_gray_dark: #999999;
-$color_gray_darker: #4A4A4A;
+$color_gray_darker: #4a4a4a;
 $color_horizontal_rule_light: #e5e5e5;
 $color_horizontal_rule_dark: #7b7b7b;
 $color_icon_light: #ffffff;
@@ -25,16 +19,16 @@ $color_input_text_color_light: #363636;
 $color_input_text_color_dark: #ffffff;
 $color_input_text_color_disabled_light: #ffffff;
 $color_input_text_color_disabled_dark: #ffffff;
-$color_primary: #6d6e71;
+$color_primary: #00657F;
 $color_primary_contrast: #f1f2f2;
-$color_secondary: #00CEC4;
-$color_secondary_contrast: #ff5e32;
-$color_text_light: #ffffff;
+$color_secondary: #00657f;
+$color_secondary_contrast: #d7f0f4;
+$color_text_light: #FFFFFF;
 $color_text_med: #828282;
-$color_text_dark: #333333;
+$color_text_dark: #000000;
 $color_text_input_hints_light: #7b7b7b;
 $color_text_input_hints_dark: #7b7b7b;
-$color_text_input_hints: #c4c4c4;
+$color_text_input_hints: #66cfe3;
 
 :root {
   --color_primary: #{$color_primary};
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 0d638017..48776092 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -1,26 +1,31 @@
-/**
-* Warning:
-* Dont edit this file by hand, has been generated by fonts scss util
-* Generated with font values set via CMS
-**/
-
-$font-family: 'Nunito Sans', sans-serif;
+$font-family: "Builder";
 
 :root {
-  --font_family: #{$font-family};
+  --font_family: "Builder" !important;
 }
 
+@font-face {
+  font-family: "Builder";
+  src: url("/fonts/Roblox/RobloxBETA-Regular-v1.007.otf") format("opentype");
+  font-weight: normal;
+}
+@font-face {
+  font-family: "Builder";
+  src: url("/fonts/Roblox/RobloxDisplayBETA-Bold-v1.003.otf") format("opentype");
+  font-weight: bold;
+}
+  
 %font-regular {
-  font-family: 'Nunito Sans', sans-serif;
+  font-family: var(--font_family);
   font-weight: 400;
 }
 
 %font-semi {
-  font-family: 'Nunito Sans', sans-serif;
+  font-family: var(--font_family);
   font-weight: 600;
 }
 
 %font-bold {
-  font-family: 'Nunito Sans', sans-serif;
+  font-family: var(--font_family);
   font-weight: 700;
 }
\ No newline at end of file

From 0af6b163eec398d38e4e1863363b1422992ea653 Mon Sep 17 00:00:00 2001
From: Sam Young <sam.young@fntech.com>
Date: Tue, 9 Jul 2024 10:35:08 -0700
Subject: [PATCH 2/3] revert scss

---
 src/styles/colors.scss | 26 ++++++++++++++++----------
 src/styles/fonts.scss  | 27 +++++++++++----------------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 96d53f64..4d47b2cd 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,13 +1,19 @@
-$color_accent: #d1ae1e;
+/**
+* Warning:
+* Dont edit this file by hand, has been generated by colors scss util
+* Uses default colors as base and then overriden by colors set via marketing
+**/
+
+$color_accent: #ff5e32;
 $color_alerts: #ff0000;
 $color_background_light: #ffffff;
 $color_background_dark: #000000;
 $color_button_background_color: #ffffff;
 $color_button_color: #000000;
-$color_gray_lighter: #f2f2f2;
-$color_gray_light: #dfdfdf;
+$color_gray_lighter: #F2F2F2;
+$color_gray_light: #DFDFDF;
 $color_gray_dark: #999999;
-$color_gray_darker: #4a4a4a;
+$color_gray_darker: #4A4A4A;
 $color_horizontal_rule_light: #e5e5e5;
 $color_horizontal_rule_dark: #7b7b7b;
 $color_icon_light: #ffffff;
@@ -19,16 +25,16 @@ $color_input_text_color_light: #363636;
 $color_input_text_color_dark: #ffffff;
 $color_input_text_color_disabled_light: #ffffff;
 $color_input_text_color_disabled_dark: #ffffff;
-$color_primary: #00657F;
+$color_primary: #6d6e71;
 $color_primary_contrast: #f1f2f2;
-$color_secondary: #00657f;
-$color_secondary_contrast: #d7f0f4;
-$color_text_light: #FFFFFF;
+$color_secondary: #00CEC4;
+$color_secondary_contrast: #ff5e32;
+$color_text_light: #ffffff;
 $color_text_med: #828282;
-$color_text_dark: #000000;
+$color_text_dark: #333333;
 $color_text_input_hints_light: #7b7b7b;
 $color_text_input_hints_dark: #7b7b7b;
-$color_text_input_hints: #66cfe3;
+$color_text_input_hints: #c4c4c4;
 
 :root {
   --color_primary: #{$color_primary};
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 48776092..0d638017 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -1,31 +1,26 @@
-$font-family: "Builder";
+/**
+* Warning:
+* Dont edit this file by hand, has been generated by fonts scss util
+* Generated with font values set via CMS
+**/
+
+$font-family: 'Nunito Sans', sans-serif;
 
 :root {
-  --font_family: "Builder" !important;
+  --font_family: #{$font-family};
 }
 
-@font-face {
-  font-family: "Builder";
-  src: url("/fonts/Roblox/RobloxBETA-Regular-v1.007.otf") format("opentype");
-  font-weight: normal;
-}
-@font-face {
-  font-family: "Builder";
-  src: url("/fonts/Roblox/RobloxDisplayBETA-Bold-v1.003.otf") format("opentype");
-  font-weight: bold;
-}
-  
 %font-regular {
-  font-family: var(--font_family);
+  font-family: 'Nunito Sans', sans-serif;
   font-weight: 400;
 }
 
 %font-semi {
-  font-family: var(--font_family);
+  font-family: 'Nunito Sans', sans-serif;
   font-weight: 600;
 }
 
 %font-bold {
-  font-family: var(--font_family);
+  font-family: 'Nunito Sans', sans-serif;
   font-weight: 700;
 }
\ No newline at end of file

From 25bf91e5aed4304eec01116c941fc89218159a12 Mon Sep 17 00:00:00 2001
From: Sam Young <sam.young@fntech.com>
Date: Mon, 22 Jul 2024 10:40:22 -0700
Subject: [PATCH 3/3] Move AnimatedLink to its own file

---
 src/components/AnimatedLink.js    | 48 +++++++++++++++++++++++++++++++
 src/components/Link.js            | 43 ---------------------------
 src/components/Navbar/template.js |  3 +-
 3 files changed, 50 insertions(+), 44 deletions(-)
 create mode 100644 src/components/AnimatedLink.js

diff --git a/src/components/AnimatedLink.js b/src/components/AnimatedLink.js
new file mode 100644
index 00000000..199fb66d
--- /dev/null
+++ b/src/components/AnimatedLink.js
@@ -0,0 +1,48 @@
+
+import Link from "./Link";
+import Box from "@mui/material/Box";
+
+export const AnimatedLink = ({
+    color = "white",
+    hoverColor = "white",
+    children,
+    ...rest
+  }) => (
+    <Box
+      component={Link}
+      sx={{
+        position: "relative",
+        color: color,
+        "&:hover, &:focus": {
+          color: hoverColor,
+          textDecoration: "none",
+          "&::before": {
+            backgroundColor: hoverColor,
+            transform: "scaleX(1)",
+            transformOrigin: "left center"
+          }
+        },
+        "&::before": {
+          content: "\"\"",
+          position: "absolute",
+          left: 0,
+          bottom: {
+            xs: -0.5,
+            md: -2
+          },
+          height: "0.5px",
+          width: "100%",
+          backgroundColor: color,
+          transform: "scaleX(0)",
+          transformOrigin: "right center",
+          transition: "transform .45s cubic-bezier(0.86, 0, 0.07, 1)"
+        }
+      }}
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+  
+  export default AnimatedLink;
+  
\ No newline at end of file
diff --git a/src/components/Link.js b/src/components/Link.js
index 1fe6b7ad..a22dbbf9 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Link as GatsbyLink } from "gatsby";
-import Box from "@mui/material/Box";
 // Since DOM elements <a> cannot receive activeClassName
 // and partiallyActive, destructure the prop here and
 // pass it only to GatsbyLink
@@ -39,46 +38,4 @@ const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => {
   );
 };
 
-export const AnimatedLink = ({
-  color = "white",
-  hoverColor = "white",
-  children,
-  ...rest
-}) => (
-  <Box
-    component={Link}
-    sx={{
-      position: "relative",
-      color: color,
-      "&:hover, &:focus": {
-        color: hoverColor,
-        textDecoration: "none",
-        "&::before": {
-          backgroundColor: hoverColor,
-          transform: "scaleX(1)",
-          transformOrigin: "left center"
-        }
-      },
-      "&::before": {
-        content: "\"\"",
-        position: "absolute",
-        left: 0,
-        bottom: {
-          xs: -0.5,
-          md: -2
-        },
-        height: "0.5px",
-        width: "100%",
-        backgroundColor: color,
-        transform: "scaleX(0)",
-        transformOrigin: "right center",
-        transition: "transform .45s cubic-bezier(0.86, 0, 0.07, 1)"
-      }
-    }}
-    {...rest}
-  >
-    {children}
-  </Box>
-);
-
 export default Link;
diff --git a/src/components/Navbar/template.js b/src/components/Navbar/template.js
index 16c057e7..c76350c4 100644
--- a/src/components/Navbar/template.js
+++ b/src/components/Navbar/template.js
@@ -10,7 +10,8 @@ import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import SvgIcon from "@mui/material/SvgIcon";
 import Avatar from "@mui/material/Avatar";
-import Link, { AnimatedLink } from "../Link";
+import Link from "../Link";
+import AnimatedLink from "../AnimatedLink";
 import ProfilePopupComponent from "@openeventkit/event-site/src/components/ProfilePopupComponent";
 import LogoutButton from "../LogoutButton";