Tengo este header muy basico con un logo y un menu con dos imagenes uno de hamburger y una X para abrir y cerrar el menu, en mobile a la X le di un display none y al hamburger un block, ya lo tengo para verse en mobile y desktop, pero tengo un problema, en mobile el menu lo tengo oculto con un top -100%, con javascrip estoy haciendo que al dar click en el hamburger me cambie el top a 0 para mostrar el menu, de igual forma cambie el display de la X a block y el del hamburger a none para mostrar la X para cerrar el menu, el problema es que no se como hacer para ahora volver como estaba en un principio que es ocultar el menu y cambiar la X por la hamburger. Esto lo hago agregando clases en css y con un toggle agregarlas y quitarla, pero creo que hay una forma con if, para hacer esto, que es agregando unos estilos desde javascript, lo he intentado pero no encuentro la forma de hacerlo.
let abrir = document.querySelector('.abrir');
let cerrar = document.querySelector('.cerrar');
abrir.addEventListener('click', abrirMenu);
function abrirMenu(){
let menu = document.querySelector('.main ul');
abrir.style.display = 'none'
cerrar.style.display = 'block'
if(menu){
menu.style.top = '0px'
}else if(menu.style.top = '0px'){
menu.style.top = '-100%'
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: rgb(228, 228, 228);
}
header{
background: rgb(95, 95, 95);
}
header .content-header{
width: 90%;
height: 60px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
header .content-header .logo h1{
font-size: 25px;
color: white;
}
header .content-header .hamburger{
cursor: pointer;
z-index: 9999999;
}
header .content-header .hamburger .abrir{
display: block;
}
header .content-header .hamburger .cerrar{
display: none;
}
header .content-header .main ul{
position: absolute;
background: rgb(180, 180, 180);
width: 100%;
right: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: all 500ms;
top: -100%;
}
header .content-header .main ul li{
list-style: none;
margin: 40px 0;
}
header .content-header .main ul li a{
text-decoration: none;
color: black;
font-size: 20px;
}
header .content-header .main ul li a:hover{
color:rgb(255, 90, 90);
}
@media (min-width:768px){
header .content-header{
display: flex;
justify-content: space-between;
}
header .content-header .main ul{
position: initial;
flex-direction: row;
height: 0;
}
header .content-header .main ul li{
margin: 0 20px;
}
header .content-header .main ul li a{
color: white;
font-size: 18px;
}
header .content-header .hamburger{
display: none;
}
}
<header>
<div class="content-header">
<div class="logo">
<h1>Fron - End</h1>
</div>
<div class="main">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Ubicacion</a></li>
<li><a href="#">Informacion</a></li>
</ul>
</div>
<div class="hamburger">
<img src="img/icon-hamburger.svg" class="abrir">
<img src="img/icon-close.svg" class="cerrar">
</div>
</div>
</header>