React при закрытии консоли разработчика(f12) вылезает мобильное меню и скрывается
Не понимаю, что я делаю не так. У меня при закртытии консоли вылезает анимация меню которая работает при закрытии. Вот код:
Тут просто при клике я делаю toggle хука false-true. И делаю class active при клике.
import {links} from "../paths";
import {NavLink} from "react-router-dom";
import logo from '../../../assets/images/logo.svg';
import {useState} from "react";
import HeaderMobile from "./HeaderMobile";
const HeaderBottom = () => {
const [active, setActive] = useState(false)
const burgerClick = () => {
setActive(set => !set)
}
return(
<div className="header__bottom">
<div className="container">
<div className="box">
<NavLink to="/" className='header__logo'>
<img src={logo} alt=""/>
</NavLink>
<div className={`header__navbar`}>
<ul className="ul">
{
links.map(key =>{
const {url, title, id} = key;
return (
<li key={id}>
<NavLink className={ navData => navData.isActive ? 'active item' : 'item' } to={url}>{title}</NavLink>
</li>
)
})
}
</ul>
<a href="tel:8-495-128-73-00" className="btn_phone">8-495-128-73-00</a>
<a href="/" className="btn_catalog">Перейти в каталог</a>
</div>
<button className="btn_search">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<path d="M10.3528 19.7057C15.5182 19.7057 19.7057 15.5182 19.7057 10.3528C19.7057 5.1874 15.5182 1 10.3528 1C5.1874 1 1 5.1874 1 10.3528C1 15.5182 5.1874 19.7057 10.3528 19.7057Z" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M16.8572 17.3428L20.5238 21" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<button className={`header__burgir`} onClick={burgerClick}>
<span></span><span></span><span></span>
</button>
<a href="tel:8-495-128-73-00" className="btn_phone">8-495-128-73-00 </a>
<a href="#" className="btn_catalog">Перейти в каталог</a>
</div>
</div>
<HeaderMobile burgerClick={burgerClick} className={active ? 'active' : ''}/>
</div>
)
}
export default HeaderBottom;
Тут просто пропсы передают функцию toggle и class active
import './../header.sass'
import {NavLink} from "react-router-dom";
const HeaderMobile = props => {
return(
<div className={`header_mobile ${props.className}`}>
<div className="header_mobile_top">
<div className="header_mobile_top__top_side">
<div className="header_mobile_logo">
<svg width="81" height="30" viewBox="0 0 81 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M34.3889 6.39355C38.8249 6.39355 42.7521 8.9328 44.7712 12.6138C44.3751 13.2318 43.7482 13.6364 42.9861 13.6364H42.6264C41.0551 10.7792 38.0305 8.80786 34.3889 8.80786C30.7474 8.80786 27.7228 10.7792 26.1515 13.6364H26.0603C25.2048 13.6364 24.5195 13.1264 24.1401 12.377C26.1955 8.82437 30.0488 6.39355 34.3889 6.39355ZM45.7743 15.0587C45.1287 15.5678 44.3623 15.9082 43.5401 16.0149C43.7053 16.7175 43.7922 17.4485 43.7922 18.1968C43.7922 23.2937 39.7622 27.5858 34.3889 27.5858C29.2843 27.5858 24.9857 23.2937 24.9857 18.1968C24.9857 17.4485 25.0726 16.7175 25.2378 16.0149C24.4156 15.9082 23.6492 15.5679 23.0036 15.0588C22.7199 16.0608 22.5677 17.1136 22.5677 18.1968C22.5677 24.635 27.941 30.0001 34.3889 30.0001C40.8369 30.0001 46.2101 24.635 46.2101 18.1968C46.2101 17.1136 46.058 16.0607 45.7743 15.0587ZM2.41797 9.34399H5.9106V29.4632H8.32857V6.92969H0V29.4632H2.41797V9.34399ZM12.3584 6.92969H10.7465V29.4632H13.4331V25.1711C18.0004 24.6346 21.493 20.6107 21.493 16.0504C21.493 10.9535 17.1944 6.92969 12.3584 6.92969ZM19.075 16.0504C19.075 19.2695 16.6571 22.4885 13.1644 22.7568V9.34399C16.6571 9.61225 19.075 12.5631 19.075 16.0504ZM48.3593 6.92969H49.9712C54.8072 6.92969 59.1058 10.9535 59.1058 16.0504C59.1058 20.6107 55.6132 24.6346 51.0459 25.1711V29.4632H48.3593V6.92969ZM50.7772 22.7568C54.0012 22.4885 56.4192 19.5377 56.4192 16.0504C56.6878 12.5631 54.2699 9.61225 50.7772 9.34399V22.7568ZM68.2404 29.4632L65.5538 6.92969H62.0611L59.3745 29.4632H61.7925L62.0611 27.0489H65.5538L65.8224 29.4632H68.2404ZM65.2851 24.6346H62.3298L63.6731 9.61224L65.2851 24.6346ZM70.121 6.92969H77.6436V9.34399H72.5389V12.8313C76.8376 13.0996 80.3302 16.8551 80.3302 21.1472C80.3302 25.7076 76.5689 29.4632 71.733 29.4632H70.121V6.92969ZM72.5389 15.2456V27.3171C75.4942 27.0489 77.9122 24.3663 77.9122 21.4155C77.9122 18.4647 75.4942 15.2456 72.5389 15.2456Z" fill="white"/>
<path fillRule="evenodd" clipRule="evenodd" d="M35.0152 0H34.4779H33.4032C32.3286 0.268256 31.5226 1.07302 31.5226 2.14605V4.56035H30.4479V3.48733C30.4479 2.95081 29.9106 2.4143 29.3733 2.4143C29.1046 2.4143 28.8359 2.4143 28.5673 2.68256C26.9553 4.29209 26.1493 6.43814 26.1493 8.58419V9.65721C25.0747 9.65721 24 10.7302 24 11.8033V12.0715C24.2687 13.1445 25.0747 13.9493 26.1493 13.9493H43.0751C44.1498 13.9493 44.9558 13.1445 45.2244 12.0715C45.2244 10.9985 44.4184 9.92547 43.3438 9.65721H43.0751V8.85244C43.0751 6.43814 42.2691 4.29209 40.6571 2.68256C40.3885 2.4143 40.1198 2.4143 39.8512 2.4143C39.3138 2.4143 38.7765 2.95081 38.7765 3.48733V4.29209H37.7018V2.14605C37.7018 1.07302 37.1645 0.268256 35.8212 0H35.0152Z" fill="#6FE1B8"/>
</svg>
</div>
<div className="header_mobile_close" onClick={props.burgerClick}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#6FE1B8" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.19 12.75a1 1 0 0 1 0 1.41 1 1 0 0 1-.7.3 1.001 1.001 0 0 1-.71-.3L12 13.41l-2.78 2.78a1 1 0 0 1-.71.3 1 1 0 0 1-.7-.3 1 1 0 0 1 0-1.41L10.59 12 7.81 9.22a1 1 0 0 1 1.41-1.41L12 10.59l2.78-2.78a1 1 0 0 1 1.41 1.41L13.41 12l2.78 2.75Z"/></svg>
</div>
</div>
<nav className='mobile_navigation'>
<ul>
<li>
<div className="svg_mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none"><path fill="#fff" d="M5.848 13.55a26.927 26.927 0 0 1 4.326 0c.784.045 1.564.144 2.336.293 1.67.338 2.76.89 3.227 1.78.35.694.35 1.52 0 2.215-.467.89-1.514 1.477-3.244 1.78-.771.155-1.552.256-2.336.302-.727.08-1.454.08-2.189.08H6.644a6.309 6.309 0 0 0-.804-.053 15.989 15.989 0 0 1-2.336-.294c-1.67-.32-2.76-.89-3.227-1.78A2.44 2.44 0 0 1 0 16.754a2.413 2.413 0 0 1 .268-1.13c.459-.89 1.549-1.468 3.236-1.78.774-.152 1.557-.25 2.344-.293ZM8.003 0c2.9 0 5.25 2.418 5.25 5.4 0 2.983-2.35 5.4-5.25 5.4S2.75 8.384 2.75 5.4c0-2.982 2.351-5.4 5.252-5.4Z"/></svg>
</div>
<NavLink to="/" className='navLink_top'>Профиль</NavLink></li>
<li>
<div className="svg_mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"><path fill="#fff" d="M5 0H3A2.99 2.99 0 0 0 .881.881 2.99 2.99 0 0 0 0 3v2c0 .825.337 1.575.881 2.119A2.99 2.99 0 0 0 3 8h2a2.99 2.99 0 0 0 2.119-.881A2.99 2.99 0 0 0 8 5V3A2.99 2.99 0 0 0 7.119.881 2.99 2.99 0 0 0 5 0Zm10 0h-2a2.99 2.99 0 0 0-2.119.881A2.99 2.99 0 0 0 10 3v2c0 .825.337 1.575.881 2.119A2.99 2.99 0 0 0 13 8h2a2.99 2.99 0 0 0 2.119-.881A2.99 2.99 0 0 0 18 5V3a2.99 2.99 0 0 0-.881-2.119A2.99 2.99 0 0 0 15 0ZM5 10H3a2.99 2.99 0 0 0-2.119.881A2.99 2.99 0 0 0 0 13v2c0 .825.337 1.575.881 2.119A2.99 2.99 0 0 0 3 18h2a2.99 2.99 0 0 0 2.119-.881A2.99 2.99 0 0 0 8 15v-2a2.99 2.99 0 0 0-.881-2.119A2.99 2.99 0 0 0 5 10Zm10 0h-2a2.99 2.99 0 0 0-2.119.881A2.99 2.99 0 0 0 10 13v2c0 .825.337 1.575.881 2.119A2.99 2.99 0 0 0 13 18h2a2.99 2.99 0 0 0 2.119-.881A2.99 2.99 0 0 0 18 15v-2a2.99 2.99 0 0 0-.881-2.119A2.99 2.99 0 0 0 15 10Z"/></svg>
</div>
<NavLink to="/" className='navLink_top'>Каталог</NavLink></li>
<li>
<div className="svg_mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#fff" d="M5.493 13.03H1.641a.485.485 0 0 0-.485.485v6.887a.485.485 0 0 0 .485.485h3.852a.485.485 0 0 0 .485-.485v-6.888a.485.485 0 0 0-.485-.484Zm-3.61 4.64a.243.243 0 0 1 .485 0v.766c0 .133-.109.242-.242.242a.243.243 0 0 1-.242-.242v-.766Zm1.48 2.49H2.125a.243.243 0 0 1-.242-.243v-.708c0-.136.109-.242.242-.242s.242.106.242.242v.465h.994c.136 0 .243.11.243.243a.242.242 0 0 1-.243.242Zm.094-4.587a.824.824 0 0 1-.822-.827c0-.456.369-.83.822-.83a.829.829 0 0 1 0 1.657Zm17.559.155c-6.846 3.071-6.265 2.805-6.55 2.805h-4.18a.242.242 0 0 1-.242-.243c0-.133.106-.242.242-.242h4.18a.977.977 0 0 0 .972-.982.98.98 0 0 0-.973-.984h-2.824c-2.444 0-2.95-1.365-5.178-1.411v4.846l3.416 1.29a7.37 7.37 0 0 0 5.934-.316l6.012-3.035a.957.957 0 0 0-.086-1.746.95.95 0 0 0-.723.018ZM7.454 6.64a.242.242 0 0 0-.334.073 8.672 8.672 0 0 0-1.276 3.375.243.243 0 0 0 .479.074 8.19 8.19 0 0 1 1.205-3.187.242.242 0 0 0-.074-.335Zm.98-.944a.242.242 0 0 0 .173-.072 8.237 8.237 0 0 1 5.02-2.425.242.242 0 1 0-.052-.482 8.717 8.717 0 0 0-5.314 2.566.242.242 0 0 0 .173.413Z"/><path fill="#fff" d="m22.623 11.17-1.462-.155a5.994 5.994 0 0 0-1.027-2.485l.92-1.146a.243.243 0 0 0-.016-.328l-.895-.894a.248.248 0 0 0-.327-.017l-1.147.926a5.995 5.995 0 0 0-2.48-1.03l-.155-1.448a.263.263 0 0 0-.262-.235h-1.231a.265.265 0 0 0-.262.235l-.155 1.448a6.008 6.008 0 0 0-2.48 1.03l-1.147-.926a.248.248 0 0 0-.327.017l-.895.894a.245.245 0 0 0-.017.328l.922 1.146a5.992 5.992 0 0 0-1.028 2.485l-1.462.155a.245.245 0 0 0-.218.245v1.26c0 .127.094.231.218.246l1.462.155c.138.822.44 1.583.877 2.254.444.158.948.267 1.612.267h2.825a1.466 1.466 0 0 1 1.391 1.905c.86-.378 2.213-.986 4.296-1.92l-.02-.024a5.97 5.97 0 0 0 1.028-2.482l1.462-.155a.247.247 0 0 0 .22-.245v-1.26a.245.245 0 0 0-.22-.246Zm-9.04-3.576c.444-.157.91-.246 1.38-.265.132-.013.247.098.252.232a.243.243 0 0 1-.232.252c-.423.017-.84.097-1.239.238a.242.242 0 1 1-.161-.457ZM10.92 12.11c.002.023.004.047.004.071a.243.243 0 0 1-.235.25h-.007a.242.242 0 0 1-.243-.236l-.002-.053a1.292 1.292 0 0 1-.005-.098c0-1.583.79-3.052 2.114-3.932a.242.242 0 1 1 .268.404 4.228 4.228 0 0 0-1.897 3.527c0 .023.002.045.003.067Zm4.236 3.165a3.23 3.23 0 1 1 .003-6.46 3.23 3.23 0 0 1-.003 6.46Zm3.408-.062c-.267.286-.57.538-.9.75a.243.243 0 0 1-.262-.409c.296-.19.568-.415.808-.672a.244.244 0 0 1 .262-.062.242.242 0 0 1 .092.393Zm.792-1.15a.243.243 0 0 1-.437-.212 4.106 4.106 0 0 0 .415-1.808c0-.573-.119-1.134-.354-1.667a.243.243 0 0 1 .444-.195c.26.586.395 1.22.395 1.862 0 .707-.156 1.387-.463 2.02Z"/></svg>
</div>
<NavLink to="/" className='navLink_top'>Услуги</NavLink></li>
<li>
<div className="svg_mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="none"><path fill="#fff" d="M7.839 1.075a8.733 8.733 0 0 0-6.036 13.64c.221.335.32.735.279 1.134l-.267 2.677a.43.43 0 0 0 .56.453l2.846-.915c.34-.11.704-.116 1.047-.016a8.358 8.358 0 0 0 3.62.4 8.747 8.747 0 1 0-2.05-17.373Zm-3.14 4.569a2.308 2.308 0 0 1 3.165 0 2.252 2.252 0 0 1 0 3.176 2.242 2.242 0 0 1-3.165-3.176Zm.793 8.662a.605.605 0 0 1-.855-.855l7.87-7.87a.604.604 0 0 1 .852-.002l.004.004a.606.606 0 0 1 .002.857l-7.873 7.866Zm7.814-.046a2.24 2.24 0 0 1-3.446-2.831 2.24 2.24 0 1 1 3.446 2.831Z"/></svg>
</div>
<NavLink to="/" className='navLink_top'>Акции</NavLink></li>
<li>
<div className="svg_mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><g clipPath="url(#a)"><path fill="#fff" d="M10 .4C4.697.4.399 4.698.399 10a9.6 9.6 0 0 0 9.6 9.6c5.302 0 9.6-4.297 9.6-9.6 0-5.302-4.298-9.6-9.6-9.6Zm.896 3.466c.936 0 1.21.543 1.21 1.164 0 .775-.62 1.492-1.678 1.492-.886 0-1.308-.445-1.282-1.182 0-.621.519-1.474 1.75-1.474ZM8.498 15.75c-.64 0-1.107-.39-.66-2.094l.733-3.025c.127-.484.148-.678 0-.678-.191 0-1.022.334-1.512.664l-.32-.523c1.556-1.3 3.344-2.061 4.109-2.061.64 0 .746.756.427 1.92l-.84 3.18c-.15.562-.085.756.064.756.192 0 .82-.232 1.438-.72l.362.487c-1.513 1.512-3.162 2.094-3.801 2.094Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>
</div>
<NavLink to="/" className='navLink_top'>О компании</NavLink></li>
<li>
<div className="svg_mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g clipPath="url(#a)"><path fill="#fff" d="m19.23 15.26-2.54-.29a1.99 1.99 0 0 0-1.64.57l-1.84 1.84a15.045 15.045 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.64l-.29-2.52a2.001 2.001 0 0 0-1.99-1.77H5.03c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.73c.01-1.01-.75-1.86-1.76-1.98Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
</div>
<NavLink to="/" className='navLink_top'>Контакты</NavLink></li>
</ul>
</nav>
</div>
<div className="header_mobile_bottom">
<nav className='mobile_navigation'>
<ul>
<li>
<div className="svg_mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"><path fill="#546EDB" d="m9.742.879 2.135 4.324a.828.828 0 0 0 .623.453l4.772.693a.828.828 0 0 1 .458 1.412l-3.453 3.366a.829.829 0 0 0-.239.732l.816 4.753a.828.828 0 0 1-1.201.872l-4.27-2.244a.83.83 0 0 0-.77 0l-4.268 2.244a.826.826 0 0 1-1.201-.872l.815-4.753a.826.826 0 0 0-.238-.732L.267 7.76A.828.828 0 0 1 .726 6.35l4.772-.693a.828.828 0 0 0 .623-.453L8.255.879a.83.83 0 0 1 1.487 0Z"/></svg>
</div>
<NavLink to="/" className='navLink_bottom'>Преимущества</NavLink></li>
<li>
<div className="svg_mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"><path fill="#546EDB" d="M4.833 10.667H6.5A.833.833 0 1 0 6.5 9H4.833a.833.833 0 0 0 0 1.667Zm5 1.666h-5a.833.833 0 1 0 0 1.667h5a.833.833 0 0 0 0-1.667Zm5-11.666H3.167a2.5 2.5 0 0 0-2.5 2.5v11.666a2.5 2.5 0 0 0 2.5 2.5h11.666a2.5 2.5 0 0 0 2.5-2.5V3.167a2.5 2.5 0 0 0-2.5-2.5Zm-4.167 1.666v2.742l-1.258-.7a.833.833 0 0 0-.833 0l-1.242.7V2.333h3.333Zm5 12.5a.833.833 0 0 1-.833.834H3.167a.833.833 0 0 1-.834-.834V3.167a.833.833 0 0 1 .833-.834h2.5V6.5a.833.833 0 0 0 1.25.717L9 6.058l2.091 1.167a.833.833 0 0 0 1.242-.725V2.333h2.5a.833.833 0 0 1 .833.834v11.666Z"/></svg>
</div>
<NavLink to="/" className='navLink_bottom'>Пакеты</NavLink></li>
<li>
<div className="svg_mobile">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="#546EDB" d="M14.725 1.953h-9.45a3.75 3.75 0 0 0-3.75 3.75v5.522a3.75 3.75 0 0 0 3.75 3.75h2.337l1.904 2.813a.625.625 0 0 0 1.03 0l1.904-2.813h2.275a3.75 3.75 0 0 0 3.75-3.75V5.703a3.75 3.75 0 0 0-3.75-3.75ZM10.472 12.5a.445.445 0 0 1-.094.078.53.53 0 0 1-.11.06.497.497 0 0 1-.115.034.54.54 0 0 1-.122 0 .688.688 0 0 1-.24-.047.509.509 0 0 1-.107-.06.625.625 0 0 1-.278-.519.538.538 0 0 1 0-.121.494.494 0 0 1 .035-.116.461.461 0 0 1 .059-.109.675.675 0 0 1 .187-.137.709.709 0 0 1 .107-.06.623.623 0 0 1 .816.34.719.719 0 0 1 .037.116.8.8 0 0 1 0 .122.625.625 0 0 1-.175.419Zm.465-2.938-.15.135a.996.996 0 0 0-.128.5.625.625 0 0 1-1.25 0 2.078 2.078 0 0 1 .494-1.378c.05-.05.116-.11.194-.182.387-.346 1.187-1.071 1.187-1.875a1.176 1.176 0 0 0-1.25-1.25 1.175 1.175 0 0 0-1.25 1.25.625.625 0 0 1-1.25 0 2.422 2.422 0 0 1 2.5-2.5 2.422 2.422 0 0 1 2.5 2.5c-.003 1.363-1.081 2.332-1.597 2.8Z"/></svg>
</div>
<NavLink to="/" className='navLink_bottom'>Как пользоваться приложением</NavLink></li>
</ul>
</nav>
</div>
</div>
)
}
export default HeaderMobile;
Тут просто sass анимации
.header_mobile
position: absolute
transform: translateY(-100%)
height: 100vh
transition: all 2s
.header_mobile.active
transform: translateY(0)
transition: all 2s