Dropdown fixed

Author: ryanhodge240

templerobotics.github.io/app/globals.css

@@ -25,6 +25,7 @@
   --foreground: #171717;
   --foreground-hover: #4e4e4e;
   --primary: #9D2235;
+  --primary-hover: #8D2235;
 }
 
 /* Dark theme colors */

templerobotics.github.io/components/navigation/DropDownMenu.module.css

@@ -1,21 +1,38 @@
-.menuItem {
-    height: 25%;
-    color: black;
-    text-align: center;
-    text-decoration: none;
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdownMenu {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    height: unset;
+}
+
+.dropdown:hover .dropdownMenu {
     display: block;
-    border-bottom: 1px solid black;
 }
 
 .dropdownLink {
-    cursor: pointer;
     gap: 0;
 }
 
-.title:hover {
+.menuItem {
+    background-color: var(--primary);
     cursor: pointer;
+    display: block;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
 }
 
-.popOverRoot {
-    pointer-events: none;
-}
+.menuItem:hover {
+    background-color: var(--primary-hover);
+}
+
+.menuItem:last-child {
+    border-bottom-left-radius: 8;
+    border-bottom-right-radius: 8;
+}

templerobotics.github.io/components/navigation/DropDownMenu.tsx

@@ -2,9 +2,9 @@
 import styles from './DropdownMenu.module.css'
 
 import { useRouter } from 'next/navigation'
-import React, { useState } from 'react'
+import React from 'react'
 
-import { Link, Menu, MenuItem } from '@mui/material'
+import { Link } from '@mui/material'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 
 type DropDownMenuProps = {
@@ -13,77 +13,21 @@ type DropDownMenuProps = {
 }
 
 export default function DropdownMenu ({ title, items }: DropDownMenuProps): React.ReactElement {
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    let currentlyHovering = false;
     const router = useRouter()
 
-    const handleMouseOver = (event: React.MouseEvent<HTMLElement>) => {
-        handleHover();
-        if (anchorEl !== event.currentTarget) {
-            setAnchorEl(event.currentTarget);
-        }
-    };
-
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const handleHover = () => {
-        currentlyHovering = true;
-    }
-
-    const handleCloseHover = () => {
-        currentlyHovering = false;
-        setTimeout(() => {
-            if (!currentlyHovering) {
-                handleClose();
-            }
-        }, 50);
-    }
-
     const handleClick = (path: string) => {
-        handleClose();
         router.push(path);
     }
 
 	return (
-        <div>
-            <Link
-                className={`flex-horizontal ${styles.dropdownLink}`}
-                onClick={() => handleClick(title.path)}
-                onMouseOver={handleMouseOver}
-                onMouseLeave={handleCloseHover}>
-                {title.text}
-                <KeyboardArrowDownIcon fontSize='small' />
+        <div className={styles.dropdown}>
+            <Link className={`flex-horizontal ${styles.dropdownLink}`}>
+                {title.text} <KeyboardArrowDownIcon fontSize='small'/>
             </Link>
 
-            <Menu
-                id="simple-menu"
-                anchorEl={anchorEl}
-                open={Boolean(anchorEl)}
-                onClose={handleClose}
-                autoFocus={false}
-                slotProps={{
-                    paper: {
-                        style: {
-                            borderTopLeftRadius: 0,
-                            borderTopRightRadius: 0
-                        }
-                    },
-                    list: {
-                        onMouseLeave: handleCloseHover,
-                        onMouseEnter: handleHover,
-                        style: {
-                            pointerEvents: 'auto',
-                            backgroundColor: 'var(--primary)'
-                        }
-                    }
-                }}
-                PopoverClasses={{
-                    root: styles.popOverRoot
-                }}>
-                {items.map((item, i) => <MenuItem key={i} className={styles.menuItem} onClick={() => handleClick(item.path)}>{item.text}</MenuItem>)}
-            </Menu>
+            <div className={styles.dropdownMenu}>
+                {items.map((item, i) => <div key={i} className={styles.menuItem} onClick={() => handleClick(item.path)}>{item.text}</div>)}
+            </div>
         </div>
 	)
 }

templerobotics.github.io/components/navigation/NavBar.tsx

@@ -10,7 +10,7 @@ import DropDownMenu from './DropdownMenu'
 
 const dropDownItems = [
 	{ text: 'Events', path: PATHS.EVENTS },
-	{ text: 'Sponsors', path: PATHS.SPONSORS }
+	{ text: 'ewfwfwfwewefwefwefew', path: PATHS.SPONSORS }
 ]
 
 export default function NavBar (): React.ReactElement {