SHARE
TWEET

Untitled

a guest Jan 22nd, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as React from 'react';
  2. import { useState } from 'react';
  3. import Icon from '../Icon';
  4. import { NavLink, withRouter } from 'react-router-dom';
  5. import styled, { withTheme } from 'styled-components';
  6. import { Route } from 'react-router-dom';
  7.  
  8. const Li = styled.li`
  9.   ${props => props.selected && `
  10.     box-shadow: inset 8px 0px 0px 0px rgba(69,161,255,1);
  11.     background-color: white;
  12.     font-weight: bold;
  13.   `}
  14.   padding: 10px 20px 10px 30px;
  15.   font-size: 21px;
  16. `;
  17. const StyledNavLink = styled(NavLink)`
  18.   text-decoration: none;
  19.   &:active,
  20.   &:link,
  21.   &:visited {
  22.     color: inherit;
  23.   }
  24.   display: flex;
  25.   align-items: center;
  26.   justify-content: space-between;
  27. `;
  28.  
  29. const Button = styled.button`
  30.   background: none;
  31.   border: none;
  32.   padding: 10px;
  33.   font-size: 17px;
  34. `;
  35.  
  36. function NavbarItem(props) {
  37.   const [expanded, setExpanded] = useState(!!props.match || false);
  38.  
  39.   return (
  40.     <Li selected={props.match}>
  41.       <StyledNavLink to={props.basePath}>
  42.         <span>{props.label}</span>
  43.         <Button type="button" onClick={event => {
  44.           event.preventDefault();
  45.           setExpanded(!expanded);
  46.         }}>
  47.           <Icon icon={expanded ? 'close' : 'open'} />
  48.         </Button>
  49.       </StyledNavLink>
  50.       <ul>
  51.         <li>
  52.             <NavLink to={props.sublinks}>
  53.               {props.sublinks}
  54.             </NavLink>
  55.         </li>
  56.       </ul>
  57.     </Li>
  58.  
  59.   );
  60. }
  61.  
  62. export default withRouter(NavbarItem);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top