Skip to content

Instantly share code, notes, and snippets.

@jserrao
Created July 13, 2020 20:59
Show Gist options
  • Save jserrao/e1388b371c399fe6fe67b8c67fa1a8a8 to your computer and use it in GitHub Desktop.
Save jserrao/e1388b371c399fe6fe67b8c67fa1a8a8 to your computer and use it in GitHub Desktop.
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>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment