text: import React from "react";
  import styled from "@emotion/styled";
  import CSSTransition from "react-transition-group/CSSTransition";
  import Close from "~src/assets/Close.svg";
  
  const NavWrapper = styled.div`
    &.sidebar {
      & .sidebar-child-enter {
        transform: translateX(-100%);
      }
  
      & .sidebar-child-enter-active {
        transform: translateX(0%);
        transition: transform 200ms ease-in-out;
      }
  
      & .sidebar-child-exit {
        transform: translateX(0%);
      }
  
      & .sidebar-child-exit-active {
        transform: translateX(-100%);
        transition: transform 200ms ease-in-out;
      }
  
      & .hidden {
        display: none;
      }
    }
  `;
  
  const Nav = styled.div`
    background: #03233f;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    color: #fff;
    padding: 20px;
    overflow: hidden;
  `;
  
  const CloseWrapper = styled.div`
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2;
    cursor: pointer;
  `;
  
  const P = styled.p`
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 300;
  
    &.strong {
      font-weight: bold;
    }
  `;
  
  const Content = styled.div`
    margin-top: 20px;
  `;
  
  const Sidebar = (props) => {
    const { show, triggerClose } = props;
  
    return (
      <NavWrapper className="sidebar">
        <CSSTransition in={show} timeout={200} classNames="sidebar-child">
          <>
            {
              <Nav className={!show ? `hidden` : ``}>
                <Content>
                  <P>
                    The navigation below is generated by anchorific. Scrolling
                    will highlight the navigation based on which header is at the
                    top of the viewport.
                  </P>
                  <div className="anchorific"></div>
                </Content>
                {show && (
                  <CloseWrapper>
                    <Close width="15px" height="15px" onClick={triggerClose} />
                  </CloseWrapper>
                )}
              </Nav>
            }
          </>
        </CSSTransition>
      </NavWrapper>
    );
  };
  
  export default Sidebar;
  