Mobile Dropdown Design Next.js (CSS or Tailwind) - css

Question

I want to make my mobile menu have a dropdown when the main labels are clicked as they do for the regular desktop navigation. The dropdown works for the mobile menu, but it displays it on the left side of the main label. What I want it to do is expand or toggle/show underneath the top label when clicked if that makes sense. An example would be the mobile menu here: https://www.youtube.com/watch?v=JEV7WE0UBiQ&t=2738s, but in my case, I only need to go one dropdown deep.
Here are my Navbar and Dropdown components for review. I also provided the relevant CSS as well.
I know there is much to be improved and there are other small errors I am getting, but if I can get help on this part, that would be great. I've actually been using the help of ChatGPT to assist with some things, but it can only get me so far. Sometimes it's great, and other times I just want to punch it, lol!
import React, { useState } from "react";
import Link from "next/link";
import Dropdown from "./Dropdown";
import { menuItems, mobileMenuItems } from "./MenuItems";
// Import the FontAwesomeIcon component
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
// import the icons you need
import {
faChevronDown,
faBars,
faXmark,
} from "#fortawesome/free-solid-svg-icons";
function Navbar() {
const [click, setClick] = useState(false);
const [dropdownOpen, setDropdownOpen] = useState({
dropdown1: false,
dropdown2: false,
dropdown3: false,
});
const handleClick = () => {
setClick(!click);
setDropdownOpen({ dropdown1: false, dropdown2: false, dropdown3: false });
};
const closeMobileMenu = () => {
setClick(false);
setDropdownOpen({ dropdown1: false, dropdown2: false, dropdown3: false });
};
const toggleDropdown = (dropdown) => {
if (window.innerWidth < 950) {
setDropdownOpen({ [dropdown]: !dropdownOpen[dropdown] });
} else {
setDropdownOpen({ [dropdown]: !dropdownOpen[dropdown] });
}
};
return (
<nav>
<div className="container mx-auto px-10 mb-8">
<div className="relative border-b w-full inline-block border-blue-400 py-8">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
{/* Mobile menu button*/}
<button
className="inline-flex p-2 rounded-md text-gray-400 hover:text-white hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white text-3xl md:hidden"
onClick={() => {
setClick(!click);
}}
>
<FontAwesomeIcon icon={click ? faXmark : faBars} />
</button>
</div>
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div className="flex-1 flex flex-shrink-0 flex px-12 items-center ">
<h1 className="font-bold text-4xl cursor-pointer text-white">
My<span className="text-blue-500">site</span>
</h1>
</div>
<div className="hidden md:float-left md:contents">
<ul className="nav-menu">
{menuItems.map((link, index) => (
<li
key={index}
className="nav-item"
onMouseEnter={
link.dropdownType
? () => toggleDropdown(link.dropdownType)
: null
}
onMouseLeave={
link.dropdownType
? () => toggleDropdown(link.dropdownType)
: null
}
>
<Link href={link.href}>
<a className="menuItems nav-links">
{link.icon && (
<FontAwesomeIcon
className="px-2"
icon={link.icon}
style={{ fontSize: 20, color: link.color }}
/>
)}
{link.label}
{link.dropdownType && (
<span className="faChevronDown">
<FontAwesomeIcon
icon={faChevronDown}
></FontAwesomeIcon>
</span>
)}
</a>
</Link>
{link.dropdownType && dropdownOpen[link.dropdownType] && (
<Dropdown type={link.dropdownType} />
)}
</li>
))}
</ul>
</div>
</div>
</div>
</div>
{/* ----------------------Hamburger Menu----------------------- */}
<ul
className={click ? "mobileNav-menu active" : "sm:hidden mobileNav-menu"}
>
{mobileMenuItems.map((link, index) => (
<li key={index} className="nav-item">
<Link href={link.href}>
<a
onClick={
link.dropdownType
? () => toggleDropdown(link.dropdownType)
: closeMobileMenu
}
className="menuItems nav-links dropdown-toggle"
>
{link.icon && (
<FontAwesomeIcon
className="px-2"
icon={link.icon}
style={{ fontSize: 20, color: link.color }}
/>
)}
{link.label}
{link.dropdownType && (
<span className="faChevronDown">
<FontAwesomeIcon icon={faChevronDown}></FontAwesomeIcon>
</span>
)}
</a>
</Link>
{link.dropdownType && dropdownOpen[link.dropdownType] && (
<ul className="dropdown-menu">
<Dropdown type={link.dropdownType} onClick={closeMobileMenu} />
</ul>
)}
</li>
))}
</ul>
</nav>
);
}
export default Navbar;
and the Dropdown component
import React, { useState, useEffect } from "react";
import Link from "next/link";
import {
getFeaturedArticlesCategories,
getNewsCategories,
getReviewsCategories,
} from "../services";
function useCategories() {
const [categories, setCategories] = useState({
featured: [],
news: [],
reviews: [],
});
useEffect(() => {
let cancel = false;
const fetchCategories = async () => {
const featured = await getFeaturedArticlesCategories();
const news = await getNewsCategories();
const reviews = await getReviewsCategories();
if (!cancel) {
setCategories({ featured, news, reviews });
}
};
fetchCategories();
return () => {
cancel = true;
};
}, []);
return categories;
}
function Dropdown({ type, onClick }) {
const [click, setClick] = useState(false);
const categories = useCategories();
const handleClick = () => setClick(!click);
return (
<>
<ul
onClick={() => {
handleClick();
onClick();
}}
className={click ? "dropdown-menu clicked" : "dropdown-menu"}
>
{categories[type].map((item, { active }) => (
<Link href={`/${type}/${item.slug}`} key={item.slug}>
<a
className={`group flex justify-center items-center px-4 py-2 text-sm font-semibold cursor-pointer ${
active
? "text-gray-700"
: "menuItems hover:bg-indigo-500 transition-all duration-500 ease-in"
}`}
>
{item.name}
</a>
</Link>
))}
</ul>
</>
);
}
export default Dropdown;
and the CSS
//Nav Menu
.menuItems {
&:hover {
color: rgb(255, 0, 0);
}
}
.navbar {
width: 90%;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 5rem;
border-bottom-width: 1px;
border-color: #60a5fa;
}
.navbar-logo {
color: #fff;
justify-self: start;
margin-left: -1rem;
cursor: pointer;
text-decoration: none;
line-height: 2.5rem;
font-size: 2.25rem;
font-weight: 700;
}
.nav-menu {
display: grid;
grid-template-columns: repeat(5, auto);
grid-gap: 1rem;
list-style: none;
text-align: center;
width: 70vw;
justify-content: end;
margin-right: 2rem;
}
.nav-item {
display: flex;
align-items: center;
height: 4rem;
}
.nav-links {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
display: inline-flex;
font-weight: 600;
justify-content: center;
width: 100%;
cursor: pointer;
}
.nav-links:hover {
background-color: #1888ff;
border-radius: 4px;
transition: all 0.2s ease-out;
}
.faBars {
color: #fff;
}
.nav-links-mobile {
display: none;
}
.menu-icon {
display: none;
}
#media screen and (max-width: 950px) {
.NavbarItems {
position: relative;
}
.mobileNav-menu {
display: flex;
flex-direction: column;
width: 100%;
height: 90vh;
position: absolute;
padding-top: 5rem;
padding-bottom: 15rem;
padding-left: 1rem;
bottom: 0;
top: 5rem;
left: -100%;
opacity: 1;
transition: all 0.5s ease;
}
.mobileNav-menu.active {
background: #242222;
left: 0;
opacity: 1;
transition: all 0.5s ease;
z-index: 1;
}
.nav-links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.nav-links:hover {
background-color: #1888ff;
border-radius: 0;
}
.navbar-logo {
position: absolute;
top: 0;
left: 0;
transform: translate(25%, 50%);
}
.menu-icon {
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
}
.faXmark {
color: #fff;
font-size: 2rem;
}
.faChevronDown {
margin-left: 0.5rem;
padding: 0.5rem;
}
.nav-links-mobile {
display: block;
text-align: center;
padding: 1.5rem;
margin: 2rem auto;
border-radius: 4px;
width: 80%;
background: #1888ff;
text-decoration: none;
color: #fff;
font-size: 1.5rem;
}
.nav-links-mobile:hover {
background: #fff;
color: #1888ff;
transition: 250ms;
}
}
//Dropdown
.dropdown-menu {
background: rgb(184, 183, 231);
width: 10rem;
position: absolute;
border-radius: 0.375rem;
top: 6rem;
list-style: none;
text-align: start;
z-index: 10;
}
.dropdown-menu li {
background: #1888ff;
cursor: pointer;
}
.dropdown-menu li:hover {
background: #5cabff;
}
.dropdown-menu.clicked {
display: none;
}
.dropdown-link {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
color: #fff;
padding: 16px;
}