REACTJS - Aplicação de Página �nica - #4 Botão Mobile

Neste tutorial criaremos o botão mobile e a função toggle relativa a ele no React JS. Faremos também a estilização necessária para seu funcionamento.

Botão Mobile no ReactJS

O primeiro passo é criarmos os três retângulos paralelos no nosso programa de design, no caso Fireworks. Iremos exportar esse botão como png e fundo transparente.

No componente ButtonMob faremos o método clickMe que fará a função toggle:

import React from 'react';

export default class ButtonMob extends React.Component {

    constructor()
    {
        super();
        this.state={
            visNav:'flex'
        }
    }

    /* Fará a função de toggle */
    clickMe()
    {
        if(this.state.visNav === 'flex'){
            this.setState({
                visNav:'none'
            });
        }else{
            this.setState({
                visNav:'flex'
            });
        }
        document.querySelector(".nav").style.display=this.state.visNav;
    }

    render(){
        return(
            <div className="buttonMob" onClick={this.clickMe.bind(this)}>
                <img src="/img/botao.png" alt="Botão Mobile"/>
            </div>
        );
    }
}

Repare que no código acima trabalhamos com estados e atribuimos o estado ao estilo display do elemento nav.

Por fim estilizamos a classe header de forma a ordenar os elementos nav e buttonmob:

/*Small Smartphones*/
@media screen and (max-width: 480px) {
    .header{display:flex; flex-direction: column;}

    .nav{display:none; flex-direction: column; order:2;}
        .nav a{width: 100%; }

    .buttonMob{order:1; text-align: right; padding: 5px 5% 5px 0;}
}

/*Medium Smartphones*/
@media screen and (min-width: 481px) and (max-width: 768px) {
    .header{display:flex; flex-direction: column;}

    .nav{display:none; flex-direction: column; order:2;}
        .nav a{width: 100%; }

    .buttonMob{order:1; text-align: right; padding: 5px 5% 5px 0;}
}

/*Large Smartphones and small notebooks*/
@media screen and (min-width: 769px) and (max-width: 1199px) {
    .nav{display:flex;}
        .nav a{width: 25%;}

    .buttonMob{display:none;}
}

/*XLarges screens*/
@media screen and (min-width: 1200px) {
    .nav{display:flex;}
        .nav a{width: 25%;}

    .buttonMob{display:none;}
}

Sucesso nos códigos e na vida!