set default for Navbar state + CSS mobile changes

compsoc-edinburgh · Feb 9, 2024 · 59ebe37 · 59ebe37
1 parent 7734725
commit 59ebe37
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
diff --git a/src/Footer/Footer.tsx b/src/Footer/Footer.tsx
@@ -2,11 +2,11 @@ import styled from 'styled-components'
 import Logo from '../components/Logo'
 
 const StyledFooterWrapper = styled.div`
-  border: 5px solid #fcf6fe;
+  border: 5px solid #7816f4;
   background: #7816f4;
   width: inherit;
-  margin: 3vw;
-  margin-bottom: 4rem;
+  margin: 3svw;
+  margin-bottom: 11svh;
   padding: 32px;
   height: 50vh;
   border-radius: 25px;
@@ -24,10 +24,7 @@ const Footer = () => {
   return (
     <StyledFooterWrapper>
       <Logo animated color="#FBF6FD" size={126} /> ❤️
-      <a
-        href="https://comp-soc.com"
-        target="_blank"
-        rel="noreferrer">
+      <a href="https://comp-soc.com" target="_blank" rel="noreferrer">
         <img
           src="media/logos/comp-soc.png"
           alt="CompSoc Logo"

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -7,7 +7,7 @@ import Gravity from './Gravity'
 import { ACCENT_COLOR } from '../constants'
 import { useEffect, useRef, useState } from 'react'
 import Boids from './Boids'
-import BrickBreaker from  './Breaker'
+import BrickBreaker from './Breaker'
 
 const StyledStage = styled(Stage)`
   position: absolute;
@@ -33,7 +33,7 @@ const StyledHeaderWrapper = styled.div`
     50% center / 3px 3px;
   width: inherit;
   margin: 3vw;
-  height: 85vh;
+  height: 86svh;
   border-radius: 25px;
   display: flex;
   align-items: center;
@@ -70,7 +70,7 @@ const Header = () => {
       stage: <BrickBreaker />,
       creator: 'Ali Abdelaal',
       url: 'https://3li.ae',
-    }
+    },
   ]
 
   const [currentStageIndex, setCurrentStageIndex] = useState(

diff --git a/src/Header/Navbar.tsx b/src/Header/Navbar.tsx
@@ -1,7 +1,7 @@
 import { motion, AnimatePresence } from 'framer-motion'
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { styled } from 'styled-components'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { DISCORD_INVITE_LINK } from '../constants'
 import WavyText from '../components/WavyText'
 
@@ -19,7 +19,7 @@ const StyledNavbar = styled.div`
   gap: 1.5rem;
   position: fixed;
   padding: 0 1.25rem 0 1.25rem;
-  bottom: 1vw;
+  bottom: 1.5svh;
   left: 50%;
   transform: translateX(-50%);
   z-index: 100;
@@ -84,31 +84,53 @@ const HoverBackground = ({ hoveredItem }: { hoveredItem: HTMLDivElement }) => {
 }
 
 const Navbar = () => {
+  const navigate = useNavigate()
+  const location = useLocation()
   const [hoveredItem, setHoveredItem] = useState<HTMLDivElement | null>(null)
+  const navbarRef = useRef<HTMLDivElement>(null)
 
-  const navigate = useNavigate()
+  const setHoveredItemToDefault = () => {
+    if (navbarRef.current) {
+      const defaultItem = Array.from(navbarRef.current.children).find(
+        (child) =>
+          (child as HTMLDivElement).getAttribute('href') ===
+            location.pathname ||
+          child.textContent ===
+            navBarRoutes.find((route) => route.path === location.pathname)?.name
+      ) as HTMLDivElement | undefined
+
+      if (defaultItem) {
+        setHoveredItem(defaultItem)
+      }
+    }
+  }
+
+  useEffect(() => {
+    setHoveredItemToDefault()
+  }, [location.pathname])
 
   return (
-    <StyledNavbar>
+    <StyledNavbar ref={navbarRef}>
       <AnimatePresence>
         {hoveredItem && <HoverBackground hoveredItem={hoveredItem} />}
       </AnimatePresence>
 
       {navBarRoutes.map((route) => (
         <NavbarItem
+          key={route.path}
           onClick={() => navigate(route.path)}
           onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) =>
             setHoveredItem(e.currentTarget)
           }
-          onMouseLeave={() => setHoveredItem(null)}>
+          onMouseLeave={() => setHoveredItemToDefault()}>
           {route.name}
         </NavbarItem>
       ))}
       <NavbarItem
         as="a"
         href={DISCORD_INVITE_LINK}
         onMouseEnter={(e: any) => setHoveredItem(e.currentTarget)}
-        onMouseLeave={() => setHoveredItem(null)}>
+        onMouseLeave={() => setHoveredItemToDefault()}>
         <WavyText text="Discord" />
       </NavbarItem>
     </StyledNavbar>