Does my SideBar in React not slide from left to right with the click?

Does my SideBar in React not slide from left to right with the click?


When I click on the toggle my bar appears as I wish but it does not slide from left to right it just appears, I found that I have to declare the width in vw, this question had already been answered in the following link but I can not solve it. styles, I have the width in vw but I do not know what could be wrong, they could help me.

my SideBar,js component

import React from 'react';
import {Container, Row, Col} from 'reactstrap';
class Vitae extends React.Component {
    constructor(props) {
		this.alternarMenu = this.alternarMenu.bind(this);
		this.controlarApuntador = this.controlarApuntador.bind(this);
		this.state = {visible:false};
	}; // comillas 
	alternarMenu () { this.setState({visible:!this.state.visible}); }
	controlarApuntador (e) { this.alternarMenu(); console.log('clic');
    	e.stopPropagation(); }
    render() {
			var estilo = { 
			border: {borderColor:'salmon', borderWidth:'1px', 
			borderStyle:'solid', color: 'lightblue', paddingBottom: '15px'}, 
			estiloLogo : { width: "50px", height: "50px" }, 
			borderTitle: {paddingBottom: '15px' },
			return (
			<div className='sidebar-puntos'>
			<Boton  controlarApuntador={this.controlarApuntador} />
			<Menu controlarApuntador={this.controlarApuntador} menuVisible={this.state.visible} />
			<div className='grid'>
			<ul> <li> No a las distracciones </li> 
							<li> Leer algo nuevo todos los dias. </li>
							<li> Acepta tus errores y sigue adelante. </li>
							<li> Acostumbrate a levantarte temprano. </li>
							<li style={{textDecoration:'underline'}}>Cuida tu cuerpo</li>
							<li> aprender a delegar </li>
			<div className='grid'>
							<li>sin tener en que caerme y con el cuerpo abatido</li>
							<li>mi movimiento asistido por un pensamiento abstraido</li>
					<Row style={estilo.borderTitle}>
							<img src="images/mouse.png" 
							size="mini" style={estilo.estiloLogo} />
					</Row> <Row>
					  <Col style={estilo.border} >Cualquier dispositivo.</Col>
					  <Col style={estilo.border} >Menos codigo.</Col>
					  <Col style={estilo.border} >Herramientas extensibles.</Col>
export default Vitae;
class Boton extends React.Component {
	render() { 
		return(<button  className='roundButton'onMouseDown={this.props.controlarApuntador}></button> ); 
class Menu extends React.Component {
	render() { 
		const { menuVisible} = this.props;
		const borealis = {width: '100%', height:'100%'}
		const className = menuVisible ? 'flyoutMenu show' : 'flyoutMenu hide';
		var fondoBorealis = '/images/sky.jpg';
        const esquema = { backgroundImage: "url(" + fondoBorealis + ")" };
		return(<div  onMouseDown={this.props.controlarApuntador} className={className} >
			<div  className='menu-lateral'>
				<img src="images/borealis.jpg" 
							size="mini" style={borealis} />
				<h2><a  href='#'><span>A</span>cerca</a></h2>
				<h2><a  href='#'><span>C</span>ontacto</a></h2>
				<div style={{ paddingTop: '10px'}}>
				<div style={{ paddingTop: '10px'}}>
					<iframe src="" 
					width="300" height="87" frameBorder="0" allowTransparency="true"></iframe>

y mis estilos .scss

.flyoutMenu {
    width: 50vw;
    height: 100vh;
    background-color: #FFE600;
    position: fixed;
    top: 0;
    left: 0;
    transition: all 0.5s ease;
    cubic-bezier:(0, .52, 0, 1);
    overflow: scroll;
    z-index: 1000;
  .flyoutMenu.hide {
    transform: translate3d(-100vw, 0, 0);
  } {
    transform: translate3d(0vw, 0, 0);
    overflow: hidden;
    color: white;
	background-color: rgba(255, 255, 255, 0.589);
    width: 60vw;
    transition: transform 0.3s ease-in-out;
	.menu-lateral { 
      padding-top: 0px; 
	  position: absolute;
      hr {
        width: 150px;
        padding-left: 50px;
        margin: auto;
        float: center;
        border: 0; 
        height: 2px;
        background: whitesmoke;
        background-image: linear-gradient(to right, #ccc, salmon, #ccc); }
    } // menu-lateral
  } //