Skip to content

Instantly share code, notes, and snippets.

@nikneroz nikneroz/menu.js
Created Jun 14, 2019

Embed
What would you like to do?
import React, { Fragment, Component } from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
import Navigation from 'components/UI/Navigation.js'
import Form from 'components/UI/Form.js'
import Burger from 'components/UI/Burger'
import background from 'assets/body-background.png'
import cross from 'assets/cross.svg'
import logo from 'assets/logo.svg'
export default class Menu extends Component {
state = {
isMenuActive: false
}
targetRef = React.createRef()
targetElement = null
closePopup = (event) => {
if (event.keyCode === 27) {
this.handleMenuClose()
}
}
componentDidMount() {
document.addEventListener("keydown", this.closePopup, false);
this.targetElement = this.targetRef.current;
}
componentWillUnmount() {
document.removeEventListener("keydown", this.closePopup, false);
clearAllBodyScrollLocks();
}
handleMenuOpen = () => {
this.setState({
isMenuActive: true
}, () => {
disableBodyScroll(this.targetElement)
this.props.onMenu(this.state.isMenuActive)
})
}
handleMenuClose = () => {
this.setState({
isMenuActive: false
}, () => {
enableBodyScroll(this.targetElement)
this.props.onMenu(this.state.isMenuActive)
})
}
render() {
const { isMenuActive } = this.state
const { isMobile, currentLink } = this.props
const blacked =
currentLink.includes('services') ||
currentLink.includes('partners') ||
currentLink.includes('numbers')
return (
<Container isMenuActive={isMenuActive} >
{!isMenuActive &&
<BurgerWrapper>
<Burger onClick={this.handleMenuOpen} isActive={blacked} />
</BurgerWrapper>
}
{isMenuActive &&
<Wrapper isMenuActive={isMenuActive} isMobile={isMobile}>
<Fragment>
{!isMobile ?
<Fragment>
<Cross onClick={this.handleMenuClose} src={cross} />
<Logo to='/' />
<Navigation isMobile={isMobile} closeMenu={this.handleMenuClose} />
<FormWrapper>
<Form />
</FormWrapper>
</Fragment>
:
<Fragment>
<Cross onClick={this.handleMenuClose} src={cross} />
<Navigation isMobile={isMobile}
closeMenu={this.handleMenuClose} />
<FormWrapper>
<Form />
</FormWrapper>
</Fragment>
}
</Fragment>
</Wrapper>
}
</Container>
)
}
}
const Container = styled.div`
width: 100%;
height: 100%;
z-index: 3;
top: 0;
left: 0;
pointer-events: ${props => props.isMenuActive ? "auto" : "none"};
`
const Wrapper = styled.div`
display: flex;
flex-direction: ${props => props.isMobile ? "column" : "row"};
height: 100%;
width: 100%;
justify-content: ${props => props.isMobile ? "flex-start" : "center"};
align-items: center;
background: url(${background}) no-repeat center / cover;
padding: 50px 20px;
overflow: auto;
`
const Logo = styled(NavLink)`
position: fixed;
z-index: 4;
background: url(${logo}) no-repeat center / contain;
height: 40px;
width: 75px;
top: 30px;
left: 30px;
`
const Cross = styled.img`
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
@media (max-width: 425px) {
height: 20px;
width: 20px;
}
`
const BurgerWrapper = styled.div`
pointer-events: auto;
`
const FormWrapper = styled.div`
display: flex;
flex-direction: column;
> :not(:last-child) {
margin-bottom: 60px;
}
@media (max-width: 1025px) {
border-top: 1px solid #fff;
padding-top: 50px;
}
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.