0

Estoy queriendo hacer mi web mas responsiva y para ésto le agregué un icono "Hamburguesa" (faBars) para que se pueda abrir la barra de navegacion (nav-bar).

Mi problema es que no se está ejecutando el evento, o eso es lo que creo...

import { NavLink } from 'react-router-dom'; 
import './index.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEnvelope, faHome, faUser, faBars, faClose } from '@fortawesome/free-solid-svg-icons';
import { faGithub, faInstagram, faLinkedin } from '@fortawesome/free-brands-svg-icons';
import { useState } from 'react';

 const Sidebar = () => {
    const [showNav, setShowNav] = useState(false);

    return(
        <div className='nav-bar'>
            <nav className={showNav ? 'mobile-show' : ''}>
                <NavLink exact="true" activeclassname="active" to="/">
                    <FontAwesomeIcon icon={faHome} color="#4d4d4e"/>
                </NavLink>
                <NavLink exact="true" activeclassname="active" className="about-link" to="/about">
                    <FontAwesomeIcon icon={faUser} color="#4d4d4e"/>
                </NavLink>
                <NavLink exact="true" activeclassname="active" className="contact-link" to="/contact">
                    <FontAwesomeIcon icon={faEnvelope} color="#4d4d4e"/>
                </NavLink>
                <FontAwesomeIcon
                    onClick={() => setShowNav(false)}
                    icon={faClose}
                    color='#ffd700'
                    size='3x'
                    className='close-icon'
                />
            </nav>
            <ul>
                <li>
                    <a target="_blank" rel="noreferrer" href='https://www.linkedin.com'>
                        <FontAwesomeIcon icon={faLinkedin} color="#4d4d4e"/>
                    </a>
                </li>
                <li>
                    <a target="_blank" rel="noreferrer" href='https://github.com/'>
                        <FontAwesomeIcon icon={faGithub} color="#4d4d4e"/>
                    </a>
                </li>
                <li>
                    <a target="_blank" rel="noreferrer" href='https://www.instagram.com/'>
                        <FontAwesomeIcon icon={faInstagram} color="#4d4d4e"/>
                    </a>
                </li>
            </ul>
            <FontAwesomeIcon
                onClick={() => setShowNav(true)}
                icon={faBars}
                color="#ffd700"
                size='3x'
                className='hamburguer-icon'
            />
        </div>
    )
 }

 export default Sidebar;
.nav-bar{
  background: #181818;
  width: 60px;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 3;
    min-height: 500px;

    .logo{
        display: block;
        padding: 8px 0;
        
        img{
            display: block;
            margin: 8px auto;
            height: auto;        
        }
    }

    nav{
        display: block;
        text-align: center;
        position: absolute;
        height: 210px;
        top:50%;
        margin-top: -120px;
        width: 100%;

        a{
            font-size: 22px;
            color: #4d4d4e;
            display: block;
            line-height: 51px;
            height: 51px;
            position: relative;
            text-decoration: none;

            i{
                transition: all 0.3s ease-out;
            }

            &:hover{
                color: #ffd700;

                svg{
                    opacity: 0;
                }
                
                &::after{
                    opacity: 1;
                }                
            }

            &:after{
                content: '';
                font-size: 9px;
                letter-spacing: 2px;
                position: absolute;
                bottom: 0;
                display: block;
                width: 100%;
                text-align: center;
                opacity: 0;
                transition: all 0.3s ease-out;
            }

            &:first-child{
                &::after{
                    content: "HOME";
                }
            }
        }

        a.about-link{
            &::after{
                content: 'ABOUT';
            }
        }

        a.contact-link{
            &::after{
                content: 'CONTACT';
            }
        }

        a.active{
            svg{
                color: #ffd700;
            }
        }
    }

    ul{
        position: absolute;
        bottom: 20px;
        width: 100%;
        display: block;
        padding: 0;
        list-style: none;
        text-align: center;
        margin: 0;
        
        li{
            a{
                padding: 7px 0;
                display: block;
                font-size: 15px;
                line-height: 16px;

                &:hover svg{
                    color: #ffd700;
                }
            }
        }

    }
}

.hamburguer-icon,
.close-icon{
    display: none;
}

@media screen and (max-width: 1200px){
    .nav-bar{
        background: transparent;
        position: initial;
        height: auto;
        min-height: auto;

        ul, nav{
            display: none;            
        }

        nav{
            width: 100%;
            height: 100%;
            background-color: #181818;
            top: 0;
            left: 0;
            position: fixed;
            z-index: 2;
            margin: 0;

            a{
                display: flex;
                justify-content: center;
                align-items: center;            
            }
    
            a:after{
                opacity: 1;
                position: initial;
                width: auto;
                margin-left: 10px;                
            }

            a svg{
                opacity: 1 !important;
            }

            &.mobile-show{
                display: block;
            }
        }

        .hamburguer-icon,
        .close-icon{
            display: block;
            position: absolute;
            top: 15px;            
            right: 15px;
        }
    }
}

Es mi primero proyecto utilizando React, por lo que puede ser un error de principiante... pero yo no lo estaría encontrando.

Cuando achico la vista se ve el ícono pero no funciona, si agrando la pantall éste desaparece, por lo que el @media está funcionando bien.

Usé 'cursor: pointer' en el icono para asaber si el mouse podia clickearlo pero no se puso en pointer, cuando pongo el mouse encima queda en default el mouse...

1 respuesta 1

0

Como comenté, es un problema facil de resolver.

En el layout lo unico que tuve que hacer era cambiar el position de la clase .page, que abarca todo el layout de mi web:

Para pantallas grandes:

.page{
    width: 100%;
    height: 100%;
    position: absolute;    
}

Para mobiles (resolver mi problema):

@media screen and (max-width: 1200px){
    .page{
        position: initial;        
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.