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?
0

#1

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) {
		super(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'>
			<h1><span>h</span>abitos</h1>
			<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>
			</ul>
			</div>
			
			<div className='grid'>
			<h1><span>p</span>ensamientos</h1>
			<ul> 
							<li>sin tener en que caerme y con el cuerpo abatido</li>
							<li>mi movimiento asistido por un pensamiento abstraido</li>
			</ul>
			
			</div>
				<Container>
					<Row style={estilo.borderTitle}>
						<Col>
							<img src="images/mouse.png" 
							size="mini" style={estilo.estiloLogo} />
						</Col>
					</Row> <Row>
					  <Col style={estilo.border} >Cualquier dispositivo.</Col>
					  <Col style={estilo.border} >Menos codigo.</Col>
					  <Col style={estilo.border} >Herramientas extensibles.</Col>
					</Row>
					
				</Container>
				</div>
			);
	};
}
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>
					<hr></hr>
				<h2><a  href='#'><span>C</span>ontacto</a></h2>
					<hr></hr>
				<div style={{ paddingTop: '10px'}}>
					<hr></hr>
				</div>
				<div style={{ paddingTop: '10px'}}>
					<iframe src="https://open.spotify.com/embed/user/emeery/playlist/5ZUCEmqNDcx4HhVaMAgliO" 
					width="300" height="87" frameBorder="0" allowTransparency="true"></iframe>
				</div>
				
			</div>
		</div>);
	}
}

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);
  }
   
  .flyoutMenu.show {
    transform: translate3d(0vw, 0, 0);
    overflow: hidden;
    color: white;
    border-color:salmon;
    border-width:1px; 
    border-style:solid;
	background-color: rgba(255, 255, 255, 0.589);
    width: 60vw;
    transition: transform 0.3s ease-in-out;
    border-radius:5px;
    
	
    
	.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
  } // flyoutMenu.show