@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/Megamenu/Megamenu.tsx

@@ -1,54 +1,181 @@
 import cx from "classnames";
-
-import { MegamenuIcon } from "./MegaMenuIcon";
+import React from "react";
+import { BrandMark } from "./BrandMark";
 import {
+  CLASS_ACCORDION,
+  CLASS_ACCORDION_BODY,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_HEADER,
+  CLASS_ACCORDION_ICON,
+  CLASS_ACCORDION_ITEM,
+  CLASS_ACCORDION_TITLE,
+  CLASS_CAPTION,
+  CLASS_CARD,
   CLASS_CONTAINER,
   CLASS_GRID,
-  CLASS_HIDE_MD_DOWN,
   CLASS_HIDE_LG_UP,
+  CLASS_HIDE_MD_DOWN,
   CLASS_MAIN,
+  CLASS_MOBILE,
+  CLASS_MOBILE_BODY,
+  CLASS_MOBILE_HEADER,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_MOBILE_WRAPPER,
   CLASS_NAV,
   CLASS_NAV_BUTTON,
   CLASS_NAV_BUTTON_INDICATOR,
+  CLASS_NAV_CART_ICON,
   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_LOGO,
+  CLASS_NAV_MOBILE_LOCALE,
+  CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
+  CLASS_NAV_VERTICAL,
+  CLASS_OVERLAY,
   CLASS_ROOT,
+  CLASS_SPACER,
   CLASS_SUBNAV,
   CLASS_SUBNAV_ITEM,
+  CLASS_TAG,
+  CLASS_TAG_ORANGE,
+  CLASS_TAG_SMALL,
   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";
+import { MenuItem, MenuSection, menuSections } from "./data";
+import { getMegamenuIds } from "./ids";
+import { Logo } from "./Logo";
+import { MegamenuIcon } from "./MegaMenuIcon";
+import { MegamenuSearchContent } from "./MegamenuSearchContent";
+import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
+
+export type MegamenuProps = {
+  className?: string;
+  title?: string;
+  isSticky?: boolean;
+  searchEmpty?: boolean;
+  searchFilled?: boolean;
+  compactLogoOnly?: boolean;
+};
+
+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,
+  compactLogoOnly = false,
+}: MegamenuProps) => {
+  const ids = getMegamenuIds("main");
+  const hasSearchEmpty = Boolean(searchEmpty);
+  const hasSearchFilled = Boolean(searchFilled);
+  const showSearchState = hasSearchEmpty || hasSearchFilled;
+  const searchValue = hasSearchEmpty ? "" : hasSearchFilled ? "apple" : "";
 
-export const Megamenu = ({ className }: any) => {
   return (
     <header>
       <nav
-        className={cx(CLASS_ROOT, className)}
+        className={cx(CLASS_ROOT, className, {
+          "is-sticky": isSticky,
+        })}
         data-megamenu
         aria-label="Main navigation"
       >
@@ -57,16 +184,13 @@ export const Megamenu = ({ className }: any) => {
           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"
+              aria-label="Top menu"
             >
               <li className={CLASS_NAV_ITEM}>
                 <a
-                  href="#"
+                  href="/"
                   className={cx(CLASS_NAV_LINK, "is-active")}
                   aria-current="page"
                 >
@@ -74,15 +198,15 @@ export const Megamenu = ({ className }: any) => {
                 </a>
               </li>
               <li className={CLASS_NAV_ITEM}>
-                <a href="#" className={CLASS_NAV_LINK}>
+                <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}>
+              <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_LEAD)}>
+                <a href="/" className={CLASS_NAV_LINK}>
                   <MegamenuIcon
                     name="call"
                     width={20}
@@ -93,182 +217,64 @@ export const Megamenu = ({ className }: any) => {
                   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>
 
         <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">
+            <ul className={CLASS_NAV} aria-label="Hlavné menu">
               <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
                 <a
-                  href="#"
+                  href="/"
                   className={CLASS_NAV_LOGO}
-                  aria-label="Domovská stránka"
+                  aria-label={`${title} - 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>
+                  {compactLogoOnly ? <Logo /> : <BrandMark />}
                 </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}>
-                        <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>
-
-                        <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>
+                  <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>
+              ))}
               <li
                 className={cx(
                   CLASS_NAV_ITEM,
@@ -276,50 +282,7 @@ export const Megamenu = ({ className }: any) => {
                   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)}>
+                <a href="/" className={cx(CLASS_NAV_LINK)}>
                   Akcie
                 </a>
               </li>
@@ -330,7 +293,7 @@ export const Megamenu = ({ className }: any) => {
                   CLASS_HIDE_MD_DOWN,
                 )}
               >
-                <a href="#" className={cx(CLASS_NAV_LINK)}>
+                <a href="/" className={cx(CLASS_NAV_LINK)}>
                   Pomoc
                 </a>
               </li>
@@ -342,7 +305,7 @@ export const Megamenu = ({ className }: any) => {
                   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"
                 >
@@ -354,47 +317,27 @@ export const Megamenu = ({ className }: any) => {
                   />
                 </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="search-1"
-                      type="text"
-                      placeholder="Search"
-                      name="search-1"
+                    <MegamenuSearchContent
+                      inputId={ids.searchInputDesktopId}
+                      inputLabel="Vyhľadávanie v hlavnom menu"
+                      searchValue={searchValue}
+                      hasSearchEmpty={hasSearchEmpty}
+                      hasSearchFilled={hasSearchFilled}
+                      emptyStateLinkHref="/"
                     />
-                    <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="#"
+                  href="/"
                   className={cx(CLASS_NAV_LINK)}
                   aria-label="Košík, 1 položka"
-                  aria-describedby="cart-count"
                 >
                   <span
                     className={CLASS_NAV_CART_ICON}
@@ -408,13 +351,18 @@ export const Megamenu = ({ className }: any) => {
                       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}
@@ -423,14 +371,16 @@ export const Megamenu = ({ className }: any) => {
                     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
@@ -450,13 +400,16 @@ export const Megamenu = ({ className }: any) => {
         <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">
+          <span id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
-          </h2>
+          </span>
           <button
             aria-label="Zatvoriť menu"
             className={CLASS_MOBILE_OVERLAY}
@@ -469,7 +422,7 @@ export const Megamenu = ({ className }: any) => {
                 <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
                   <li className={CLASS_NAV_ITEM}>
                     <a
-                      href="#"
+                      href="/"
                       className={cx(CLASS_NAV_LINK, "is-active")}
                       aria-current="page"
                     >
@@ -477,7 +430,7 @@ export const Megamenu = ({ className }: any) => {
                     </a>
                   </li>
                   <li className={CLASS_NAV_ITEM}>
-                    <a href="#" className={CLASS_NAV_LINK}>
+                    <a href="/" className={CLASS_NAV_LINK}>
                       Pre biznis
                     </a>
                   </li>
@@ -488,6 +441,7 @@ export const Megamenu = ({ className }: any) => {
                     <button
                       type="button"
                       data-megamenu-close-button
+                      data-megamenu-mobile-target="main"
                       className={CLASS_NAV_BUTTON}
                       aria-label="Zatvoriť menu"
                     >
@@ -504,331 +458,191 @@ export const Megamenu = ({ className }: any) => {
             </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"
+                <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>
-                          <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>
+                {!showSearchState ? (
+                  <>
+                    <ul className={CLASS_ACCORDION}>
+                      {menuSections.map((section) => {
+                        const accordionId = `mobile-accordion-${section.id}`;
+                        const buttonId = `mobile-${section.id}-button`;
 
-                          <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>
+                        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}
+                              >
+                                <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>
+                        );
+                      })}
 
-                          <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>
+                      <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>
 
-                          <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>
+                      <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>
-                      </div>
-                    </div>
-                  </li>
+                      </li>
+                    </ul>
 
-                  <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"
+                    <ul
+                      className={cx(
+                        CLASS_NAV,
+                        CLASS_NAV_SPACE_SMALL,
+                        CLASS_NAV_MOBILE_LOCALE,
+                      )}
+                      aria-label="Výber jazyka"
                     >
-                      CONTENT
-                    </div>
-                  </li>
+                      <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>
 
-                  <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"
+              {!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"
                     >
-                      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>
-              </div>
+                      <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}