Выделите активный пункт меню другим цветом - PullRequest
Новая
       2

Выделите активный пункт меню другим цветом

0 голосов
/ 19 февраля 2020

У меня есть элементы NavDropdown и NavLink, которые должны быть выделены, когда активны. Как мне этого добиться? Я попытался использовать activeClassName, но я не смог добиться этого внутри реагирующих bootstrap компонентов. В документации о response- bootstrap я видел события eventKey и activeKey, но я запутался в их использовании.

Может кто-нибудь подсказать мне, как мне этого добиться? 

import React, { useState } from "react";
import logo from "./logo.svg";
import Navbar from "react-bootstrap/Navbar";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import { HashLink as Link } from "react-router-hash-link";

function Navigation() {

  const [activeDropdown, setActiveDropdown] = useState("");

  const clearActiveDropdown = () => setActiveDropdown("");

  return (
    <Navbar bg="white" expand="lg" fixed="top">
      <Container fluid>
        <Navbar.Brand href="/">
          <img src={logo} id="logo" className="App-logo" alt="logo" />
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <NavDropdown
              title="About"
              onMouseEnter={() => setActiveDropdown("about")}
              onMouseLeave={clearActiveDropdown}
              show={activeDropdown === "about"}
            >
              <NavDropdown.Item>
                <Link to="/about#about">Who we are</Link>
              </NavDropdown.Item>
              <NavDropdown.Item>
                <Link to="/about#how_we_work">How we Work</Link>
              </NavDropdown.Item>
              <NavDropdown.Item>
                <Link to="/about#certifications">Certifications</Link>
              </NavDropdown.Item>
              <NavDropdown.Item>
                <Link to="/about#partners">Partners</Link>
              </NavDropdown.Item>
            </NavDropdown>
            <NavDropdown
              title="Services"
              onMouseEnter={() => setActiveDropdown("services")}
              onMouseLeave={clearActiveDropdown}
              show={activeDropdown === "services"}
            >
              <NavDropdown.Item href="#action/2.1">
                Cloud Digital Transformation
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/2.2">
                Expert Cloud Advise and Support
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/2.3">
                Software Development
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/2.4">
                Dedicated Teams
              </NavDropdown.Item>
            </NavDropdown>
            <Nav.Link href="https://www.genesecloud.academy/" target="_blank">
              Cloud Academy
            </Nav.Link>

            <Nav.Link href="#contact">Contact</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default Navigation;
...