import React, { useContext } from 'react'; import { NavLink } from 'react-router-dom'; import { ListGroup, ListGroupItem } from 'reactstrap'; import { MenuContext } from '../context/MenuToggle-context'; import homeImage from '../static/images/home.png'; import Mattress from '../static/images/mattress.png'; import BedBase from '../static/images/bedBase.png'; const SideBar = () => { const { MenuVisible, toggleMenu } = useContext(MenuContext); let menuStyle = {}; if (MenuVisible) { menuStyle = { left: '0px', }; } const toggleMenuHandler = () => toggleMenu(); return ( <div className="SideBar-container" style={menuStyle} data-test="component-sideBar" data-testid="component-sideBar-id" id="menuId" isVisible={MenuVisible} > <button className="sideBar-button" onClick={toggleMenuHandler} type="button" data-test="sideBar-button" > X </button> <div className="sideBar-menu" data-test="sideBar-menu"> <ListGroup> <ListGroupItem active tag="button" action> MENU </ListGroupItem> <ListGroupItem tag="button" action> <NavLink extact to="/"> <div className="sideBar-link"> <img src={homeImage} className="sideBar-image" alt="" data-test="home-image" /> <h4>Home</h4> </div> </NavLink> </ListGroupItem> <ListGroupItem tag="button" action> <NavLink extact to="/Mattress"> <div className="sideBar-link"> <img src={Mattress} className="sideBar-image" alt="" data-test="mattress-image" /> <h4>Mattress</h4> </div> </NavLink> </ListGroupItem> <ListGroupItem tag="button" action> <NavLink extact to="/BedBases"> <div className="sideBar-link"> <img src={BedBase} className="sideBar-image" alt="" data-test="bedBase-image" /> <h4>Bed Bases</h4> </div> </NavLink> </ListGroupItem> </ListGroup> </div> </div> ); }; export default SideBar;