Following the tutorial from this page “Creating a Sliding Menu in React” does not work as it should, by pressing the button it should appear to scroll the menu but only the text appears below the button which could be the error so that my menu runs as expected?
the MenuContainer class change it to SideBar.js
all classes are inside SideBar.js
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>
<li>me encontraba sumido en el transporte rumbo a </li>
<li>influenciado en el vecindario, estas palabras no son del armario</li>
<li>solo doy mi punto de vista, un renglon en el temario </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;
return(<div onMouseDown={this.props.controlarApuntador} className={menuVisible ? 'show':'hide'} >
<h2><a href='#'>Acerca</a></h2>
</div>);
}
}
and my styles.css
.roundButton {
background-color: #96D9FF;
margin-bottom: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 10px solid #0065A6;
outline: none;
transition: all .2s cubic-bezier(0, 1.26, .8, 1.28);
}
.roundButton:hover {
background-color: #96D9FF;
cursor: pointer;
border-color: #3557;
transform: scale(1.2, 1.2);
}
.roundButton:active {
border-color: #3557;
background-color: #FFF;
}
.sidebar-puntos { text-align: center; border-top-color: 4px solid salmon;
h1 { color: lightgray; }
span { color: lightseagreen }
ul {
li{ list-style: none; color: whitesmoke; font-size: 2rem;} }
} // sidebar-puntos
.flyoutMenu {
width: 100vw;
height: 100vh;
background-color: #FFE600;
position: fixed;
top: 0;
left: 0;
transition: transform .3s
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;
}
.flyoutMenu h2 a {
color: #333;
margin-left: 15px;
text-decoration: none;
}
.flyoutMenu h2 a:hover {
text-decoration: underline;
}