component-with-accordion.js

import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'

// Styles, w/ styled-component syntax
const NavContainer = styled.nav`
  background-color: ${props => props.theme.lightGray};
  font-size: 14px;
  max-width: ${props => props.theme.xs};
  overflow: auto;
  padding: 25px;
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.4s ease-in-out;
  transform: ${props => props.menuState ? "translateX(0)" : "translateX(-100%)" };
  z-index: ${props => props.theme.zIndex05};
`

const NavOverlay = styled.section`
  background-color: ${props => props.theme.black};
  opacity: ${props => props.menuState ? "0.8" : "0" };
  transition: 0.4s ease-in-out;
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: ${props => props.menuState ? "visible" : "hidden" };
  z-index: ${props => props.theme.zIndex04};
`

// CHEVRONS - must be a programmatic way to do this
const NavChevronProducts = styled.svg`
  transform: ${props => props.subMenuState ? "rotate(90deg) scaleX(-1)" : "rotate(-90deg) scaleX(-1)" };
  transition: 0.4s ease-in-out;
`
const NavChevronPatients = styled.svg`
  transform: ${props => props.subMenuState ? "rotate(90deg) scaleX(-1)" : "rotate(-90deg) scaleX(-1)" };
  transition: 0.4s ease-in-out;
`  
const NavChevronAbout = styled.svg`
  transform: ${props => props.subMenuState ? "rotate(90deg) scaleX(-1)" : "rotate(-90deg) scaleX(-1)" }; 
  transition: 0.4s ease-in-out;
`  

// TOP LEVEL MENUS
const NavTopLevel = styled.section`
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: ${props => props.theme.fontBold};
  justify-content: space-between;
`
const NavTopLevelItem = styled.div`
  font-size: 16px;
  padding: 10px 0;

  &:focus {
    background-color: #fff;
  }
`

// SECOND LEVEL MENUS
const NavSecondLevelTitle = styled.section`
  overflow: hidden;
  max-height: ${props => props.subMenuState ? "320px" : "0" };
  opacity: ${props => props.subMenuState ? "1" : "0" };
  transition: 0.4s ease-in-out;
`
const NavSecondLevelItem = styled(Link)`
  color: ${props => props.theme.black};
  display: block;
  font-size: 16px;
  padding: 10px 0 10px 10px;
  text-decoration: none;
`
const NavSecondLevelLink = styled.a`
  color: ${props => props.theme.black};
  display: block;
  font-size: 16px;
  padding: 10px 0 10px 10px;
  text-decoration: none;
`

// NavMenu
export default class NavMenu extends React.Component {
  // Initial menu state is closed (false)
  constructor(props) {
    super(props)
    this.state = {
      productMenuStatus: false,
      patientsMenuStatus: false,
      aboutMenuStatus: false,
      socialMenuStatus: false
    }
  }

  // Toggles submenu open/close state
  productMenuToggle = () => {
    this.setState( prevState => ({
      productMenuStatus: !prevState.productMenuStatus,
      patientsMenuStatus: false,
      aboutMenuStatus: false,
      socialMenuStatus: false
    }))
  }

  patientMenuToggle = () => {
    this.setState( prevState => ({
      productMenuStatus: false,
      patientsMenuStatus: !prevState.patientsMenuStatus,
      aboutMenuStatus: false,
      socialMenuStatus: false
    }))
  }

  aboutMenuToggle = () => {
    this.setState( prevState => ({
      productMenuStatus: false,
      patientsMenuStatus: false,
      aboutMenuStatus: !prevState.aboutMenuStatus,
      socialMenuStatus: false
    }))
  }  

  socialMenuToggle = () => {
    this.setState( prevState => ({
      productMenuStatus: false,
      patientsMenuStatus: false,
      aboutMenuStatus: false,
      socialMenuStatus: !prevState.socialMenuStatus
    }))
  } 

  render() {
    return (
      <div>
        {/* Picks up state change from Header component, sends down to NavContainer style */}
        <NavContainer menuState={ this.props.menuState }>

          {/* PRODUCTS */}
          <NavTopLevel onClick={ this.productMenuToggle }>
            <NavTopLevelItem>Products</NavTopLevelItem>
            <NavChevronProducts subMenuState={ this.state.productMenuStatus } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentcolor" strokeWidth="2">
              <path d="M5 0.7071067811865475 L12.292893218813452 8 L5 15.292893218813452"></path>
            </NavChevronProducts>
          </NavTopLevel>
          <NavSecondLevelTitle subMenuState={ this.state.productMenuStatus }>
            <NavSecondLevelItem
              state={{ hpbutton: 'flower' }} 
              to="/products">
              Flower
            </NavSecondLevelItem>
            <NavSecondLevelItem 
              state={{ hpbutton: 'cartridges' }} 
              to="/products">
              Cartridges
            </NavSecondLevelItem>
            <NavSecondLevelItem 
              state={{ hpbutton: 'edible' }} 
              to="/products">
              Edible
            </NavSecondLevelItem>
            <NavSecondLevelItem 
              state={{ hpbutton: 'concentrate' }} 
              to="/products">
              Concentrate
            </NavSecondLevelItem>              
          </NavSecondLevelTitle>

          {/* PATIENTS */}
          <NavTopLevel onClick={ this.patientMenuToggle }>
            <NavTopLevelItem>Patients</NavTopLevelItem>
            <NavChevronPatients subMenuState={ this.state.patientsMenuStatus } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentcolor" strokeWidth="2">
              <path d="M5 0.7071067811865475 L12.292893218813452 8 L5 15.292893218813452"></path>
            </NavChevronPatients>
          </NavTopLevel>
          <NavSecondLevelTitle subMenuState={ this.state.patientsMenuStatus }>
            <NavSecondLevelItem to="/register">Register</NavSecondLevelItem>
            <NavSecondLevelItem to="/ordering">Ordering</NavSecondLevelItem>
            <NavSecondLevelItem to="/cannabis-101">Cannabis 101</NavSecondLevelItem>
            <NavSecondLevelItem to="/providers">Providers</NavSecondLevelItem>
          </NavSecondLevelTitle>

          {/* ABOUT */}
          <NavTopLevel onClick={ this.aboutMenuToggle }>
            <NavTopLevelItem>About</NavTopLevelItem>
            <NavChevronAbout subMenuState={ this.state.aboutMenuStatus } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentcolor" strokeWidth="2">
              <path d="M5 0.7071067811865475 L12.292893218813452 8 L5 15.292893218813452"></path>
            </NavChevronAbout>
          </NavTopLevel>
          <NavSecondLevelTitle subMenuState={ this.state.aboutMenuStatus }>
            <NavSecondLevelItem to="/contact">Contact</NavSecondLevelItem>
            <NavSecondLevelItem to="/dispensary">Dispensary</NavSecondLevelItem>
            <NavSecondLevelItem to="/cultivation">Cultivation</NavSecondLevelItem>
            <NavSecondLevelItem to="/careers">Careers</NavSecondLevelItem>
          </NavSecondLevelTitle>

          {/* SOCIALS */}
          {/* <NavTopLevel onClick={ this.socialMenuToggle }>
            <NavTopLevelItem>Socials</NavTopLevelItem>
            <NavChevronAbout subMenuState={ this.state.socialMenuStatus } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentcolor" strokeWidth="2">
              <path d="M5 0.7071067811865475 L12.292893218813452 8 L5 15.292893218813452"></path>
            </NavChevronAbout>
          </NavTopLevel>
          <NavSecondLevelTitle subMenuState={ this.state.socialMenuStatus }>
            <NavSecondLevelLink href="https://www.facebook.com/MayflowerMass/" target="_blank" rel="noopener noreferrer">Facebook</NavSecondLevelLink>
            <NavSecondLevelLink href="https://twitter.com/mayflowermass" target="_blank" rel="noopener noreferrer">Twitter</NavSecondLevelLink>
            <NavSecondLevelLink href="https://www.instagram.com/mayflowermedicinals/" target="_blank" rel="noopener noreferrer">Instagram</NavSecondLevelLink>
            <NavSecondLevelLink href="https://www.linkedin.com/company/mayflowermedicinals.com" target="_blank" rel="noopener noreferrer">LinkedIn</NavSecondLevelLink>
            <NavSecondLevelLink href="https://www.leafly.com/dispensary-info/mayflower-medicinals" target="_blank" rel="noopener noreferrer">Leafly</NavSecondLevelLink>
            <NavSecondLevelLink href="https://weedmaps.com/dispensaries/mayflower-medicinals" target="_blank" rel="noopener noreferrer">Weedmaps</NavSecondLevelLink>
            <NavSecondLevelLink href="https://potguide.com/massachusetts/marijuana-dispensaries/boston/mayflower-medicinals/" target="_blank" rel="noopener noreferrer">Potguide</NavSecondLevelLink>
          </NavSecondLevelTitle>           */}
        </NavContainer>

        {/* Picks up state change from Header component, sends down to NavOverlay style */}
        <NavOverlay menuState={ this.props.menuState } />
      </div>
    )
  }
}