@orangesk/cms-templates 1.0.0-beta.0

package/src/components/Megamenu/Megamenu.tsx

@@ -0,0 +1,848 @@
+import React from "react";
+import clsx from "clsx";
+
+export const Megamenu = ({ isDark }: { isDark?: boolean }) => {
+  return (
+    <header>
+      <nav
+        className={clsx("megamenu is-sticky", { "is-dark": isDark })}
+        data-megamenu="true"
+        aria-label="Main navigation"
+      >
+        <div
+          className="megamenu__top megamenu--hide-md-down"
+          data-hide-when-sticky="true"
+        >
+          <div className="megamenu__container">
+            <h2 id="top-menu-title" className="sr-only">
+              Top menu
+            </h2>
+            <ul
+              className="megamenu__nav megamenu__nav--space-small"
+              aria-labelledby="top-menu-title"
+            >
+              <li className="megamenu__nav-item">
+                <a
+                  href="#"
+                  className="megamenu__nav-link is-active"
+                  aria-current="page"
+                >
+                  Pre vás
+                </a>
+              </li>
+              <li className="megamenu__nav-item">
+                <a href="#" className="megamenu__nav-link">
+                  Pre biznis
+                </a>
+              </li>
+              <li className="megamenu__nav-spacer" aria-hidden="true" />
+              <li className="megamenu__nav-item">
+                <a href="#" className="megamenu__nav-link">
+                  <svg
+                    className="megamenu-icon megamenu__nav-icon"
+                    aria-hidden="true"
+                    width={20}
+                    height={20}
+                  >
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--light"
+                      xlinkHref="/sprite.svg#call"
+                    />
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--dark"
+                      xlinkHref="/sprite.svg#call"
+                    />
+                  </svg>
+                  Kontakt
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="megamenu__main">
+          <div className="megamenu__container">
+            <h2 id="menu-title" className="sr-only">
+              Hlavné menu
+            </h2>
+            <ul className="megamenu__nav" aria-labelledby="menu-title">
+              <li className="megamenu__nav-item megamenu__nav-item--main">
+                <a
+                  href="#"
+                  className="megamenu__nav-logo"
+                  aria-label="Domovská stránka"
+                >
+                  <svg
+                    viewBox="0 0 40 40"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
+                    <path
+                      d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z"
+                      fill="white"
+                    />
+                  </svg>
+                </a>
+              </li>
+              <li className="megamenu__nav-item megamenu__nav-item--main megamenu--hide-md-down">
+                <button
+                  type="button"
+                  className="megamenu__nav-button megamenu__nav-button--indicator"
+                  aria-controls="megamenu-volania"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  Volania
+                </button>
+                <div className="megamenu__nav-dropdown" id="megamenu-volania">
+                  <div className="megamenu__container">
+                    <div className="megamenu__grid">
+                      <div className="megamenu__card is-highlighted">
+                        <h3 id="featured-services" className="sr-only">
+                          Odporúčané služby
+                        </h3>
+                        <ul
+                          className="megamenu__subnav"
+                          role="group"
+                          aria-labelledby="featured-services"
+                        >
+                          <li className="megamenu__subnav-item">
+                            <a href="#" className="megamenu__text--large">
+                              Internet na doma
+                            </a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#" className="megamenu__text--large">
+                              Mobilné paušály
+                            </a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#" className="megamenu__text--large">
+                              Televízia
+                            </a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#" className="megamenu__text--large">
+                              Internet + TV
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="megamenu__card">
+                        <h3 id="pausaly-heading">Paušály</h3>
+                        <ul
+                          className="megamenu__subnav"
+                          role="group"
+                          aria-labelledby="pausaly-heading"
+                        >
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Prehľad paušálov</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Chcem nové číslo</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Yoxo paušál</a>
+                          </li>
+                        </ul>
+                        <h3 id="volania-s-kreditom-heading">
+                          Volania s kreditom
+                        </h3>
+                        <ul
+                          className="megamenu__subnav"
+                          role="group"
+                          aria-labelledby="volania-s-kreditom-heading"
+                        >
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Prima Voľba</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Prima Kids</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">FunFón</a>
+                          </li>
+                        </ul>
+                        <h3 id="zahranicie-heading">Zahraničie</h3>
+                        <ul
+                          className="megamenu__subnav"
+                          role="group"
+                          aria-labelledby="zahranicie-heading"
+                        >
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Roaming</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Cestovateľské balíky</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Volania do zahraničia</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Regulovaný roaming</a>
+                          </li>
+                        </ul>
+                      </div>
+                      <div className="megamenu__card">
+                        <h3 id="nase-sluzby-heading">Ste náš zákazník?</h3>
+                        <ul
+                          className="megamenu__subnav"
+                          role="group"
+                          aria-labelledby="nase-sluzby-heading"
+                        >
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Chcem zmeniť paušál</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Dobiť kredit</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Predĺžiť služby</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Chcem nový telefón</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Navzájom zadarmo</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Orange Svojim</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Odporučte Orange</a>
+                          </li>
+                          <li className="megamenu__subnav-item">
+                            <a href="#">Ostatné služby</a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </li>
+              <li className="megamenu__nav-item megamenu__nav-item--main megamenu--hide-md-down">
+                <button
+                  type="button"
+                  className="megamenu__nav-button megamenu__nav-button--indicator"
+                  aria-controls="megamenu-internet-tv"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  Internet, TV
+                </button>
+                <div
+                  className="megamenu__nav-dropdown"
+                  id="megamenu-internet-tv"
+                >
+                  <div className="megamenu__container">CONTENT</div>
+                </div>
+              </li>
+              <li className="megamenu__nav-item megamenu__nav-item--main megamenu--hide-md-down">
+                <button
+                  type="button"
+                  className="megamenu__nav-button megamenu__nav-button--indicator"
+                  aria-controls="megamenu-telefony-zariadenia"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  Telefóny a zariadenia
+                </button>
+                <div
+                  className="megamenu__nav-dropdown"
+                  id="megamenu-telefony-zariadenia"
+                >
+                  <div className="megamenu__container">CONTENT</div>
+                </div>
+              </li>
+              <li className="megamenu__nav-item megamenu__nav-item--main megamenu--hide-md-down">
+                <a href="#" className="megamenu__nav-link">
+                  Akcie
+                </a>
+              </li>
+              <li className="megamenu__nav-item megamenu__nav-item--main megamenu--hide-md-down">
+                <a href="#" className="megamenu__nav-link">
+                  Pomoc
+                </a>
+              </li>
+              <li className="megamenu__nav-spacer" aria-hidden="true" />
+              <li className="megamenu__nav-item megamenu--hide-md-down">
+                <button
+                  type="button"
+                  className="megamenu__nav-button"
+                  aria-label="Vyhľadávanie"
+                  aria-controls="megamenu-search"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  <svg
+                    className="megamenu-icon"
+                    aria-hidden="true"
+                    width={24}
+                    height={24}
+                  >
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--light"
+                      xlinkHref="/sprite.svg#search"
+                    />
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--dark"
+                      xlinkHref="/sprite.svg#search"
+                    />
+                  </svg>
+                </button>
+                <div className="megamenu__nav-dropdown" id="megamenu-search">
+                  <div className="megamenu__container">
+                    <input
+                      className="megamenu__input megamenu__input--search-icon-with-placeholder"
+                      id="search-1"
+                      type="text"
+                      placeholder="Search"
+                      name="search-1"
+                    />
+                    <ul className="megamenu__subnav">
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple hodinky</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple iphone</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple 16</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple pro</a>
+                      </li>
+                      <li className="megamenu__subnav-item">
+                        <a href="#">apple watch</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+              <li className="megamenu__nav-item">
+                <a
+                  href="#"
+                  className="megamenu__nav-link"
+                  aria-label="Košík, 1 položka"
+                  aria-describedby="cart-count"
+                >
+                  <span
+                    className="megamenu__nav-cart-icon"
+                    data-items-in-cart={1}
+                    aria-hidden="true"
+                  >
+                    <svg
+                      className="megamenu-icon"
+                      aria-hidden="true"
+                      width={24}
+                      height={24}
+                    >
+                      <use
+                        className="megamenu-icon__use megamenu-icon__use--light"
+                        xlinkHref="/sprite.svg#buy"
+                      />
+                      <use
+                        className="megamenu-icon__use megamenu-icon__use--dark"
+                        xlinkHref="/sprite.svg#buy"
+                      />
+                    </svg>
+                  </span>
+                  <span id="cart-count" className="sr-only">
+                    1 položka v košíku
+                  </span>
+                </a>
+              </li>
+              <li className="megamenu__nav-item">
+                <a href="#" className="megamenu__nav-link">
+                  <svg
+                    className="megamenu-icon megamenu__nav-icon"
+                    aria-hidden="true"
+                    width={24}
+                    height={24}
+                  >
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--light"
+                      xlinkHref="/sprite.svg#user"
+                    />
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--dark"
+                      xlinkHref="/sprite.svg#user"
+                    />
+                  </svg>
+                  Môj Orange
+                </a>
+              </li>
+              <li className="megamenu__nav-item megamenu--hide-lg-up">
+                <button
+                  type="button"
+                  className="megamenu__nav-button"
+                  aria-label="Otvoriť menu"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <svg
+                    className="megamenu-icon"
+                    aria-hidden="true"
+                    width={24}
+                    height={24}
+                  >
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--light"
+                      xlinkHref="/sprite.svg#menu"
+                    />
+                    <use
+                      className="megamenu-icon__use megamenu-icon__use--dark"
+                      xlinkHref="/sprite.svg#menu"
+                    />
+                  </svg>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          className="megamenu__mobile"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="mobile-menu-title"
+        >
+          <h2 id="mobile-menu-title" className="sr-only">
+            Hlavné menu
+          </h2>
+          <button
+            aria-label="Zatvoriť menu"
+            className="megamenu__mobile-overlay"
+            type="button"
+          />
+          <div className="megamenu__mobile-wrapper">
+            <div className="megamenu__mobile-header">
+              <div className="megamenu__container">
+                <ul className="megamenu__nav megamenu__nav--space-small">
+                  <li className="megamenu__nav-item">
+                    <a
+                      href="#"
+                      className="megamenu__nav-link is-active"
+                      aria-current="page"
+                    >
+                      Pre vás
+                    </a>
+                  </li>
+                  <li className="megamenu__nav-item">
+                    <a href="#" className="megamenu__nav-link">
+                      Pre biznis
+                    </a>
+                  </li>
+                  <li className="megamenu__nav-spacer" aria-hidden="true" />
+                  <li className="megamenu__nav-item">
+                    <button
+                      type="button"
+                      data-megamenu-close-button="true"
+                      className="megamenu__nav-button"
+                      aria-label="Zatvoriť menu"
+                    >
+                      <svg
+                        className="megamenu-icon"
+                        aria-hidden="true"
+                        width={20}
+                        height={20}
+                      >
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--light"
+                          xlinkHref="/sprite.svg#close"
+                        />
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--dark"
+                          xlinkHref="/sprite.svg#close"
+                        />
+                      </svg>
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="megamenu__mobile-body">
+              <div className="megamenu__container">
+                <input
+                  className="megamenu__input megamenu__input--search-icon-with-placeholder"
+                  id="search-1"
+                  type="text"
+                  placeholder="Search"
+                  name="search-1"
+                />
+                <ul className="megamenu__subnav hide">
+                  <li className="megamenu__subnav-item">
+                    <a href="#">apple</a>
+                  </li>
+                  <li className="megamenu__subnav-item">
+                    <a href="#">apple hodinky</a>
+                  </li>
+                  <li className="megamenu__subnav-item">
+                    <a href="#">apple iphone</a>
+                  </li>
+                  <li className="megamenu__subnav-item">
+                    <a href="#">apple 16</a>
+                  </li>
+                  <li className="megamenu__subnav-item">
+                    <a href="#">apple pro</a>
+                  </li>
+                  <li className="megamenu__subnav-item">
+                    <a href="#">apple watch</a>
+                  </li>
+                </ul>
+                <ul className="megamenu__accordion">
+                  <li className="megamenu__accordion-item">
+                    <div className="megamenu__accordion-header">
+                      <button
+                        type="button"
+                        className="megamenu__accordion-button"
+                        aria-controls="mobile-accordion-volania"
+                        aria-expanded="false"
+                        data-accordion-toggle="true"
+                        id="mobile-volania-button"
+                      >
+                        <span className="megamenu__accordion-title">
+                          Volania
+                        </span>
+                        <svg
+                          className="megamenu-icon megamenu__accordion-icon"
+                          aria-hidden="true"
+                          width={24}
+                          height={24}
+                        >
+                          <use
+                            className="megamenu-icon__use megamenu-icon__use--light"
+                            xlinkHref="/sprite.svg#chevron-right"
+                          />
+                          <use
+                            className="megamenu-icon__use megamenu-icon__use--dark"
+                            xlinkHref="/sprite.svg#chevron-right"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                    <div
+                      className="megamenu__accordion-body"
+                      id="mobile-accordion-volania"
+                      role="region"
+                      aria-labelledby="mobile-volania-button"
+                    >
+                      <div className="megamenu__grid">
+                        <div className="megamenu__card is-highlighted">
+                          <h3
+                            id="mobile-volania-featured-heading"
+                            className="sr-only"
+                          >
+                            Odporúčané služby
+                          </h3>
+                          <ul
+                            className="megamenu__subnav"
+                            role="group"
+                            aria-labelledby="mobile-volania-featured-heading"
+                          >
+                            <li className="megamenu__subnav-item">
+                              <a href="#" className="megamenu__text--large">
+                                Internet na doma
+                              </a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#" className="megamenu__text--large">
+                                Mobilný internet
+                              </a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#" className="megamenu__text--large">
+                                Televízia
+                              </a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#" className="megamenu__text--large">
+                                Internet + TV
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div>
+                          <h3 id="mobile-internet-heading">Internet</h3>
+                          <ul
+                            className="megamenu__subnav"
+                            role="group"
+                            aria-labelledby="mobile-internet-heading"
+                          >
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Prehľad internetu</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Mobilný internet</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Bezpečný internet so sebou</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Domáca linka k internetu</a>
+                            </li>
+                          </ul>
+                          <h3 id="mobile-tv-heading">Televízia</h3>
+                          <ul
+                            className="megamenu__subnav"
+                            role="group"
+                            aria-labelledby="mobile-tv-heading"
+                          >
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Najlepšia TV na doma</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">TV cez satelit</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">TV cez internet</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Novinky na Orange TV</a>
+                            </li>
+                          </ul>
+                          <h3 id="mobile-internet-tv-heading">
+                            Internet + televízia
+                          </h3>
+                          <ul
+                            className="megamenu__subnav"
+                            role="group"
+                            aria-labelledby="mobile-internet-tv-heading"
+                          >
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Ponuka Love</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Výhodný pár zariadení</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Volania do zahraničia</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Regulovaný roaming</a>
+                            </li>
+                          </ul>
+                          <h3 id="mobile-customer-heading">
+                            Ste náš zákazník?
+                          </h3>
+                          <ul
+                            className="megamenu__subnav"
+                            role="group"
+                            aria-labelledby="mobile-customer-heading"
+                          >
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Predĺžiť služby</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Nový internet</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Nová televízia</a>
+                            </li>
+                            <li className="megamenu__subnav-item">
+                              <a href="#">Odporučte Orange</a>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="megamenu__accordion-item">
+                    <div className="megamenu__accordion-header">
+                      <button
+                        type="button"
+                        className="megamenu__accordion-button"
+                        aria-controls="mobile-accordion-internet-tv"
+                        aria-expanded="false"
+                        data-accordion-toggle="true"
+                        id="mobile-internet-tv-button"
+                      >
+                        <span className="megamenu__accordion-title">
+                          Internet, TV
+                        </span>
+                        <svg
+                          className="megamenu-icon megamenu__accordion-icon"
+                          aria-hidden="true"
+                          width={24}
+                          height={24}
+                        >
+                          <use
+                            className="megamenu-icon__use megamenu-icon__use--light"
+                            xlinkHref="/sprite.svg#chevron-right"
+                          />
+                          <use
+                            className="megamenu-icon__use megamenu-icon__use--dark"
+                            xlinkHref="/sprite.svg#chevron-right"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                    <div
+                      className="megamenu__accordion-body"
+                      id="mobile-accordion-internet-tv"
+                      role="region"
+                      aria-labelledby="mobile-internet-tv-button"
+                    >
+                      CONTENT
+                    </div>
+                  </li>
+                  <li className="megamenu__accordion-item">
+                    <div className="megamenu__accordion-header">
+                      <button
+                        type="button"
+                        className="megamenu__accordion-button"
+                        aria-controls="mobile-accordion-telefony"
+                        aria-expanded="false"
+                        data-accordion-toggle="true"
+                        id="mobile-telefony-button"
+                      >
+                        <span className="megamenu__accordion-title">
+                          Telefóny a zariadenia
+                        </span>
+                        <svg
+                          className="megamenu-icon megamenu__accordion-icon"
+                          aria-hidden="true"
+                          width={24}
+                          height={24}
+                        >
+                          <use
+                            className="megamenu-icon__use megamenu-icon__use--light"
+                            xlinkHref="/sprite.svg#chevron-right"
+                          />
+                          <use
+                            className="megamenu-icon__use megamenu-icon__use--dark"
+                            xlinkHref="/sprite.svg#chevron-right"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                    <div
+                      className="megamenu__accordion-body"
+                      id="mobile-accordion-telefony"
+                      role="region"
+                      aria-labelledby="mobile-telefony-button"
+                    >
+                      CONTENT
+                    </div>
+                  </li>
+                  <li className="megamenu__accordion-item">
+                    <div className="megamenu__accordion-header">
+                      <a href="#" className="megamenu__accordion-button">
+                        <span className="megamenu__accordion-title">Akcie</span>
+                      </a>
+                    </div>
+                  </li>
+                  <li className="megamenu__accordion-item">
+                    <div className="megamenu__accordion-header">
+                      <a href="#" className="megamenu__accordion-button">
+                        <span className="megamenu__accordion-title">Pomoc</span>
+                      </a>
+                    </div>
+                  </li>
+                </ul>
+                <h3 id="mobile-quick-access-heading" className="sr-only">
+                  Rýchly prístup
+                </h3>
+                <ul
+                  className="megamenu__nav megamenu__nav--vertical"
+                  role="group"
+                  aria-labelledby="mobile-quick-access-heading"
+                >
+                  <li className="megamenu__nav-item">
+                    <a href="#" className="megamenu__nav-button">
+                      <svg
+                        className="megamenu-icon megamenu__nav-icon"
+                        aria-hidden="true"
+                        width={24}
+                        height={24}
+                      >
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--light"
+                          xlinkHref="/sprite.svg#user"
+                        />
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--dark"
+                          xlinkHref="/sprite.svg#user"
+                        />
+                      </svg>
+                      Môj Orange
+                    </a>
+                  </li>
+                  <li className="megamenu__nav-item">
+                    <a href="#" className="megamenu__nav-button">
+                      <svg
+                        className="megamenu-icon megamenu__nav-icon"
+                        aria-hidden="true"
+                        width={24}
+                        height={24}
+                      >
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--light"
+                          xlinkHref="/sprite.svg#call"
+                        />
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--dark"
+                          xlinkHref="/sprite.svg#call"
+                        />
+                      </svg>
+                      Kontakt
+                    </a>
+                  </li>
+                  <li className="megamenu__nav-item">
+                    <a href="#" className="megamenu__nav-button">
+                      <svg
+                        className="megamenu-icon megamenu__nav-icon"
+                        aria-hidden="true"
+                        width={24}
+                        height={24}
+                      >
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--light"
+                          xlinkHref="/sprite.svg#advertising"
+                        />
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--dark"
+                          xlinkHref="/sprite.svg#advertising"
+                        />
+                      </svg>
+                      Akcie
+                    </a>
+                  </li>
+                  <li className="megamenu__nav-item">
+                    <a href="#" className="megamenu__nav-button">
+                      <svg
+                        className="megamenu-icon megamenu__nav-icon"
+                        aria-hidden="true"
+                        width={24}
+                        height={24}
+                      >
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--light"
+                          xlinkHref="/sprite.svg#newspaper"
+                        />
+                        <use
+                          className="megamenu-icon__use megamenu-icon__use--dark"
+                          xlinkHref="/sprite.svg#newspaper"
+                        />
+                      </svg>
+                      Pomoc
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button
+          aria-label="Zatvoriť dropdown menu"
+          className="megamenu__overlay"
+          type="button"
+        />
+      </nav>
+      <div className="megamenu-spacer" aria-hidden="true" />
+    </header>
+  );
+};