exampleSidebar.js

import React, { Component } from 'react'
import CLink from '../General/CLink'
import Logo from '../../assets/Logo.svg'
import LogoResponsive from '../../assets/Responsive-logo.png'
import instLogo from '../../assets/Instagram-white.svg'
import HamburgerImg from '../../assets/hamburguer.svg'
import './NavBar.css'

const StyledLink = ({className, ...props}) => 
	<CLink
		{...props}
		className={`StyledLink ${className ? className : ''}`}
	/>

const RespLink = ({className, ...props}) =>
	<CLink 
		{...props}
		className={`RespLink ${className ? className : ''}`}
		/>

const Hamburger = ({className, ...props}) =>
	<a
		{...props}
		className={`Hamburguer ${className}`}
		>
		<img alt="" src={HamburgerImg}/>
	</a>


export default class Navbar extends Component {
	constructor(props) {
		super(props)
		this.state = {
			scroll: 'unscrolled',
			menuToogled: false,
		}
		window.addEventListener("scroll", () => {
			let value = document.body.scrollTop || document.documentElement.scrollTop;
			(value >= 20) ?
				this.setState({scroll: 'scrolled'}) :
				this.setState({scroll: 'unscrolled'})
		})
		this.toogleMenu = this.toogleMenu.bind(this)
		this.hideMenu = this.hideMenu.bind(this)
	}
	toogleMenu() {
		this.setState({menuToogled: !this.state.menuToogled})
	}
	hideMenu() {
		this.setState({menuToogled: false})
	}
	render() {
		return(
			<div className={`NavBar ${this.state.scroll}`}>
				<div className={`NavBar-phoneMenu ${this.state.menuToogled?'toogled':''}`}>
					<CLink to="home" onSetActive={this.hideMenu}>
						<img src={LogoResponsive} className={`Navbar-phoneMenu-respLogo ${this.state.scroll}`} alt=""/>
					</CLink>
					<a
						onClick={this.toogleMenu}
						className={`xbutton ${this.state.scroll}`}
					>
						✕
					</a>
					<div className="NavBar-phoneMenu-linksContainer">
						<RespLink to="forever" onSetActive={this.hideMenu}>
							FOREVER PLANNER
						</RespLink>
						<RespLink to="elbook" onSetActive={this.hideMenu}>
							EL BOOK
						</RespLink>
						<RespLink to="carmelina" onSetActive={this.hideMenu}>
							CARMELINA
						</RespLink>
						<RespLink to="form" onSetActive={this.hideMenu}>
							CÓMO OBTENERLO
						</RespLink>
					</div>
				</div>
				<CLink to="home" className={`NavBar-logoContainer ${this.state.scroll}`}>
					<img src={Logo} alt=""/>
				</CLink>
				<CLink to="home" className={`NavBar-logoContainer-responsive ${this.state.scroll}`}>
					<img src={LogoResponsive} alt=""/>
				</CLink>
				<ul className="NavBar-links">
					<StyledLink to="forever">
						FOREVER PLANNER
					</StyledLink>
					<StyledLink to="elbook">
						EL BOOK
					</StyledLink>
					<StyledLink to="carmelina">
						CARMELINA
					</StyledLink>
					<StyledLink to="form">
						CÓMO OBTENERLO
					</StyledLink>
					<a
						className="NavBar-instagram"
						href="https://www.instagram.com/forever.planner/"
						target="_blank"
						rel="noopener noreferrer"
						>
						<img src={instLogo} alt=""/>
					</a>
				</ul>
				<Hamburger
					onClick={this.toogleMenu}
					className={`xs-showed ${this.state.scroll}`}
					/>
			</div>
		)
	}
}

.NavBar-phoneMenu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	height: 100vh;
	width: 100vw;
	background: rgba($lila, 0.99);
	transform: translate(-100vw, 0);
	flex-direction: column;
	align-items: center;
	display: flex;
	transition: 0.25s all ease-in-out;
	&.toogled {
		transform: translate(0, 0);
	}
}