@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

package/src/components/Megamenu/Megamenu.tsx

@@ -41,537 +41,133 @@ import {
   CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
   CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_CART_ICON,
+  CLASS_SPACER,
+  CLASS_TAG,
+  CLASS_TAG_ORANGE,
+  CLASS_TAG_SMALL,
+  CLASS_LIST_INLINE,
 } from "./constants";
 
-export const Megamenu = ({ className }: any) => {
-  return (
-    <nav
-      className={cx(CLASS_ROOT, className)}
-      data-megamenu
-      aria-label="Main navigation"
-    >
-      <div
-        className={cx(CLASS_TOP, CLASS_HIDE_MD_DOWN)}
-        data-hide-when-sticky="true"
-      >
-        <div className={CLASS_CONTAINER}>
-          <h2 id="top-menu-title" className="sr-only">
-            Top menu
-          </h2>
-          <ul
-            className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}
-            aria-labelledby="top-menu-title"
-          >
-            <li className={CLASS_NAV_ITEM}>
-              <a
-                href="#"
-                className={cx(CLASS_NAV_LINK, "is-active")}
-                aria-current="page"
-              >
-                Pre vás
-              </a>
-            </li>
-            <li className={CLASS_NAV_ITEM}>
-              <a href="#" className={CLASS_NAV_LINK}>
-                Pre biznis
-              </a>
-            </li>
-
-            <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
-
-            <li className={CLASS_NAV_ITEM}>
-              <a href="#" className={CLASS_NAV_LINK}>
-                <MegamenuIcon
-                  name="call"
-                  width={20}
-                  height={20}
-                  className={CLASS_NAV_ICON}
-                  aria-hidden="true"
-                />
-                Kontakt
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <div className={CLASS_MAIN}>
-        <div className={CLASS_CONTAINER}>
-          <h2 id="menu-title" className="sr-only">
-            Hlavné menu
-          </h2>
-          <ul className={CLASS_NAV} aria-labelledby="menu-title">
-            <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
-              <a
-                href="#"
-                className={CLASS_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={cx(
-                CLASS_NAV_ITEM,
-                CLASS_NAV_ITEM_MAIN,
-                CLASS_HIDE_MD_DOWN,
-              )}
-            >
-              <button
-                type="button"
-                className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
-                aria-controls="megamenu-volania"
-                aria-expanded="false"
-                aria-haspopup="true"
-              >
-                Volania
-              </button>
-              <div className={CLASS_NAV_DROPDOWN} id="megamenu-volania">
-                <div className={CLASS_CONTAINER}>
-                  <div className={CLASS_GRID}>
-                    <div className={cx(CLASS_CARD, "is-highlighted")}>
-                      <h3 id="featured-services" className="sr-only">
-                        Odporúčané služby
-                      </h3>
-                      <ul
-                        className={CLASS_SUBNAV}
-                        role="group"
-                        aria-labelledby="featured-services"
-                      >
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#" className={CLASS_TEXT_LARGE}>
-                            Internet na doma
-                          </a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#" className={CLASS_TEXT_LARGE}>
-                            Mobilné paušály
-                          </a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#" className={CLASS_TEXT_LARGE}>
-                            Televízia
-                          </a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#" className={CLASS_TEXT_LARGE}>
-                            Internet + TV
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-
-                    <div className={CLASS_CARD}>
-                      <h3 id="pausaly-heading">Paušály</h3>
-                      <ul
-                        className={CLASS_SUBNAV}
-                        role="group"
-                        aria-labelledby="pausaly-heading"
-                      >
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Prehľad paušálov</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Chcem nové číslo</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Yoxo paušál</a>
-                        </li>
-                      </ul>
-
-                      <h3 id="volania-s-kreditom-heading">
-                        Volania s kreditom
-                      </h3>
-                      <ul
-                        className={CLASS_SUBNAV}
-                        role="group"
-                        aria-labelledby="volania-s-kreditom-heading"
-                      >
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Prima Voľba</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Prima Kids</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">FunFón</a>
-                        </li>
-                      </ul>
+export const list = [
+  "Dobitie kreditu",
+  "Nedostupnosť služieb",
+  "Faktúry",
+  "Zdieľanie dát",
+  "Prečerpané dáta",
+  "Elektronická faktúra",
+  "Prvá pomoc internet",
+  "Nastavenie zariadení a sim kariet",
+  "Pevny internet do domacnosti",
+  "Dátový roaming",
+  "Nákup online",
+  "Telemarketing",
+];
 
-                      <h3 id="zahranicie-heading">Zahraničie</h3>
-                      <ul
-                        className={CLASS_SUBNAV}
-                        role="group"
-                        aria-labelledby="zahranicie-heading"
-                      >
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Roaming</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Cestovateľské balíky</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Volania do zahraničia</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Regulovaný roaming</a>
-                        </li>
-                      </ul>
-                    </div>
+export type MegamenuProps = {
+  className?: string;
+  searchEmpty?: boolean;
+};
 
-                    <div className={CLASS_CARD}>
-                      <h3 id="nase-sluzby-heading">Ste náš zákazník?</h3>
-                      <ul
-                        className={CLASS_SUBNAV}
-                        role="group"
-                        aria-labelledby="nase-sluzby-heading"
-                      >
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Chcem zmeniť paušál</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Dobiť kredit</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Predĺžiť služby</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Chcem nový telefón</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Navzájom zadarmo</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Orange Svojim</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Odporučte Orange</a>
-                        </li>
-                        <li className={CLASS_SUBNAV_ITEM}>
-                          <a href="#">Ostatné služby</a>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li
-              className={cx(
-                CLASS_NAV_ITEM,
-                CLASS_NAV_ITEM_MAIN,
-                CLASS_HIDE_MD_DOWN,
-              )}
-            >
-              <button
-                type="button"
-                className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
-                aria-controls="megamenu-internet-tv"
-                aria-expanded="false"
-                aria-haspopup="true"
-              >
-                Internet, TV
-              </button>
-              <div className={CLASS_NAV_DROPDOWN} id="megamenu-internet-tv">
-                <div className={CLASS_CONTAINER}>CONTENT</div>
-              </div>
-            </li>
-            <li
-              className={cx(
-                CLASS_NAV_ITEM,
-                CLASS_NAV_ITEM_MAIN,
-                CLASS_HIDE_MD_DOWN,
-              )}
-            >
-              <button
-                type="button"
-                className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
-                aria-controls="megamenu-telefony-zariadenia"
-                aria-expanded="false"
-                aria-haspopup="true"
-              >
-                Telefóny a zariadenia
-              </button>
-              <div
-                className={CLASS_NAV_DROPDOWN}
-                id="megamenu-telefony-zariadenia"
-              >
-                <div className={CLASS_CONTAINER}>CONTENT</div>
-              </div>
-            </li>
-            <li
-              className={cx(
-                CLASS_NAV_ITEM,
-                CLASS_NAV_ITEM_MAIN,
-                CLASS_HIDE_MD_DOWN,
-              )}
-            >
-              <a href="#" className={cx(CLASS_NAV_LINK)}>
-                Akcie
-              </a>
-            </li>
-            <li
-              className={cx(
-                CLASS_NAV_ITEM,
-                CLASS_NAV_ITEM_MAIN,
-                CLASS_HIDE_MD_DOWN,
-              )}
+export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
+  return (
+    <header>
+      <nav
+        className={cx(CLASS_ROOT, className)}
+        data-megamenu
+        aria-label="Main navigation"
+      >
+        <div
+          className={cx(CLASS_TOP, CLASS_HIDE_MD_DOWN)}
+          data-hide-when-sticky="true"
+        >
+          <div className={CLASS_CONTAINER}>
+            <ul
+              className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}
+              aria-label="Top menu"
             >
-              <a href="#" className={cx(CLASS_NAV_LINK)}>
-                Pomoc
-              </a>
-            </li>
-
-            <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
+              <li className={CLASS_NAV_ITEM}>
+                <a
+                  href="#"
+                  className={cx(CLASS_NAV_LINK, "is-active")}
+                  aria-current="page"
+                >
+                  Pre vás
+                </a>
+              </li>
+              <li className={CLASS_NAV_ITEM}>
+                <a href="#" className={CLASS_NAV_LINK}>
+                  Pre biznis
+                </a>
+              </li>
 
-            <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
-              <button
-                type="button"
-                className={CLASS_NAV_BUTTON}
-                aria-label="Vyhľadávanie"
-                aria-controls="megamenu-search"
-                aria-expanded="false"
-                aria-haspopup="true"
-              >
-                <MegamenuIcon
-                  width={24}
-                  height={24}
-                  name="search"
-                  aria-hidden="true"
-                />
-              </button>
+              <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
 
-              <div className={CLASS_NAV_DROPDOWN} id="megamenu-search">
-                <div className={CLASS_CONTAINER}>
-                  <input
-                    className={cx(
-                      CLASS_INPUT,
-                      CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
-                    )}
-                    id="search-1"
-                    type="text"
-                    placeholder="Search"
-                    name="search-1"
-                  />
-                  <ul className={CLASS_SUBNAV}>
-                    <li className={CLASS_SUBNAV_ITEM}>
-                      <a href="#">apple</a>
-                    </li>
-                    <li className={CLASS_SUBNAV_ITEM}>
-                      <a href="#">apple hodinky</a>
-                    </li>
-                    <li className={CLASS_SUBNAV_ITEM}>
-                      <a href="#">apple iphone</a>
-                    </li>
-                    <li className={CLASS_SUBNAV_ITEM}>
-                      <a href="#">apple 16</a>
-                    </li>
-                    <li className={CLASS_SUBNAV_ITEM}>
-                      <a href="#">apple pro</a>
-                    </li>
-                    <li className={CLASS_SUBNAV_ITEM}>
-                      <a href="#">apple watch</a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </li>
-            <li className={cx(CLASS_NAV_ITEM)}>
-              <a
-                href="#"
-                className={cx(CLASS_NAV_LINK)}
-                aria-label="Košík, 1 položka"
-                aria-describedby="cart-count"
-              >
-                <span
-                  className={CLASS_NAV_CART_ICON}
-                  data-items-in-cart="1"
-                  aria-hidden="true"
-                >
+              <li className={CLASS_NAV_ITEM}>
+                <a href="#" className={CLASS_NAV_LINK}>
                   <MegamenuIcon
-                    width={24}
-                    height={24}
-                    name="buy"
+                    name="call"
+                    width={20}
+                    height={20}
+                    className={CLASS_NAV_ICON}
                     aria-hidden="true"
                   />
-                </span>
-                <span id="cart-count" className="sr-only">
-                  1 položka v košíku
-                </span>
-              </a>
-            </li>
-            <li className={CLASS_NAV_ITEM}>
-              <a href="#" className={CLASS_NAV_LINK}>
-                <MegamenuIcon
-                  width={24}
-                  height={24}
-                  name="user"
-                  className={CLASS_NAV_ICON}
-                  aria-hidden="true"
-                />
-                Môj Orange
-              </a>
-            </li>
-            <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_LG_UP)}>
-              <button
-                type="button"
-                className={CLASS_NAV_BUTTON}
-                aria-label="Otvoriť menu"
-                aria-haspopup="true"
-                aria-expanded="false"
-              >
-                <MegamenuIcon
-                  width={24}
-                  height={24}
-                  name="menu"
-                  aria-hidden="true"
-                />
-              </button>
-            </li>
-          </ul>
+                  Kontakt
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-
-      {/* MOBILE MENU */}
-
-      <div
-        // className={cx(CLASS_MOBILE, "is-active")}
-        className={cx(CLASS_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={CLASS_MOBILE_OVERLAY}
-          type="button"
-        />
-
-        <div className={CLASS_MOBILE_WRAPPER}>
-          <div className={CLASS_MOBILE_HEADER}>
-            <div className={CLASS_CONTAINER}>
-              <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
-                <li className={CLASS_NAV_ITEM}>
-                  <a
-                    href="#"
-                    className={cx(CLASS_NAV_LINK, "is-active")}
-                    aria-current="page"
-                  >
-                    Pre vás
-                  </a>
-                </li>
-                <li className={CLASS_NAV_ITEM}>
-                  <a href="#" className={CLASS_NAV_LINK}>
-                    Pre biznis
-                  </a>
-                </li>
-
-                <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
 
-                <li className={CLASS_NAV_ITEM}>
-                  <button
-                    type="button"
-                    data-megamenu-close-button
-                    className={CLASS_NAV_BUTTON}
-                    aria-label="Zatvoriť menu"
+        <div className={CLASS_MAIN}>
+          <div className={CLASS_CONTAINER}>
+            <ul className={CLASS_NAV} aria-label="Hlavné menu">
+              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
+                <a
+                  href="#"
+                  className={CLASS_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"
                   >
-                    <MegamenuIcon
-                      name="close"
-                      width={20}
-                      height={20}
-                      aria-hidden="true"
+                    <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
+                    <path
+                      d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z"
+                      fill="white"
                     />
-                  </button>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className={CLASS_MOBILE_BODY}>
-            <div className={CLASS_CONTAINER}>
-              <input
+                  </svg>
+                </a>
+              </li>
+              <li
                 className={cx(
-                  CLASS_INPUT,
-                  CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_HIDE_MD_DOWN,
                 )}
-                id="search-1"
-                type="text"
-                placeholder="Search"
-                name="search-1"
-              />
-              <ul className={cx(CLASS_SUBNAV, "hide")}>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#">apple</a>
-                </li>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#">apple hodinky</a>
-                </li>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#">apple iphone</a>
-                </li>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#">apple 16</a>
-                </li>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#">apple pro</a>
-                </li>
-                <li className={CLASS_SUBNAV_ITEM}>
-                  <a href="#">apple watch</a>
-                </li>
-              </ul>
-
-              <ul className={CLASS_ACCORDION}>
-                <li className={CLASS_ACCORDION_ITEM}>
-                  <div className={CLASS_ACCORDION_HEADER}>
-                    <button
-                      type="button"
-                      className={CLASS_ACCORDION_BUTTON}
-                      aria-controls="mobile-accordion-volania"
-                      aria-expanded="false"
-                      data-accordion-toggle
-                      id="mobile-volania-button"
-                    >
-                      <span className={CLASS_ACCORDION_TITLE}>Volania</span>
-                      <MegamenuIcon
-                        name="chevron-right"
-                        width={24}
-                        height={24}
-                        className={CLASS_ACCORDION_ICON}
-                        aria-hidden="true"
-                      />
-                    </button>
-                  </div>
-                  <div
-                    className={CLASS_ACCORDION_BODY}
-                    id="mobile-accordion-volania"
-                    role="region"
-                    aria-labelledby="mobile-volania-button"
-                  >
+              >
+                <button
+                  type="button"
+                  className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
+                  aria-controls="megamenu-volania"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  Volania
+                </button>
+                <div className={CLASS_NAV_DROPDOWN} id="megamenu-volania">
+                  <div className={CLASS_CONTAINER}>
                     <div className={CLASS_GRID}>
                       <div className={cx(CLASS_CARD, "is-highlighted")}>
-                        <h3
-                          id="mobile-volania-featured-heading"
-                          className="sr-only"
-                        >
+                        <h3 id="featured-services" className="sr-only">
                           Odporúčané služby
                         </h3>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
-                          aria-labelledby="mobile-volania-featured-heading"
+                          aria-labelledby="featured-services"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#" className={CLASS_TEXT_LARGE}>
@@ -580,7 +176,7 @@ export const Megamenu = ({ className }: any) => {
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#" className={CLASS_TEXT_LARGE}>
-                              Mobilný internet
+                              Mobilné paušály
                             </a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
@@ -595,12 +191,15 @@ export const Megamenu = ({ className }: any) => {
                           </li>
                         </ul>
                       </div>
-                      <div>
-                        <h3 id="mobile-internet-heading">Internet</h3>
+
+                      <div className={CLASS_CARD}>
+                        <p id="pausaly-heading" className={CLASS_TEXT_LARGE}>
+                          Internet
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
-                          aria-labelledby="mobile-internet-heading"
+                          aria-labelledby="pausaly-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Prehľad internetu</a>
@@ -616,11 +215,16 @@ export const Megamenu = ({ className }: any) => {
                           </li>
                         </ul>
 
-                        <h3 id="mobile-tv-heading">Televízia</h3>
+                        <p
+                          id="volania-s-kreditom-heading"
+                          className={CLASS_TEXT_LARGE}
+                        >
+                          Televízia
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
-                          aria-labelledby="mobile-tv-heading"
+                          aria-labelledby="volania-s-kreditom-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Najlepšia TV na doma</a>
@@ -636,16 +240,25 @@ export const Megamenu = ({ className }: any) => {
                           </li>
                         </ul>
 
-                        <h3 id="mobile-internet-tv-heading">
+                        <p id="zahranicie-heading" className={CLASS_TEXT_LARGE}>
                           Internet + televízia
-                        </h3>
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
-                          aria-labelledby="mobile-internet-tv-heading"
+                          aria-labelledby="zahranicie-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Ponuka Love</a>
+                            <a href="#">Ponuka Love</a>{" "}
+                            <span
+                              className={cx(
+                                CLASS_TAG,
+                                CLASS_TAG_ORANGE,
+                                CLASS_TAG_SMALL,
+                              )}
+                            >
+                              Novinka
+                            </span>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Výhodný pár zariadení</a>
@@ -657,12 +270,19 @@ export const Megamenu = ({ className }: any) => {
                             <a href="#">Regulovaný roaming</a>
                           </li>
                         </ul>
+                      </div>
 
-                        <h3 id="mobile-customer-heading">Ste náš zákazník?</h3>
+                      <div className={CLASS_CARD}>
+                        <p
+                          id="nase-sluzby-heading"
+                          className={CLASS_TEXT_LARGE}
+                        >
+                          Ste náš zákazník?
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
-                          aria-labelledby="mobile-customer-heading"
+                          aria-labelledby="nase-sluzby-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Predĺžiť služby</a>
@@ -680,156 +300,616 @@ export const Megamenu = ({ className }: any) => {
                       </div>
                     </div>
                   </div>
-                </li>
+                </div>
+              </li>
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_HIDE_MD_DOWN,
+                )}
+              >
+                <button
+                  type="button"
+                  className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
+                  aria-controls="megamenu-internet-tv"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  Internet, TV
+                </button>
+                <div className={CLASS_NAV_DROPDOWN} id="megamenu-internet-tv">
+                  <div className={CLASS_CONTAINER}>CONTENT</div>
+                </div>
+              </li>
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_HIDE_MD_DOWN,
+                )}
+              >
+                <button
+                  type="button"
+                  className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
+                  aria-controls="megamenu-telefony-zariadenia"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  Telefóny a zariadenia
+                </button>
+                <div
+                  className={CLASS_NAV_DROPDOWN}
+                  id="megamenu-telefony-zariadenia"
+                >
+                  <div className={CLASS_CONTAINER}>CONTENT</div>
+                </div>
+              </li>
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_HIDE_MD_DOWN,
+                )}
+              >
+                <a href="#" className={cx(CLASS_NAV_LINK)}>
+                  Akcie
+                </a>
+              </li>
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_HIDE_MD_DOWN,
+                )}
+              >
+                <a href="#" className={cx(CLASS_NAV_LINK)}>
+                  Pomoc
+                </a>
+              </li>
+
+              <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
+
+              <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
+                <button
+                  type="button"
+                  className={CLASS_NAV_BUTTON}
+                  aria-label="Vyhľadávanie"
+                  aria-controls="megamenu-search"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  <MegamenuIcon
+                    width={24}
+                    height={24}
+                    name="search"
+                    aria-hidden="true"
+                  />
+                </button>
+
+                <div className={CLASS_NAV_DROPDOWN} id="megamenu-search">
+                  <div className={CLASS_CONTAINER}>
+                    <input
+                      className={cx(
+                        CLASS_INPUT,
+                        CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+                      )}
+                      id="megamenu-search-input"
+                      type="text"
+                      placeholder="Search"
+                      name="search"
+                      defaultValue={searchEmpty ? "" : "apple"}
+                    />
+                    {searchEmpty ? (
+                      <>
+                        <p>Najhľadanejši výrazy</p>
+                        <ul className={CLASS_LIST_INLINE}>
+                          {list.map((item) => (
+                            <li key={item}>
+                              <a href="/" className={cx(CLASS_TAG)}>
+                                {item}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    ) : (
+                      <ul className={CLASS_SUBNAV}>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple hodinky</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple iphone</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple 16</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple pro</a>
+                        </li>
+                        <li className={CLASS_SUBNAV_ITEM}>
+                          <a href="#">apple watch</a>
+                        </li>
+                      </ul>
+                    )}
+                  </div>
+                </div>
+              </li>
+              <li className={cx(CLASS_NAV_ITEM)}>
+                <a
+                  href="#"
+                  className={cx(CLASS_NAV_LINK)}
+                  aria-label="Košík, 1 položka"
+                  aria-describedby="cart-count"
+                >
+                  <span
+                    className={CLASS_NAV_CART_ICON}
+                    data-items-in-cart="1"
+                    aria-hidden="true"
+                  >
+                    <MegamenuIcon
+                      width={24}
+                      height={24}
+                      name="buy"
+                      aria-hidden="true"
+                    />
+                  </span>
+                  <span id="cart-count" className="sr-only">
+                    1 položka v košíku
+                  </span>
+                </a>
+              </li>
+              <li className={CLASS_NAV_ITEM}>
+                <a href="#" className={CLASS_NAV_LINK}>
+                  <MegamenuIcon
+                    width={24}
+                    height={24}
+                    name="user"
+                    className={CLASS_NAV_ICON}
+                    aria-hidden="true"
+                  />
+                  Môj Orange
+                </a>
+              </li>
+              <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_LG_UP)}>
+                <button
+                  type="button"
+                  className={CLASS_NAV_BUTTON}
+                  aria-label="Otvoriť menu"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <MegamenuIcon
+                    width={24}
+                    height={24}
+                    name="menu"
+                    aria-hidden="true"
+                  />
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* MOBILE MENU */}
 
-                <li className={CLASS_ACCORDION_ITEM}>
-                  <div className={CLASS_ACCORDION_HEADER}>
+        <div
+          // className={cx(CLASS_MOBILE, "is-active")}
+          className={cx(CLASS_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={CLASS_MOBILE_OVERLAY}
+            type="button"
+          />
+
+          <div className={CLASS_MOBILE_WRAPPER}>
+            <div className={CLASS_MOBILE_HEADER}>
+              <div className={CLASS_CONTAINER}>
+                <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
+                  <li className={CLASS_NAV_ITEM}>
+                    <a
+                      href="#"
+                      className={cx(CLASS_NAV_LINK, "is-active")}
+                      aria-current="page"
+                    >
+                      Pre vás
+                    </a>
+                  </li>
+                  <li className={CLASS_NAV_ITEM}>
+                    <a href="#" className={CLASS_NAV_LINK}>
+                      Pre biznis
+                    </a>
+                  </li>
+
+                  <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
+
+                  <li className={CLASS_NAV_ITEM}>
                     <button
                       type="button"
-                      className={CLASS_ACCORDION_BUTTON}
-                      aria-controls="mobile-accordion-internet-tv"
-                      aria-expanded="false"
-                      data-accordion-toggle
-                      id="mobile-internet-tv-button"
+                      data-megamenu-close-button
+                      className={CLASS_NAV_BUTTON}
+                      aria-label="Zatvoriť menu"
                     >
-                      <span className={CLASS_ACCORDION_TITLE}>
-                        Internet, TV
-                      </span>
                       <MegamenuIcon
-                        name="chevron-right"
-                        width={24}
-                        height={24}
-                        className={CLASS_ACCORDION_ICON}
+                        name="close"
+                        width={20}
+                        height={20}
                         aria-hidden="true"
                       />
                     </button>
-                  </div>
-                  <div
-                    className={CLASS_ACCORDION_BODY}
-                    id="mobile-accordion-internet-tv"
-                    role="region"
-                    aria-labelledby="mobile-internet-tv-button"
-                  >
-                    CONTENT
-                  </div>
-                </li>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className={CLASS_MOBILE_BODY}>
+              <div className={CLASS_CONTAINER}>
+                <input
+                  className={cx(
+                    CLASS_INPUT,
+                    CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+                  )}
+                  id="megamenu-mobile-search-input"
+                  type="text"
+                  placeholder="Search"
+                  name="search"
+                />
+                <ul className={cx(CLASS_SUBNAV, "hide")}>
+                  <li className={CLASS_SUBNAV_ITEM}>
+                    <a href="#">apple</a>
+                  </li>
+                  <li className={CLASS_SUBNAV_ITEM}>
+                    <a href="#">apple hodinky</a>
+                  </li>
+                  <li className={CLASS_SUBNAV_ITEM}>
+                    <a href="#">apple iphone</a>
+                  </li>
+                  <li className={CLASS_SUBNAV_ITEM}>
+                    <a href="#">apple 16</a>
+                  </li>
+                  <li className={CLASS_SUBNAV_ITEM}>
+                    <a href="#">apple pro</a>
+                  </li>
+                  <li className={CLASS_SUBNAV_ITEM}>
+                    <a href="#">apple watch</a>
+                  </li>
+                </ul>
 
-                <li className={CLASS_ACCORDION_ITEM}>
-                  <div className={CLASS_ACCORDION_HEADER}>
-                    <button
-                      type="button"
-                      className={CLASS_ACCORDION_BUTTON}
-                      aria-controls="mobile-accordion-telefony"
-                      aria-expanded="false"
-                      data-accordion-toggle
-                      id="mobile-telefony-button"
+                <ul className={CLASS_ACCORDION}>
+                  <li className={CLASS_ACCORDION_ITEM}>
+                    <div className={CLASS_ACCORDION_HEADER}>
+                      <button
+                        type="button"
+                        className={CLASS_ACCORDION_BUTTON}
+                        aria-controls="mobile-accordion-volania"
+                        aria-expanded="false"
+                        data-accordion-toggle
+                        id="mobile-volania-button"
+                      >
+                        <span className={CLASS_ACCORDION_TITLE}>Volania</span>
+                        <MegamenuIcon
+                          name="chevron-right"
+                          width={24}
+                          height={24}
+                          className={CLASS_ACCORDION_ICON}
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </div>
+                    <div
+                      className={CLASS_ACCORDION_BODY}
+                      id="mobile-accordion-volania"
+                      role="region"
+                      aria-labelledby="mobile-volania-button"
                     >
-                      <span className={CLASS_ACCORDION_TITLE}>
-                        Telefóny a zariadenia
-                      </span>
+                      <div className={CLASS_GRID}>
+                        <div className={cx(CLASS_CARD, "is-highlighted")}>
+                          <h3
+                            id="mobile-volania-featured-heading"
+                            className="sr-only"
+                          >
+                            Odporúčané služby
+                          </h3>
+                          <ul
+                            className={CLASS_SUBNAV}
+                            role="group"
+                            aria-labelledby="mobile-volania-featured-heading"
+                          >
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#" className={CLASS_TEXT_LARGE}>
+                                Internet na doma
+                              </a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#" className={CLASS_TEXT_LARGE}>
+                                Mobilný internet
+                              </a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#" className={CLASS_TEXT_LARGE}>
+                                Televízia
+                              </a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#" className={CLASS_TEXT_LARGE}>
+                                Internet + TV
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div>
+                          <p
+                            id="mobile-internet-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
+                            Internet
+                          </p>
+                          <ul
+                            className={CLASS_SUBNAV}
+                            role="group"
+                            aria-labelledby="mobile-internet-heading"
+                          >
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Prehľad internetu</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Mobilný internet</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Bezpečný internet so sebou</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Domáca linka k internetu</a>
+                            </li>
+                          </ul>
+
+                          <p
+                            id="mobile-tv-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
+                            Televízia
+                          </p>
+                          <ul
+                            className={CLASS_SUBNAV}
+                            role="group"
+                            aria-labelledby="mobile-tv-heading"
+                          >
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Najlepšia TV na doma</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">TV cez satelit</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">TV cez internet</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Novinky na Orange TV</a>
+                            </li>
+                          </ul>
+
+                          <p
+                            id="mobile-internet-tv-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
+                            Internet + televízia
+                          </p>
+                          <ul
+                            className={CLASS_SUBNAV}
+                            role="group"
+                            aria-labelledby="mobile-internet-tv-heading"
+                          >
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Ponuka Love</a>{" "}
+                              <span
+                                className={cx(
+                                  CLASS_TAG,
+                                  CLASS_TAG_ORANGE,
+                                  CLASS_TAG_SMALL,
+                                )}
+                              >
+                                Novinka
+                              </span>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Výhodný pár zariadení</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Volania do zahraničia</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Regulovaný roaming</a>
+                            </li>
+                          </ul>
+
+                          <p
+                            id="mobile-customer-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
+                            Ste náš zákazník?
+                          </p>
+                          <ul
+                            className={CLASS_SUBNAV}
+                            role="group"
+                            aria-labelledby="mobile-customer-heading"
+                          >
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Predĺžiť služby</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Nový internet</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Nová televízia</a>
+                            </li>
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Odporučte Orange</a>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+
+                  <li className={CLASS_ACCORDION_ITEM}>
+                    <div className={CLASS_ACCORDION_HEADER}>
+                      <button
+                        type="button"
+                        className={CLASS_ACCORDION_BUTTON}
+                        aria-controls="mobile-accordion-internet-tv"
+                        aria-expanded="false"
+                        data-accordion-toggle
+                        id="mobile-internet-tv-button"
+                      >
+                        <span className={CLASS_ACCORDION_TITLE}>
+                          Internet, TV
+                        </span>
+                        <MegamenuIcon
+                          name="chevron-right"
+                          width={24}
+                          height={24}
+                          className={CLASS_ACCORDION_ICON}
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </div>
+                    <div
+                      className={CLASS_ACCORDION_BODY}
+                      id="mobile-accordion-internet-tv"
+                      role="region"
+                      aria-labelledby="mobile-internet-tv-button"
+                    >
+                      CONTENT
+                    </div>
+                  </li>
+
+                  <li className={CLASS_ACCORDION_ITEM}>
+                    <div className={CLASS_ACCORDION_HEADER}>
+                      <button
+                        type="button"
+                        className={CLASS_ACCORDION_BUTTON}
+                        aria-controls="mobile-accordion-telefony"
+                        aria-expanded="false"
+                        data-accordion-toggle
+                        id="mobile-telefony-button"
+                      >
+                        <span className={CLASS_ACCORDION_TITLE}>
+                          Telefóny a zariadenia
+                        </span>
+                        <MegamenuIcon
+                          name="chevron-right"
+                          width={24}
+                          height={24}
+                          className={CLASS_ACCORDION_ICON}
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </div>
+                    <div
+                      className={CLASS_ACCORDION_BODY}
+                      id="mobile-accordion-telefony"
+                      role="region"
+                      aria-labelledby="mobile-telefony-button"
+                    >
+                      CONTENT
+                    </div>
+                  </li>
+
+                  <li className={CLASS_ACCORDION_ITEM}>
+                    <div className={CLASS_ACCORDION_HEADER}>
+                      <a href="#" className={CLASS_ACCORDION_BUTTON}>
+                        <span className={CLASS_ACCORDION_TITLE}>Akcie</span>
+                      </a>
+                    </div>
+                  </li>
+
+                  <li className={CLASS_ACCORDION_ITEM}>
+                    <div className={CLASS_ACCORDION_HEADER}>
+                      <a href="#" className={CLASS_ACCORDION_BUTTON}>
+                        <span className={CLASS_ACCORDION_TITLE}>Pomoc</span>
+                      </a>
+                    </div>
+                  </li>
+                </ul>
+
+                <h3 id="mobile-quick-access-heading" className="sr-only">
+                  Rýchly prístup
+                </h3>
+                <ul
+                  className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}
+                  role="group"
+                  aria-labelledby="mobile-quick-access-heading"
+                >
+                  <li className={CLASS_NAV_ITEM}>
+                    <a href="#" className={CLASS_NAV_BUTTON}>
                       <MegamenuIcon
-                        name="chevron-right"
                         width={24}
                         height={24}
-                        className={CLASS_ACCORDION_ICON}
+                        name="user"
+                        className={CLASS_NAV_ICON}
                         aria-hidden="true"
                       />
-                    </button>
-                  </div>
-                  <div
-                    className={CLASS_ACCORDION_BODY}
-                    id="mobile-accordion-telefony"
-                    role="region"
-                    aria-labelledby="mobile-telefony-button"
-                  >
-                    CONTENT
-                  </div>
-                </li>
-
-                <li className={CLASS_ACCORDION_ITEM}>
-                  <div className={CLASS_ACCORDION_HEADER}>
-                    <a href="#" className={CLASS_ACCORDION_BUTTON}>
-                      <span className={CLASS_ACCORDION_TITLE}>Akcie</span>
+                      Môj Orange
                     </a>
-                  </div>
-                </li>
-
-                <li className={CLASS_ACCORDION_ITEM}>
-                  <div className={CLASS_ACCORDION_HEADER}>
-                    <a href="#" className={CLASS_ACCORDION_BUTTON}>
-                      <span className={CLASS_ACCORDION_TITLE}>Pomoc</span>
+                  </li>
+                  <li className={CLASS_NAV_ITEM}>
+                    <a href="#" className={CLASS_NAV_BUTTON}>
+                      <MegamenuIcon
+                        width={24}
+                        height={24}
+                        name="call"
+                        className={CLASS_NAV_ICON}
+                        aria-hidden="true"
+                      />
+                      Kontakt
                     </a>
-                  </div>
-                </li>
-              </ul>
-
-              <h3 id="mobile-quick-access-heading" className="sr-only">
-                Rýchly prístup
-              </h3>
-              <ul
-                className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}
-                role="group"
-                aria-labelledby="mobile-quick-access-heading"
-              >
-                <li className={CLASS_NAV_ITEM}>
-                  <a href="#" className={CLASS_NAV_BUTTON}>
-                    <MegamenuIcon
-                      width={24}
-                      height={24}
-                      name="user"
-                      className={CLASS_NAV_ICON}
-                      aria-hidden="true"
-                    />
-                    Môj Orange
-                  </a>
-                </li>
-                <li className={CLASS_NAV_ITEM}>
-                  <a href="#" className={CLASS_NAV_BUTTON}>
-                    <MegamenuIcon
-                      width={24}
-                      height={24}
-                      name="call"
-                      className={CLASS_NAV_ICON}
-                      aria-hidden="true"
-                    />
-                    Kontakt
-                  </a>
-                </li>
-                <li className={CLASS_NAV_ITEM}>
-                  <a href="#" className={CLASS_NAV_BUTTON}>
-                    <MegamenuIcon
-                      width={24}
-                      height={24}
-                      name="advertising"
-                      className={CLASS_NAV_ICON}
-                      aria-hidden="true"
-                    />
-                    Akcie
-                  </a>
-                </li>
-                <li className={CLASS_NAV_ITEM}>
-                  <a href="#" className={CLASS_NAV_BUTTON}>
-                    <MegamenuIcon
-                      width={24}
-                      height={24}
-                      name="newspaper"
-                      className={CLASS_NAV_ICON}
-                      aria-hidden="true"
-                    />
-                    Pomoc
-                  </a>
-                </li>
-              </ul>
+                  </li>
+                  <li className={CLASS_NAV_ITEM}>
+                    <a href="#" className={CLASS_NAV_BUTTON}>
+                      <MegamenuIcon
+                        width={24}
+                        height={24}
+                        name="advertising"
+                        className={CLASS_NAV_ICON}
+                        aria-hidden="true"
+                      />
+                      Akcie
+                    </a>
+                  </li>
+                  <li className={CLASS_NAV_ITEM}>
+                    <a href="#" className={CLASS_NAV_BUTTON}>
+                      <MegamenuIcon
+                        width={24}
+                        height={24}
+                        name="newspaper"
+                        className={CLASS_NAV_ICON}
+                        aria-hidden="true"
+                      />
+                      Pomoc
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <button
-        aria-label="Zatvoriť dropdown menu"
-        className={CLASS_OVERLAY}
-        type="button"
-      />
-    </nav>
+        <button
+          aria-label="Zatvoriť dropdown menu"
+          className={CLASS_OVERLAY}
+          type="button"
+        />
+      </nav>
+      <div className={CLASS_SPACER} aria-hidden="true" />
+    </header>
   );
 };