|
| 1 | +import React, { useState } from "react"; |
| 2 | +import { Link } from "react-router-dom"; |
| 3 | + |
| 4 | +import { |
| 5 | + Nav, |
| 6 | + Navbar, |
| 7 | + Collapse, |
| 8 | + NavItem, |
| 9 | + NavLink, |
| 10 | + UncontrolledDropdown, |
| 11 | + DropdownToggle, |
| 12 | + NavbarToggler, |
| 13 | + DropdownMenu, |
| 14 | + DropdownItem, |
| 15 | + Button, |
| 16 | +} from "reactstrap"; |
| 17 | +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; |
| 18 | +import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"; |
| 19 | + |
| 20 | +const SimpleNavbar = (props) => { |
| 21 | + const [isOpen, setIsOpen] = useState(false); |
| 22 | + const toggle = () => setIsOpen(!isOpen); |
| 23 | + |
| 24 | + const sidebar = () => { |
| 25 | + props.openSidebar(); |
| 26 | + }; |
| 27 | + |
| 28 | + let Icon; |
| 29 | + if (props.sidebarOpen) { |
| 30 | + Icon = <FontAwesomeIcon icon={faArrowLeft} />; |
| 31 | + } else { |
| 32 | + Icon = <FontAwesomeIcon icon={faArrowRight} />; |
| 33 | + } |
| 34 | + |
| 35 | + return ( |
| 36 | + <Navbar color="dark" dark expand="md"> |
| 37 | + <Button className="btn btn-primary" onClick={sidebar} id="menu-toggle"> |
| 38 | + {Icon} |
| 39 | + </Button> |
| 40 | + <NavbarToggler onClick={toggle} /> |
| 41 | + <Collapse isOpen={isOpen} navbar> |
| 42 | + <Nav className="ml-auto" navbar> |
| 43 | + <NavItem> |
| 44 | + <NavLink to="/users" tag={Link}> |
| 45 | + Users |
| 46 | + </NavLink> |
| 47 | + </NavItem> |
| 48 | + <NavItem> |
| 49 | + <NavLink to="/task" tag={Link}> |
| 50 | + Task |
| 51 | + </NavLink> |
| 52 | + </NavItem> |
| 53 | + <UncontrolledDropdown nav inNavbar> |
| 54 | + <DropdownToggle nav caret> |
| 55 | + Menu |
| 56 | + </DropdownToggle> |
| 57 | + <DropdownMenu right> |
| 58 | + <DropdownItem to="/contact" tag={Link}> |
| 59 | + Contact |
| 60 | + </DropdownItem> |
| 61 | + <DropdownItem to="/about" tag={Link}> |
| 62 | + About |
| 63 | + </DropdownItem> |
| 64 | + <DropdownItem to="/map" tag={Link}> |
| 65 | + Map |
| 66 | + </DropdownItem> |
| 67 | + <DropdownItem to="/tools" tag={Link}> |
| 68 | + Tools |
| 69 | + </DropdownItem> |
| 70 | + </DropdownMenu> |
| 71 | + </UncontrolledDropdown> |
| 72 | + <NavItem> |
| 73 | + <NavLink to="Logout" tag={Link}> |
| 74 | + Logout |
| 75 | + </NavLink> |
| 76 | + </NavItem> |
| 77 | + </Nav> |
| 78 | + </Collapse> |
| 79 | + </Navbar> |
| 80 | + ); |
| 81 | +}; |
| 82 | + |
| 83 | +export default SimpleNavbar; |
0 commit comments