I am kind of stuck with a problem on react js. I am using the bootstrap library: https://react-bootstrap.github.io/components/navbar/
The home button is a <NavItem />, and that is why, I am able to give it a class name "active" when it is active, and thereby address it in SASS using .navbarItem.active and set the border-bottom blue line of 2px, which can be seen in the picture:
Here is the code of this section:
const navItems = [
{ to: '/home', name: 'Home', exact: true, Icon: MdHome },
];
(...)
{navItems.map(({ to, name, exact, Icon }, index) => (
<NavItem key={index} className={bem.e('nav-item')} >
<BSNavLink
id={`navItem-${name}-${index}`}
className="navbarItem text-uppercase"
tag={NavLink}
to={to}
activeClassName="active"
exact={exact}
>
<Icon className={bem.e('nav-item-icon')} />
<span className="">{name}</span>
</BSNavLink>
</NavItem>
))}
Now I need to do the same thing with the dropdown item. If something from the dropdown menu has been selected, it needs to make that blue line below the dropdown button. However, since this is a <NavDropdown />, I am not sure how to set a class name of "active" in here, as soon as anything from that dropdown has been selected. I want to add that class name, because that would make it possible to address this dropdown button using .dropdown-toggle.active on SASS.
Here the picture of dropdown on the menu
Here the code snippet for dropdowns:
const dropDownAbout = [
{ to: '/about', name: 'About', exact: true, Icon: FaInfoCircle },
{ to: '/atc', name: 'ATC', exact: true, Icon: FaHeadphonesAlt },
{ to: '/pilot', name: 'Pilot', exact: true, Icon: FaPlane },
{ to: '/departments', name: 'Departments', exact: true, Icon: GiGraduateCap },
{ to: '/community', name: 'Community', exact: true, Icon: CgCommunity },
];
(...)
<NavDropdown title={<span className='text-uppercase'> <FaInfoCircle className={bem.e('nav-item-icon')} /> About </span> } id="navbarScrollingDropdown"
show={AboutDropdown} onMouseEnter={showAboutDropdown} onMouseLeave={showAboutDropdown}>
{dropDownAbout.map(({ to, name, exact, Icon }, index) => (
<NavDropdown.Item>
<BSNavLink
id={`navItem-${name}-${index}`}
className="dropdownItem"
tag={NavLink}
to={to}
activeClassName="active"
exact={exact}
>
<Icon className={bem.e('nav-item-icon')} />
<span className=""> {name}</span>
</BSNavLink>
</NavDropdown.Item>
))}
</NavDropdown>
And in order to have the full context, here the entire React JS file:
import mainpagelogo from '../../logo/mainpage-logo.png';
import 'bootstrap/dist/css/bootstrap.css'
import { Navbar, NavDropdown } from 'react-bootstrap'
import {
MdHome,
MdKeyboardArrowDown,
} from 'react-icons/md';
import {
FaHeadphonesAlt,
FaInfoCircle,
FaPlane,
} from 'react-icons/fa'
import {
GiGraduateCap,
GiPlanePilot,
} from 'react-icons/gi'
import {
CgCommunity
} from 'react-icons/cg'
import {
Collapse,
Nav,
NavItem,
NavLink as BSNavLink,
} from 'reactstrap';
import { NavLink } from "react-router-dom";
import bn from '../../utils/bemnames';
import React, { useState } from 'react';
const navItems = [
{ to: '/home', name: 'Home', exact: true, Icon: MdHome },
];
const dropDownAbout = [
{ to: '/about', name: 'About', exact: true, Icon: FaInfoCircle },
{ to: '/atc', name: 'ATC', exact: true, Icon: FaHeadphonesAlt },
{ to: '/pilot', name: 'Pilot', exact: true, Icon: FaPlane },
{ to: '/departments', name: 'Departments', exact: true, Icon: GiGraduateCap },
{ to: '/community', name: 'Community', exact: true, Icon: CgCommunity },
];
const bem = bn.create('topbar');
function Topbar() {
const [AboutDropdown, setAboutDropdown] = useState(false);
const showAboutDropdown = (e)=>{
setAboutDropdown(!AboutDropdown);
}
const hideAboutDropdown = e => {
setAboutDropdown(false);
}
return (
<Navbar bg="white"
sticky="top" expand="sm" collapseOnSelect >
<Navbar.Brand>
<img src={mainpagelogo} width="165px" height="55px" />{' '}
</Navbar.Brand>
<Navbar.Toggle className="coloring" />
<Navbar.Collapse>
<Nav horizontal>
{navItems.map(({ to, name, exact, Icon }, index) => (
<NavItem key={index} className={bem.e('nav-item')} >
<BSNavLink
id={`navItem-${name}-${index}`}
className="navbarItem text-uppercase"
tag={NavLink}
to={to}
activeClassName="active"
exact={exact}
>
<Icon className={bem.e('nav-item-icon')} />
<span className="">{name}</span>
</BSNavLink>
</NavItem>
))}
<NavDropdown title={<span className='text-uppercase'> <FaInfoCircle className={bem.e('nav-item-icon')} /> About </span> } id="navbarScrollingDropdown"
show={AboutDropdown} onMouseEnter={showAboutDropdown} onMouseLeave={showAboutDropdown}>
{dropDownAbout.map(({ to, name, exact, Icon }, index) => (
<NavDropdown.Item>
<BSNavLink
id={`navItem-${name}-${index}`}
className="dropdownItem"
tag={NavLink}
to={to}
activeClassName="active"
exact={exact}
>
<Icon className={bem.e('nav-item-icon')} />
<span className=""> {name}</span>
</BSNavLink>
</NavDropdown.Item>
))}
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
export default Topbar
Anyone can help me out here? Maybe there is another way of doing this..
