I have 2 problems in my code , as you see I have a navbar that contain 6 items 2 of them should display a dropdown list when clicked .
I was able to make them display a dropdown list but there is a problem .
problem 1 : when I click on on of the 2 items both drop down list shows up , but what i want is that each item shows its dropdown list , plus I want when clicking outside the list for it to close.
problem 2 : when clicking on the other 4 items there is a path that i put to them , but it seem to work with the two item that shows a dropdown list , and i dont want that i want them with no path .
this is my navitem.js :
export const navItems = [
{
id: 1,
title: "mybook",
path: "./mybook",
cName: "navitem",
},
{
id: 2,
title: "mylab",
path: "./mylab",
cName: "navitem",
},
{
id: 3,
title: "marks",
path: "./marks",
cName: "navitem",
},
{
id: 4,
title: "trash",
path: "./trash",
cName: "navitem",
},
{
id: 5,
title: "mywork",
path: "./mywork",
cName: "navitem",
},
{
id: 6,
title: "set",
path: "./set",
cName: "navitem",
},
];
export const mybookDropdown = [
{
id: 1,
title: "fav",
path: "./fav",
cName: "submenu-item",
},
{
id: 2,
title: "continue",
path: "./continue",
cName: "submenu-item",
},
];
export const mylabDropdown = [
{
id: 1,
title: "dailycheck",
path: "./dailycheck",
cName: "submenu-item",
},
{
id: 2,
title: "recommendation",
path: "./recommendation",
cName: "submenu-item",
},
{
id: 3,
title: "popular",
path: "./popular",
cName: "submenu-item",
},
];
and here is my Dropdown.js :
import React, { useState } from "react";
import { mybookDropdown , mylabDropdown } from "./NavItems";
import { Link } from "react-router-dom";
import "./Dropdown.css";
function Dropdown() {
const [dropdown, setDropdown] = useState(false);
return (
<>
<ul
className={dropdown ? "mybook-submenu clicked" : "mybook-submenu"}
onClick={() => setDropdown(!dropdown)}
>
{mybookDropdown.map((item) => {
return (
<li key={item.id}>
<Link
to={item.path}
className={item.cName}
onClick={() => setDropdown(false)}
>
{item.title}
</Link>
</li>
);
})}
</ul>
<ul
className={dropdown ? "mylab-submenu clicked" : "mylab-submenu"}
onClick={() => setDropdown(!dropdown)}
>
{mylabDropdown.map((item) => {
return (
<li key={item.id}>
<Link
to={item.path}
className={item.cName}
onClick={() => setDropdown(false)}
>
{item.title}
</Link>
</li>
);
})}
</ul>
</>
);
}
export default Dropdown;
lastly here is what I added to the navbar.jsx :
import { navItems } from "./NavItems";
import Dropdown from "./Dropdown";
export default function navbar() {
const [dropdown, setDropdown] = useState(false);
return (
<ul className={[styles.navitem]}>
{navItems.map((item) => {
if (item.title == "mybook")
return(
<li key={item.id} className={item.cName}
onClick={() => setDropdown(true)}
>
<Link to={item.path}>{item.title}</Link>
</li>
);
else if (item.title == "mylab")
return(
<li key={item.id} className={item.cName}
onClick={() => setDropdown(true)}
>
<Link to={item.path}
>{item.title}</Link>
</li>
);
return(
<li key={item.id} className={item.cName}>
<Link to={item.path}>{item.title}</Link>
</li>
);
}
)}
{ dropdown && <Dropdown />}
</ul>
);
}