Essenza Frontend

Header 

<header class="site-header" id="site-header">
    <search-overlay v-cloak>
        <div class="search-box">
            <form action="#" class="search-box__form">
                <input type="text" name="s" placeholder="Escribe lo que estás buscando" aria-label="Buscar">
                <button type="submit">
                    <i data-icon="magnifying-glass"></i>
                </button>
            </form>
            <p>Puedes buscar por número de referencia. Lorem ipsum dolor sit amet, consectetur.</p>
        </div>
    </search-overlay>
    <site-announcements>

        <div>
            <div class="site-announcements__item">
                <p>10 años de garantía. <a href="#">Leer más</a></p>
            </div>
        </div>

        <div>
            <div class="site-announcements__item">
                <p>100 noches de prueba <i data-icon="moon" data-icon-style="regular"></i></p>
            </div>
        </div>

    </site-announcements>

    <section class="site-header-wrapper">
        <div class="container">
            <figure class="site-header__branding">
                <img src="../../assets/img/essenza-logo.svg" alt="Essenza Logo">
            </figure>
            <nav class="site-header__nav" :class="{'is-open': isMenuOpen}">
                <ul class="header-menu">

                    <li class="header-menu-item ">
                        <a href="#">Colchones</a>

                        <section class="header-mega-menu">
                            <div class="header-mega-menu__content">
                                <h3 class="title">Colchones</h3>

                                <ul class="mega-menu-submenu">
                                    <li class="title is-5 is-sans">Tamaños</li>

                                    <li>
                                        <a href="#">Sencillo</a>
                                    </li>

                                    <li>
                                        <a href="#">Semidoble</a>
                                    </li>

                                    <li>
                                        <a href="#">Doble</a>
                                    </li>

                                    <li>
                                        <a href="#">Queen</a>
                                    </li>

                                    <li>
                                        <a href="#">King</a>
                                    </li>

                                </ul>

                                <ul class="mega-menu-submenu">
                                    <li class="title is-5 is-sans">Líneas</li>

                                    <li>
                                        <a href="#">Balanzze</a>
                                    </li>

                                    <li>
                                        <a href="#">Royal</a>
                                    </li>

                                    <li>
                                        <a href="#">Pocket</a>
                                    </li>

                                    <li>
                                        <a href="#">Eden</a>
                                    </li>

                                    <li>
                                        <a href="#">Majestic</a>
                                    </li>

                                </ul>

                            </div>
                            <figure class="header-mega-menu__highlight">
                                <img src="../../assets/img/categories/essenza-colchones.jpeg" alt="">
                            </figure>
                        </section>

                    </li>

                    <li class="header-menu-item ">
                        <a href="#">Camas</a>

                    </li>

                    <li class="header-menu-item header-menu-item--accent">
                        <a href="#">SALE</a>

                    </li>

                </ul>
            </nav>
            <div class="site-header__actions">
                <button class="site-header-action" id="header-action-search" @click="openSearch">
                    <i data-icon="magnifying-glass"></i>
                </button>
                <a href="#" class="site-header-action" id="header-action-cart">
                    <i data-icon="cart"></i>
                </a>
                <button class="site-header-action" id="header-action-menu" @click="toggleMenu">
                    <span class="nav-burger" :class="{'is-open': isMenuOpen}">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                </button>
            </div>
        </div>
    </section>
</header>
 
<header class="site-header" id="site-header">
    <search-overlay v-cloak>
        <div class="search-box">
            <form action="#" class="search-box__form">
                <input type="text" name="s" placeholder="Escribe lo que estás buscando" aria-label="Buscar">
                <button type="submit">
                    <i data-icon="magnifying-glass"></i>
                </button>
            </form>
            <p>Puedes buscar por número de referencia. Lorem ipsum dolor sit amet, consectetur.</p>
        </div>
    </search-overlay>
    {% render '@site-announcements' %}
    <section class="site-header-wrapper">
        <div class="container">
            <figure class="site-header__branding">
                <img src="{{ '/assets/img/essenza-logo.svg' | path }}" alt="Essenza Logo">
            </figure>
            <nav class="site-header__nav" :class="{'is-open': isMenuOpen}">
                <ul class="header-menu">
                    {% for item in nav_items %}
                    <li class="header-menu-item {% if item.is_accent %}header-menu-item--accent{% endif %}">
                        <a href="#">{{ item.title }}</a>
                        {% if item.mega_menu %}
                            {% set megaMenu = item.mega_menu %}
                            <section class="header-mega-menu">
                                <div class="header-mega-menu__content">
                                    <h3 class="title">{{ item.title }}</h3>
                                    {% for menu in megaMenu.submenus %}
                                        <ul class="mega-menu-submenu">
                                            <li class="title is-5 is-sans">{{ menu.title }}</li>
                                            {% for item in menu.items %}
                                                <li>
                                                    <a href="#">{{ item.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    {% endfor %}
                                </div>
                                <figure class="header-mega-menu__highlight">
                                    <img src="{{ megaMenu.image | path }}" alt="">
                                </figure>
                            </section>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </nav>
            <div class="site-header__actions">
                <button class="site-header-action" id="header-action-search" @click="openSearch">
                    <i data-icon="magnifying-glass"></i>
                </button>
                <a href="#" class="site-header-action" id="header-action-cart">
                    <i data-icon="cart"></i>
                </a>
                <button class="site-header-action" id="header-action-menu" @click="toggleMenu">
                    <span class="nav-burger" :class="{'is-open': isMenuOpen}">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                </button>
            </div>
        </div>
    </section>
</header>
 
{
  "nav_items": [
    {
      "title": "Colchones",
      "mega_menu": {
        "image": "/assets/img/categories/essenza-colchones.jpeg",
        "submenus": [
          {
            "title": "Tamaños",
            "items": [
              {
                "title": "Sencillo"
              },
              {
                "title": "Semidoble"
              },
              {
                "title": "Doble"
              },
              {
                "title": "Queen"
              },
              {
                "title": "King"
              }
            ]
          },
          {
            "title": "Líneas",
            "items": [
              {
                "title": "Balanzze"
              },
              {
                "title": "Royal"
              },
              {
                "title": "Pocket"
              },
              {
                "title": "Eden"
              },
              {
                "title": "Majestic"
              }
            ]
          }
        ]
      }
    },
    {
      "title": "Camas"
    },
    {
      "title": "SALE",
      "is_accent": true
    }
  ]
}

No notes defined.