NavBarMobile.html

<section class="conteiner-navigation-mobil">

   <nav class="site-navigation-mobile">
     <button class="button-menu-navigation-mobile" id="openAndCloseNavBarMobile">
       <svg xmlns="http://www.w3.org/2000/svg" style="
                   color: currentColor;
                   height: 30px;
                   width: 30px;" height="16" width="14" viewBox="0 0 448 512">
                   <path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"></path>
               </svg>
     </button>
   </nav>
   
   <article class="content-site-navigation-mobile" id="contentSiteNavigationMobile">
     <button class="button-close-content-site-navigation-mobile" id="buttonCloseontentSiteNavigationMobile"> X </button>

<a title="Indice alfabético de Búsquedas" href="/wiki/Indice_Alfab%C3%A9tico_de_B%C3%BAsquedas"><img src="https://wiki.the-west.net/images/3/34/Dock_quests.png" alt="">Lista de Búsquedas <a title="Items" href="/wiki/Items">

Inventario</a>

         <a title="Lista de Conjuntos" href="/wiki/Lista_de_conjuntos"><img src="https://es1.the-west.es/images/window/shop/icons/tabs/equip.png?1699352772" height="50px">Conjuntos</a>

<a title="Lista de trabajos" href="/wiki/Lista_de_trabajos">

Trabajos</a> <a title="Oficios" href="/wiki/Oficios">

Oficios</a>

         <a title="Logros" href="/wiki/Logros"><img src="https://westes.innogamescdn.com/images/items/yield/rodeo_trophy.png?5" height="50px">Logros</a>

<a title="Duelos" href="/wiki/Duelos">

Duelos</a> <a title="Batalla de fuerte" href="/wiki/Batallas_de_fuerte">

Batallas de Fuerte</a> <a title="Ciudades" href="/wiki/Ciudades">

Ciudades</a>

         <a title="Aventuras" href="/wiki/Aventuras"><img src="https://es1.the-west.es/images/window/shop/icons/tabs/veteran.png?1699352772" width="50px">Aventuras</a>
         <a title="Eventos" href="/wiki/Eventos_especiales"><img src="https://westde.innogamescdn.com/images/items/yield/fireworks_low.png?5" alt="" width="40px">Eventos</a>
         <a title="Interfaz del juego" href="/wiki/Interfaz,_Mapa">Interfaz del juego</a>
   </article>

</section>

<script>

   window.openAndCloseNavBarMobile.addEventListener('click', () => {
     $('#contentSiteNavigationMobile').toggleClass('open');
   });   
   
   window.buttonCloseontentSiteNavigationMobile.addEventListener('click', () => {
     $('#contentSiteNavigationMobile').toggleClass('open');
   });  

</script>

<style>

   .container-navigation-mobil{
       width: 100%;
       height: 0px;
       margin: 0px;
       padding: 0px;
       display:none;
       box-sizing: border-box;
   }
   .site-navigation-mobile{
       position: fixed;
       top: 55px;
       left: 0px;
       background: rgb(48, 37, 31);
       background-image: url(/skins/MirageWest/images/headline-bgtile.png);
       /*background-image: url(https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/
       width: 100%;
       margin: 0px;
       padding-left: 25px;
       padding-bottom: 5px;
       padding-top: 5px;
       z-index: 1;
       box-shadow: inset 0px 0px 30px 2px #140a05;
       box-sizing: border-box;
   }
   .button-menu-navigation-mobile{
       color: #e9d3a7;
       font-size: 17px;
       background: transparent;
       border: 0px;
       display: flex;
     align-items: center;
     justify-content: center;
     padding: 3px;
     box-sizing: border-box;
   }
   .button-menu-navigation-mobile:hover{
       background: rgb(78, 60, 50);
   }

   .content-site-navigation-mobile{
       position: fixed;
       min-width: 250px;
       width: 100vw;
       height: calc(100vh - 55px);
       background: rgb(48, 37, 31);
       /*background-image: url(	https://wiki.the-west.es/skins/MirageWest/images/headline-bgtile.png);*/
       background-image: url(/skins/MirageWest/images/headline-bgtile.png);
       box-shadow: inset 0px 0px 30px 10px #140a05;
       top: 55px;
       left: -100vw;
       margin: 0px;
       padding-top: 50px;
       padding-left: 15px;
       padding-right: 15px;
       padding-bottom: 20px;
       z-index: 10;
       box-sizing: border-box;
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: repeat(auto-fill, minmax(80px, 80px));
       transition: 1s;
       overflow-x: auto;
   }
   .content-site-navigation-mobile.open{
       left: 0px;
       width: 100vw;
       height: calc(100vh - 55px);
   }

   .content-site-navigation-mobile a{
       display: flex;
       align-items: center;
       list-style:none;
       min-height: 70px;
       max-height: 70px;
       color: #e9d3a7;
       font-weight: 700;
       font-size: 17px;
       margin: 5px;
       /*padding: 13px;*/
       padding-left: 10px;
       /*background:#46352c;*/
       background-color: rgb(36, 27, 22);
       border-radius: 10px;
       transition: transform 0.2s; 
       box-sizing: border-box;
   }
   .content-site-navigation-mobile a:hover{
       background: #e9d3a7;
       color: #46352c;
       font-weight: 900;
       transform: scale(1.10);
   }
   .content-site-navigation-mobile a img{
       height: 50px;
       width: 50px;
       box-sizing: border-box;
   }
   .button-close-content-site-navigation-mobile{
       position: absolute;
       width: 35px;
       height: 35px;
       background: transparent;
       border: 0px;
       color: #e9d3a7;
       font-size: 25px;
       font-weight: 900;
       top: 10px;
       right: 30px;
       padding:0px;
       margin: 0px;
       border-radius: 100%;
   }
   .button-close-content-site-navigation-mobile:hover{
       background: #e9d3a7;
       color: #46352c;
   }

   @media (max-width: 768px) {
       #module-site-navigation{
           display: none;
       }
       .container-navigation-mobil{
           display: block;
       }
   }

   @media (max-width: 320px) {
       .content-site-navigation-mobile{
           grid-template-columns: 1fr;
       }
   }

</style>