@orangesk/orange-design-system 2.0.0-beta.30 → 2.0.0-beta.32

package/src/components/Megamenu/Megamenu.tsx

@@ -1,6 +1,9 @@
 import cx from "classnames";
 
 import { MegamenuIcon } from "./MegaMenuIcon";
+import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
+import { MegamenuSearchContent } from "./MegamenuSearchContent";
+import { getMegamenuIds } from "./ids";
 import {
   CLASS_CONTAINER,
   CLASS_GRID,
@@ -13,14 +16,18 @@ import {
   CLASS_NAV_DROPDOWN,
   CLASS_NAV_ICON,
   CLASS_NAV_ITEM,
+  CLASS_NAV_ITEM_LEAD,
   CLASS_NAV_ITEM_MAIN,
   CLASS_NAV_LINK,
+  CLASS_NAV_LINK_LOCALE,
+  CLASS_NAV_MOBILE_LOCALE,
   CLASS_NAV_LOGO,
   CLASS_NAV_SPACER,
   CLASS_ROOT,
   CLASS_SUBNAV,
   CLASS_SUBNAV_ITEM,
   CLASS_TEXT_LARGE,
+  CLASS_CAPTION,
   CLASS_TOP,
   CLASS_MOBILE,
   CLASS_MOBILE_OVERLAY,
@@ -37,42 +44,135 @@ import {
   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,
   CLASS_TAG,
   CLASS_TAG_ORANGE,
   CLASS_TAG_SMALL,
-  CLASS_LIST_INLINE,
 } from "./constants";
-
-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",
-];
+import React from "react";
+import { MenuItem, MenuSection, menuSections } from "./data";
 
 export type MegamenuProps = {
   className?: string;
+  title?: string;
+  isSticky?: boolean;
   searchEmpty?: boolean;
+  searchFilled?: boolean;
 };
 
-export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
+const renderMenuItems = (items: MenuItem[]) => (
+  <>
+    {items.map((item) => (
+      <li className={CLASS_SUBNAV_ITEM} key={item.label}>
+        <a
+          href={item.href ?? "#"}
+          className={item.isLarge ? CLASS_TEXT_LARGE : undefined}
+        >
+          {item.label}
+        </a>
+        {item.tag ? (
+          <span className={cx(CLASS_TAG, CLASS_TAG_ORANGE, CLASS_TAG_SMALL)}>
+            {item.tag}
+          </span>
+        ) : null}
+      </li>
+    ))}
+  </>
+);
+
+const renderMenuSectionGrid = (
+  section: MenuSection,
+  idPrefix: string,
+  captionClass: string,
+  mergeColumnsToSingleCard = false,
+) => {
+  const featuredHeadingId = `${idPrefix}-${section.id}-${section.featured.id}`;
+
+  return (
+    <div className={CLASS_GRID}>
+      <div className={cx(CLASS_CARD, "is-highlighted")}>
+        <h3 id={featuredHeadingId} className="sr-only">
+          {section.featured.heading}
+        </h3>
+        <ul
+          className={CLASS_SUBNAV}
+          role="group"
+          aria-labelledby={featuredHeadingId}
+        >
+          {renderMenuItems(section.featured.items)}
+        </ul>
+      </div>
+
+      {mergeColumnsToSingleCard ? (
+        <div className={CLASS_CARD}>
+          {section.columns.flat().map((group) => {
+            const headingId = `${idPrefix}-${section.id}-${group.id}-heading`;
+
+            return (
+              <React.Fragment key={group.id}>
+                <p id={headingId} className={captionClass}>
+                  {group.heading}
+                </p>
+                <ul
+                  className={CLASS_SUBNAV}
+                  role="group"
+                  aria-labelledby={headingId}
+                >
+                  {renderMenuItems(group.items)}
+                </ul>
+              </React.Fragment>
+            );
+          })}
+        </div>
+      ) : (
+        section.columns.map((groups, columnIndex) => (
+          <div className={CLASS_CARD} key={`${section.id}-${columnIndex}`}>
+            {groups.map((group) => {
+              const headingId = `${idPrefix}-${section.id}-${group.id}-heading`;
+
+              return (
+                <React.Fragment key={group.id}>
+                  <p id={headingId} className={captionClass}>
+                    {group.heading}
+                  </p>
+                  <ul
+                    className={CLASS_SUBNAV}
+                    role="group"
+                    aria-labelledby={headingId}
+                  >
+                    {renderMenuItems(group.items)}
+                  </ul>
+                </React.Fragment>
+              );
+            })}
+          </div>
+        ))
+      )}
+    </div>
+  );
+};
+
+export const Megamenu = ({
+  className,
+  title = "Človek",
+  isSticky = true,
+  searchEmpty,
+  searchFilled,
+}: MegamenuProps) => {
+  const ids = getMegamenuIds("main");
+  const hasSearchEmpty = Boolean(searchEmpty);
+  const hasSearchFilled = Boolean(searchFilled);
+  const showSearchState = hasSearchEmpty || hasSearchFilled;
+  const searchValue = hasSearchEmpty ? "" : hasSearchFilled ? "apple" : "";
+
   return (
     <header>
       <nav
-        className={cx(CLASS_ROOT, className)}
+        className={cx(CLASS_ROOT, className, {
+          "is-sticky": isSticky,
+        })}
         data-megamenu
         aria-label="Main navigation"
       >
@@ -102,7 +202,7 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
 
               <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
 
-              <li className={CLASS_NAV_ITEM}>
+              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_LEAD)}>
                 <a href="#" className={CLASS_NAV_LINK}>
                   <MegamenuIcon
                     name="call"
@@ -114,6 +214,16 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                   Kontakt
                 </a>
               </li>
+              <li className={CLASS_NAV_ITEM}>
+                <a href="#" className={cx(CLASS_NAV_LINK, "is-active")}>
+                  SK
+                </a>
+              </li>
+              <li className={CLASS_NAV_ITEM}>
+                <a href="#" className={CLASS_NAV_LINK}>
+                  EN
+                </a>
+              </li>
             </ul>
           </div>
         </div>
@@ -125,7 +235,7 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                 <a
                   href="#"
                   className={CLASS_NAV_LOGO}
-                  aria-label="Domovská stránka"
+                  aria-label={`${title} - Domovská stránka`}
                 >
                   <svg
                     viewBox="0 0 40 40"
@@ -141,210 +251,38 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                   </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"
+              {menuSections.map((section) => (
+                <li
+                  key={section.id}
+                  className={cx(
+                    CLASS_NAV_ITEM,
+                    CLASS_NAV_ITEM_MAIN,
+                    CLASS_HIDE_MD_DOWN,
+                  )}
                 >
-                  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}>
-                        <p id="pausaly-heading" className={CLASS_TEXT_LARGE}>
-                          Internet
-                        </p>
-                        <ul
-                          className={CLASS_SUBNAV}
-                          role="group"
-                          aria-labelledby="pausaly-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="volania-s-kreditom-heading"
-                          className={CLASS_TEXT_LARGE}
-                        >
-                          Televízia
-                        </p>
-                        <ul
-                          className={CLASS_SUBNAV}
-                          role="group"
-                          aria-labelledby="volania-s-kreditom-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="zahranicie-heading" className={CLASS_TEXT_LARGE}>
-                          Internet + televízia
-                        </p>
-                        <ul
-                          className={CLASS_SUBNAV}
-                          role="group"
-                          aria-labelledby="zahranicie-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>
-                      </div>
-
-                      <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="nase-sluzby-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>
+                  <button
+                    type="button"
+                    className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
+                    aria-controls={`megamenu-${section.id}`}
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                  >
+                    {section.label}
+                  </button>
+                  <div
+                    className={CLASS_NAV_DROPDOWN}
+                    id={`megamenu-${section.id}`}
+                  >
+                    <div className={CLASS_CONTAINER}>
+                      {renderMenuSectionGrid(
+                        section,
+                        "megamenu",
+                        CLASS_CAPTION,
+                      )}
                     </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>
+              ))}
               <li
                 className={cx(
                   CLASS_NAV_ITEM,
@@ -375,7 +313,7 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                   type="button"
                   className={CLASS_NAV_BUTTON}
                   aria-label="Vyhľadávanie"
-                  aria-controls="megamenu-search"
+                  aria-controls={ids.searchDropdownId}
                   aria-expanded="false"
                   aria-haspopup="true"
                 >
@@ -387,54 +325,19 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                   />
                 </button>
 
-                <div className={CLASS_NAV_DROPDOWN} id="megamenu-search">
+                <div
+                  className={cx(CLASS_NAV_DROPDOWN, "is-spaced")}
+                  id={ids.searchDropdownId}
+                >
                   <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"}
+                    <MegamenuSearchContent
+                      inputId={ids.searchInputDesktopId}
+                      inputLabel="Vyhľadávanie v hlavnom menu"
+                      searchValue={searchValue}
+                      hasSearchEmpty={hasSearchEmpty}
+                      hasSearchFilled={hasSearchFilled}
+                      emptyStateLinkHref="/"
                     />
-                    {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>
@@ -443,7 +346,6 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                   href="#"
                   className={cx(CLASS_NAV_LINK)}
                   aria-label="Košík, 1 položka"
-                  aria-describedby="cart-count"
                 >
                   <span
                     className={CLASS_NAV_CART_ICON}
@@ -457,13 +359,18 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                       aria-hidden="true"
                     />
                   </span>
-                  <span id="cart-count" className="sr-only">
-                    1 položka v košíku
-                  </span>
+                  <span className="sr-only">1 položka v košíku</span>
                 </a>
               </li>
               <li className={CLASS_NAV_ITEM}>
-                <a href="#" className={CLASS_NAV_LINK}>
+                <button
+                  type="button"
+                  className={CLASS_NAV_BUTTON}
+                  data-megamenu-mobile-toggle
+                  data-megamenu-mobile-target="my-orange"
+                  aria-haspopup="dialog"
+                  aria-expanded="false"
+                >
                   <MegamenuIcon
                     width={24}
                     height={24}
@@ -472,14 +379,16 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                     aria-hidden="true"
                   />
                   Môj Orange
-                </a>
+                </button>
               </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"
+                  data-megamenu-mobile-toggle
+                  data-megamenu-mobile-target="main"
+                  aria-haspopup="dialog"
                   aria-expanded="false"
                 >
                   <MegamenuIcon
@@ -499,11 +408,14 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
         <div
           // className={cx(CLASS_MOBILE, "is-active")}
           className={cx(CLASS_MOBILE)}
+          data-megamenu-mobile-panel="main"
+          id={ids.mobileMainPanelId}
           role="dialog"
           aria-modal="true"
-          aria-labelledby="mobile-menu-title"
+          aria-labelledby={ids.mobileMainTitleId}
+          aria-hidden="true"
         >
-          <h2 id="mobile-menu-title" className="sr-only">
+          <h2 id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
           </h2>
           <button
@@ -537,6 +449,7 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                     <button
                       type="button"
                       data-megamenu-close-button
+                      data-megamenu-mobile-target="main"
                       className={CLASS_NAV_BUTTON}
                       aria-label="Zatvoriť menu"
                     >
@@ -553,356 +466,191 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
             </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"
+                <MegamenuSearchContent
+                  inputId={ids.searchInputMobileId}
+                  inputLabel="Vyhľadávanie v mobilnom menu"
+                  searchValue={searchValue}
+                  hasSearchEmpty={hasSearchEmpty}
+                  hasSearchFilled={hasSearchFilled}
                 />
-                <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"
-                    >
-                      <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>
+                {!showSearchState ? (
+                  <>
+                    <ul className={CLASS_ACCORDION}>
+                      {menuSections.map((section) => {
+                        const accordionId = `mobile-accordion-${section.id}`;
+                        const buttonId = `mobile-${section.id}-button`;
 
-                          <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,
-                                )}
+                        return (
+                          <li className={CLASS_ACCORDION_ITEM} key={section.id}>
+                            <div className={CLASS_ACCORDION_HEADER}>
+                              <button
+                                type="button"
+                                className={CLASS_ACCORDION_BUTTON}
+                                aria-controls={accordionId}
+                                aria-expanded="false"
+                                data-accordion-toggle
+                                id={buttonId}
                               >
-                                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>
+                                <span className={CLASS_ACCORDION_TITLE}>
+                                  {section.label}
+                                </span>
+                                <MegamenuIcon
+                                  name="chevron-right"
+                                  width={24}
+                                  height={24}
+                                  className={CLASS_ACCORDION_ICON}
+                                  aria-hidden="true"
+                                />
+                              </button>
+                            </div>
+                            <div
+                              className={CLASS_ACCORDION_BODY}
+                              id={accordionId}
+                              role="region"
+                              aria-labelledby={buttonId}
+                            >
+                              {renderMenuSectionGrid(
+                                section,
+                                "mobile",
+                                CLASS_CAPTION,
+                                true,
+                              )}
+                            </div>
+                          </li>
+                        );
+                      })}
 
-                          <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>
+                      <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>
-                      </div>
-                    </div>
-                  </li>
+                      </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}>
+                          <a href="#" className={CLASS_ACCORDION_BUTTON}>
+                            <span className={CLASS_ACCORDION_TITLE}>Pomoc</span>
+                          </a>
+                        </div>
+                      </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"
-                      >
-                        <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"
+                    <ul
+                      className={cx(
+                        CLASS_NAV,
+                        CLASS_NAV_SPACE_SMALL,
+                        CLASS_NAV_MOBILE_LOCALE,
+                      )}
+                      aria-label="Výber jazyka"
                     >
-                      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
-                        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 className={CLASS_NAV_ITEM}>
+                        <a
+                          href="#"
+                          className={cx(
+                            CLASS_NAV_LINK,
+                            CLASS_NAV_LINK_LOCALE,
+                            "is-active",
+                          )}
+                        >
+                          SK
+                        </a>
+                      </li>
+                      <li className={CLASS_NAV_ITEM}>
+                        <a
+                          href="#"
+                          className={cx(CLASS_NAV_LINK, CLASS_NAV_LINK_LOCALE)}
+                        >
+                          EN
+                        </a>
+                      </li>
+                    </ul>
+                  </>
+                ) : null}
               </div>
+
+              {!showSearchState ? (
+                <>
+                  <hr className="mt-none" />
+                  <div className={CLASS_CONTAINER}>
+                    <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}>
+                        <button
+                          type="button"
+                          className={CLASS_NAV_BUTTON}
+                          data-megamenu-mobile-toggle
+                          data-megamenu-mobile-target="my-orange"
+                          aria-haspopup="dialog"
+                          aria-expanded="false"
+                        >
+                          <MegamenuIcon
+                            width={24}
+                            height={24}
+                            name="user"
+                            className={CLASS_NAV_ICON}
+                            aria-hidden="true"
+                          />
+                          Môj Orange
+                        </button>
+                      </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>
+                </>
+              ) : null}
             </div>
           </div>
         </div>
 
+        <MyOrangeMobilePanel
+          panelId={ids.myOrangePanelId}
+          titleId={ids.myOrangeTitleId}
+        />
+
         <button
           aria-label="Zatvoriť dropdown menu"
           className={CLASS_OVERLAY}