@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/Megamenu/Megamenu.tsx

@@ -1,398 +1,841 @@
-import React from "react";
 import cx from "classnames";
-import MegamenuDropdown from "./MegamenuDropdown";
-import { Grid, GridCol } from "../Grid";
-import { Link } from "../Link";
-import { Container } from "../Container";
-import { IconButton } from "../Button";
-import logo from "../../assets/logo/logo.svg";
-import Image from "next/image";
-import { Tag } from "../Tag";
-import { Field } from "../Forms/Field";
 
-const CLASS_ROOT = "megamenu";
+import { MegamenuIcon } from "./MegaMenuIcon";
+import {
+  CLASS_CONTAINER,
+  CLASS_GRID,
+  CLASS_HIDE_MD_DOWN,
+  CLASS_HIDE_LG_UP,
+  CLASS_MAIN,
+  CLASS_NAV,
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_BUTTON_INDICATOR,
+  CLASS_NAV_DROPDOWN,
+  CLASS_NAV_ICON,
+  CLASS_NAV_ITEM,
+  CLASS_NAV_ITEM_MAIN,
+  CLASS_NAV_LINK,
+  CLASS_NAV_LOGO,
+  CLASS_NAV_SPACER,
+  CLASS_ROOT,
+  CLASS_SUBNAV,
+  CLASS_SUBNAV_ITEM,
+  CLASS_TEXT_LARGE,
+  CLASS_TOP,
+  CLASS_MOBILE,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_BODY,
+  CLASS_NAV_VERTICAL,
+  CLASS_OVERLAY,
+  CLASS_ACCORDION,
+  CLASS_ACCORDION_ITEM,
+  CLASS_ACCORDION_HEADER,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_TITLE,
+  CLASS_ACCORDION_ICON,
+  CLASS_ACCORDION_BODY,
+  CLASS_CARD,
+  CLASS_INPUT,
+  CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
+  CLASS_NAV_SPACE_SMALL,
+  CLASS_NAV_CART_ICON,
+  CLASS_SPACER,
+} from "./constants";
 
-interface MegamenuProps {
-  /** Additional CSS classes */
-  className?: string;
-  /** Sets Megamenu to use specific color scheme */
-  colorScheme?: "dark" | "light";
-}
-
-export const Megamenu = (props: MegamenuProps) => {
-  const { className, colorScheme } = props;
-
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-    },
-    className,
-  );
-
-  const sidebarToggle = `[
-    {"target":"#megamenu-sidebar","attribute":"class","value":"is-open"},
-    {"target":"#megamenu-overlay","attribute":"class","value":"is-open"},
-    {"target":"self","attribute":"name","value":"/sprite.svg#close"},
-    {"target":"#megamenu-visible-closed","attribute":"class","value":"hide"},
-    {"target":"#megamenu-visible-open","attribute":"class","value":"megamenu__visible"}
-  ]`;
-
-  const closeSidebar = `[
-    {"target":"#megamenu-sidebar","attribute":"class","value":"is-open"},
-    {"target":"#megamenu-overlay","attribute":"class","value":"is-open"}
-  ]`;
-
-  const dropdownData = () => {
-    return (
-      <Grid style={{ padding: "20px 0" }}>
-        <GridCol
-          className={`${CLASS_ROOT}-dropdown__highlight`}
-          style={{ padding: "30px" }}
-          size={{ lg: 12, xl: 4 }}
+export const Megamenu = ({ className }: any) => {
+  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"
         >
-          <ul className="h3 list-unstyled">
-            <li className={`mb-small mb-xl-medium`}>
-              <Link href="#">Internet na doma</Link>
-            </li>
-            <li className={`mb-small mb-xl-medium`}>
-              <Link href="#">Mobilný internet</Link>
-            </li>
-            <li className={`mb-small mb-xl-medium`}>
-              <Link href="#">Televízia</Link>
-            </li>
-            <li className={`mb-small mb-xl-medium`}>
-              <Link href="#">Internet + TV</Link>
-            </li>
-          </ul>
-        </GridCol>
-
-        <GridCol size={{ lg: 12, xl: 4 }} style={{ padding: "30px" }}>
-          <div className={`mb-large`}>
-            <h4 className="h6">Internet</h4>
-            <ul className="h6 bold list-unstyled">
-              <li className={`mb-small`}>
-                <Link href="#">Prehľad internetu</Link>
-              </li>
-              <li className={`mb-small`}>
-                <Link href="#">
-                  Mobilný internet{" "}
-                  <Tag color="orange" size="small">
-                    Novinka
-                  </Tag>
-                </Link>
+          <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={`mb-small`}>
-                <Link href="#">Bezpečný internet so sebou</Link>
+              <li className={CLASS_NAV_ITEM}>
+                <a href="#" className={CLASS_NAV_LINK}>
+                  Pre biznis
+                </a>
               </li>
-              <li className={`mb-small`}>
-                <Link href="#">Domáca linka k internetu</Link>
+
+              <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={`mb-large`}>
-            <h4 className="h6">Televízia</h4>
-            <ul className="h6 bold list-unstyled">
-              <li className={`mb-small`}>
-                <Link href="#">Najlepšia TV na doma</Link>
-              </li>
-              <li className={`mb-small`}>
-                <Link href="#">TV cez satelit</Link>
-              </li>
-              <li className={`mb-small`}>
-                <Link href="#">TV cez internet</Link>
-              </li>
-              <li className={`mb-small`}>
-                <Link href="#">Novinky na Orange TV</Link>
+        <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>
-            </ul>
-          </div>
+              <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>
 
-          <div className={`mb-large`}>
-            <h4 className="h6">Internet + televízia</h4>
-            <ul className="h6 bold list-unstyled">
-              <li className={`mb-small`}>
-                <Link href="#">Ponuka Love</Link>
+                        <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>
+
+                        <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>
+
+                      <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={`mb-small`}>
-                <Link href="#">Výhodný pár zariadení</Link>
+              <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={`mb-small`}>
-                <Link href="#">Volania do zahraničia</Link>
+              <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={`mb-small`}>
-                <Link href="#">Regulovaný roaming</Link>
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_HIDE_MD_DOWN,
+                )}
+              >
+                <a href="#" className={cx(CLASS_NAV_LINK)}>
+                  Akcie
+                </a>
               </li>
-            </ul>
-          </div>
-        </GridCol>
+              <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>
 
-        <GridCol size={{ lg: 12, xl: 4 }} style={{ padding: "30px" }}>
-          <div className={`mb-large`}>
-            <h4 className="h6">Ste náš zákazník?</h4>
-            <ul className="h6 bold list-unstyled">
-              <li className={`mb-small`}>
-                <Link href="#">Predĺžiť služby</Link>
+                <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={`mb-small`}>
-                <Link href="#">Nový internet</Link>
+              <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={`mb-small`}>
-                <Link href="#">Nová televízia</Link>
+              <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={`mb-small`}>
-                <Link href="#">Odporučte Orange</Link>
+              <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>
-        </GridCol>
-      </Grid>
-    );
-  };
-
-  return (
-    <>
-      {/* Overlay for mobile/tablet sidebar */}
-      <div
-        className={`${CLASS_ROOT}-overlay`}
-        id="megamenu-overlay"
-        data-toggle={closeSidebar}
-      />
-
-      <div className={classes}>
-        {/* Main Navigation Header */}
-        <div className={`${CLASS_ROOT}-divider`}>
-          <Container className={`${CLASS_ROOT}-header`}>
-            <span className={`${CLASS_ROOT}__visible`}>
-              <Link
-                href="#"
-                className={`h5 ${CLASS_ROOT}-link__small is-active`}
-              >
-                Pre vás
-              </Link>
-              <Link href="#" className={`h5 ${CLASS_ROOT}-link__small`}>
-                Pre firmy
-              </Link>
-            </span>
-            <Image
-              src={logo}
-              alt="logo"
-              className={`${CLASS_ROOT}-logo hide-xl`}
-            />
-            <IconButton
-              iconName="menu"
-              isSquare
-              className={`h5 ${CLASS_ROOT}-icon`}
-              data-toggle={sidebarToggle}
-            />
-          </Container>
         </div>
 
-        {/* Sidebar for mobile/tablet */}
+        {/* MOBILE MENU */}
+
         <div
-          className={`${CLASS_ROOT}-sidebar ${CLASS_ROOT}-divider`}
-          id="megamenu-sidebar"
+          // className={cx(CLASS_MOBILE, "is-active")}
+          className={cx(CLASS_MOBILE)}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="mobile-menu-title"
         >
-          {/* Sidebar Header */}
-          <div className={`${CLASS_ROOT}-sidebar-header`}>
-            <Container className={`${CLASS_ROOT}-header`}>
-              <div>
-                <Link
-                  href="#"
-                  className={`h5 ${CLASS_ROOT}-link__small is-active`}
-                >
-                  Pre vás
-                </Link>
-                <Link href="#" className={`h5 ${CLASS_ROOT}-link__small`}>
-                  Pre firmy
-                </Link>
-              </div>
-              <IconButton
-                iconName="close"
-                isSquare
-                className={`h5 mb-none ${CLASS_ROOT}-icon`}
-                data-toggle={closeSidebar}
-              />
-            </Container>
-          </div>
-
-          {/* Sidebar Content */}
-          <Container className={`${CLASS_ROOT}-content `} id="megamenu-content">
-            <div>
-              <Image
-                src={logo}
-                alt="logo"
-                className={`${CLASS_ROOT}-logo show-xl`}
-              />
-              <MegamenuDropdown
-                id="dropdown-1"
-                title="Internet, TV"
-                className={`h5 ${CLASS_ROOT}-dropdown__active `}
-                colorScheme={colorScheme}
-              >
-                {dropdownData()}
-              </MegamenuDropdown>
+          <h2 id="mobile-menu-title" className="sr-only">
+            Hlavné menu
+          </h2>
+          <button
+            aria-label="Zatvoriť menu"
+            className={CLASS_MOBILE_OVERLAY}
+            type="button"
+          />
 
-              <MegamenuDropdown
-                id="dropdown-2"
-                title="Mobilné služby"
-                className="h5"
-                colorScheme={colorScheme}
-              >
-                {dropdownData()}
-              </MegamenuDropdown>
+          <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>
 
-              <MegamenuDropdown
-                id="dropdown-3"
-                title="Telefóny a zariadenia"
-                className="h5"
-                colorScheme={colorScheme}
-              >
-                {dropdownData()}
-              </MegamenuDropdown>
+                  <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
 
-              <button
-                className={`h5 ${CLASS_ROOT}-link__full is-active`}
-              >
-                Akcie
-              </button>
-              <button className={`h5 ${CLASS_ROOT}-link__full`}>Pomoc</button>
+                  <li className={CLASS_NAV_ITEM}>
+                    <button
+                      type="button"
+                      data-megamenu-close-button
+                      className={CLASS_NAV_BUTTON}
+                      aria-label="Zatvoriť menu"
+                    >
+                      <MegamenuIcon
+                        name="close"
+                        width={20}
+                        height={20}
+                        aria-hidden="true"
+                      />
+                    </button>
+                  </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="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>
 
-            <div>
-              {" "}
-              <div className="show-xl">
-                <MegamenuDropdown
-                  id="dropdown-5"
-                  title=""
-                  icon="search"
-                  className={`h5 ${CLASS_ROOT}-dropdown__active`}
-                  colorScheme={colorScheme}
-                >
-                  <Grid style={{ padding: "20px 0" }}>
-                    <GridCol size={12}>
-                      <Field
-                        control={{
-                          type: "text",
-                        }}
-                        label="Search"
-                      />
-                    </GridCol>
-                    <GridCol size={12}>
-                      <h6>Najhľadanejšie výrazy</h6>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
-                      >
-                        Novinka
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
-                      >
-                        Dobitie kreditu
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
-                      >
-                        Novinka
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
-                      >
-                        Dobitie kreditu
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
-                      >
-                        Dobitie kreditu
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
-                      >
-                        Novinka
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
+                <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"
                       >
-                        Dobitie kreditu
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
-                      >
-                        Novinka
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
-                      >
-                        Novinka
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
+                        <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"
+                    >
+                      <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>
+                          <h3 id="mobile-internet-heading">Internet</h3>
+                          <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>
+
+                          <h3 id="mobile-tv-heading">Televízia</h3>
+                          <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>
+
+                          <h3 id="mobile-internet-tv-heading">
+                            Internet + televízia
+                          </h3>
+                          <ul
+                            className={CLASS_SUBNAV}
+                            role="group"
+                            aria-labelledby="mobile-internet-tv-heading"
+                          >
+                            <li className={CLASS_SUBNAV_ITEM}>
+                              <a href="#">Ponuka Love</a>
+                            </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>
+
+                          <h3 id="mobile-customer-heading">
+                            Ste náš zákazník?
+                          </h3>
+                          <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"
                       >
-                        Dobitie kreditu
-                      </Tag>
-                      <Tag
-                        color="orange"
-                        style={{ marginRight: "10px", marginBottom: "10px" }}
+                        <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"
                       >
-                        Novinka
-                      </Tag>
-                    </GridCol>
-                  </Grid>
-                </MegamenuDropdown>
+                        <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>
 
-                <IconButton
-                  iconName="buy"
-                  className={`${CLASS_ROOT}-link__full`}
-                />
-                <IconButton
-                  iconName="user"
-                  className={`${CLASS_ROOT}-link__full`}
-                >
-                  Môj Orange
-                </IconButton>
-              </div>
-              <div className="hide-xl">
-                <IconButton
-                  iconName="user"
-                  className={`${CLASS_ROOT}-link__full--icon`}
-                >
-                  Môj Orange
-                </IconButton>
-                <IconButton
-                  iconName="call"
-                  className={`${CLASS_ROOT}-link__full--icon`}
-                >
-                  Kontakt
-                </IconButton>
-                <IconButton
-                  iconName="advertising"
-                  className={`${CLASS_ROOT}-link__full--icon`}
-                >
-                  Akcies
-                </IconButton>
-                <IconButton
-                  iconName="newspaper"
-                  className={`${CLASS_ROOT}-link__full--icon`}
+                  <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"
                 >
-                  Človek
-                </IconButton>
+                  <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>
               </div>
             </div>
-          </Container>
+          </div>
         </div>
-      </div>
-    </>
+
+        <button
+          aria-label="Zatvoriť dropdown menu"
+          className={CLASS_OVERLAY}
+          type="button"
+        />
+      </nav>
+      <div className={CLASS_SPACER} aria-hidden="true" />
+    </header>
   );
 };