@orangesk/orange-design-system 3.3.1 → 3.4.0

package/src/components/Megamenu/Megamenu.tsx

@@ -1,6 +1,5 @@
 import cx from "classnames";
 import React from "react";
-import { BrandMark } from "./BrandMark";
 import {
   CLASS_ACCORDION,
   CLASS_ACCORDION_BODY,
@@ -13,27 +12,29 @@ import {
   CLASS_CARD,
   CLASS_CONTAINER,
   CLASS_GRID,
+  CLASS_HIDE_LG_ONLY,
   CLASS_HIDE_LG_UP,
   CLASS_HIDE_MD_DOWN,
   CLASS_MAIN,
-  CLASS_MOBILE,
   CLASS_MOBILE_BODY,
+  CLASS_MOBILE_CTA,
   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_ICON_CTA,
   CLASS_NAV_ITEM,
   CLASS_NAV_ITEM_LEAD,
   CLASS_NAV_ITEM_MAIN,
   CLASS_NAV_LINK,
+  CLASS_NAV_LINK_CTA,
   CLASS_NAV_LINK_LOCALE,
-  CLASS_NAV_LOGO,
   CLASS_NAV_MOBILE_LOCALE,
+  CLASS_NAV_SELECT,
+  CLASS_NAV_SELECT_WRAPPER,
   CLASS_NAV_SPACE_SMALL,
   CLASS_NAV_SPACER,
   CLASS_NAV_VERTICAL,
@@ -46,22 +47,44 @@ import {
   CLASS_TAG_ORANGE,
   CLASS_TAG_SMALL,
   CLASS_TEXT_LARGE,
+  CLASS_TILE,
+  CLASS_TILE_BODY,
+  CLASS_TILE_CONTENT,
+  CLASS_TILE_LABEL,
+  CLASS_TILES,
   CLASS_TOP,
 } from "./constants";
-import { MenuItem, MenuSection, menuSections } from "./data";
+import {
+  MegamenuTile,
+  MenuItem,
+  MenuSection,
+  megamenuTiles,
+  menuSections,
+} from "./data";
 import { getMegamenuIds } from "./ids";
-import { Logo } from "./Logo";
 import { MegamenuIcon } from "./MegaMenuIcon";
 import { MegamenuSearchContent } from "./MegamenuSearchContent";
 import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
+import {
+  getMegamenuSearchState,
+  MegamenuCloseButton,
+  MegamenuLogoLink,
+  MegamenuMobilePanel,
+  MegamenuSearchDropdown,
+} from "./shared";
 
 export type MegamenuProps = {
   className?: string;
   title?: string;
-  isSticky?: boolean;
+  notSticky?: boolean;
   searchEmpty?: boolean;
   searchFilled?: boolean;
   compactLogoOnly?: boolean;
+  isB2B?: boolean;
+  /** Optional number of items displayed on the cart badge. */
+  cartItems?: number;
+  /** Tiles displayed below every desktop and mobile menu section. */
+  tiles?: MegamenuTile[];
 };
 
 const renderMenuItems = (items: MenuItem[]) => (
@@ -84,54 +107,71 @@ const renderMenuItems = (items: MenuItem[]) => (
   </>
 );
 
+const renderMenuTiles = (tiles: MegamenuTile[]) => (
+  <div className={CLASS_TILES} aria-label="Rýchly prístup">
+    {tiles.map((tile, index) => {
+      const isActive = tile.isActive ?? index === 0;
+
+      return (
+        <a
+          className={cx(CLASS_TILE, { "is-active": isActive })}
+          href={tile.href ?? "/"}
+          key={tile.label}
+        >
+          <div className={CLASS_TILE_BODY}>
+            <MegamenuIcon
+              name={tile.icon}
+              width={32}
+              height={32}
+              aria-hidden="true"
+            />
+            <span className={CLASS_TILE_CONTENT}>
+              <strong className={CLASS_TILE_LABEL}>{tile.label}</strong>
+              {tile.tag ? (
+                <span
+                  className={cx(CLASS_TAG, CLASS_TAG_ORANGE, CLASS_TAG_SMALL)}
+                >
+                  {tile.tag}
+                </span>
+              ) : null}
+            </span>
+          </div>
+        </a>
+      );
+    })}
+  </div>
+);
+
 const renderMenuSectionGrid = (
   section: MenuSection,
   idPrefix: string,
   captionClass: string,
   mergeColumnsToSingleCard = false,
+  tiles: MegamenuTile[] = megamenuTiles,
+  tilesBeforeGrid = 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 className={CLASS_GRID}>
+        {tilesBeforeGrid ? renderMenuTiles(tiles) : null}
+        <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>
-      ) : (
-        section.columns.map((groups, columnIndex) => (
-          <div className={CLASS_CARD} key={`${section.id}-${columnIndex}`}>
-            {groups.map((group) => {
+
+        {mergeColumnsToSingleCard ? (
+          <div className={CLASS_CARD}>
+            {section.columns.flat().map((group) => {
               const headingId = `${idPrefix}-${section.id}-${group.id}-heading`;
 
               return (
@@ -150,31 +190,57 @@ const renderMenuSectionGrid = (
               );
             })}
           </div>
-        ))
-      )}
-    </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>
+      {!tilesBeforeGrid ? renderMenuTiles(tiles) : null}
+    </>
   );
 };
 
 export const Megamenu = ({
   className,
   title = "Človek",
-  isSticky = true,
+  notSticky = false,
   searchEmpty,
   searchFilled,
   compactLogoOnly = false,
+  isB2B = false,
+  cartItems,
+  tiles = megamenuTiles,
 }: MegamenuProps) => {
   const ids = getMegamenuIds("main");
-  const hasSearchEmpty = Boolean(searchEmpty);
-  const hasSearchFilled = Boolean(searchFilled);
-  const showSearchState = hasSearchEmpty || hasSearchFilled;
-  const searchValue = hasSearchEmpty ? "" : hasSearchFilled ? "apple" : "";
+  const { hasSearchEmpty, hasSearchFilled, showSearchState, searchValue } =
+    getMegamenuSearchState(searchEmpty, searchFilled);
+  const hasCartItems = cartItems !== undefined;
 
   return (
     <header>
       <nav
         className={cx(CLASS_ROOT, className, {
-          "is-sticky": isSticky,
+          "non-sticky": notSticky,
         })}
         data-megamenu
         aria-label="Main navigation"
@@ -199,7 +265,12 @@ export const Megamenu = ({
               </li>
               <li className={CLASS_NAV_ITEM}>
                 <a href="/" className={CLASS_NAV_LINK}>
-                  Pre biznis
+                  Podnikatelia a malé firmy
+                </a>
+              </li>
+              <li className={CLASS_NAV_ITEM}>
+                <a href="/" className={CLASS_NAV_LINK}>
+                  Velké firmy
                 </a>
               </li>
 
@@ -235,13 +306,10 @@ export const Megamenu = ({
           <div className={CLASS_CONTAINER}>
             <ul className={CLASS_NAV} aria-label="Hlavné menu">
               <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
-                <a
-                  href="/"
-                  className={CLASS_NAV_LOGO}
-                  aria-label={`${title} - Domovská stránka`}
-                >
-                  {compactLogoOnly ? <Logo /> : <BrandMark />}
-                </a>
+                <MegamenuLogoLink
+                  compactLogoOnly={compactLogoOnly}
+                  title={title}
+                />
               </li>
               {menuSections.map((section) => (
                 <li
@@ -270,6 +338,8 @@ export const Megamenu = ({
                         section,
                         "megamenu",
                         CLASS_CAPTION,
+                        false,
+                        tiles,
                       )}
                     </div>
                   </div>
@@ -297,8 +367,29 @@ export const Megamenu = ({
                   Pomoc
                 </a>
               </li>
+              <li
+                className={cx(
+                  CLASS_NAV_ITEM,
+                  CLASS_NAV_ITEM_MAIN,
+                  CLASS_HIDE_MD_DOWN,
+                )}
+              >
+                <a href="/" className={CLASS_NAV_LINK_CTA}>
+                  <MegamenuIcon
+                    width={16}
+                    height={16}
+                    name="rewards"
+                    className={CLASS_NAV_ICON_CTA}
+                    aria-hidden="true"
+                  />
+                  Prejdite k nám
+                </a>
+              </li>
 
-              <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
+              <li
+                className={cx(CLASS_NAV_SPACER, CLASS_HIDE_LG_ONLY)}
+                aria-hidden="true"
+              ></li>
 
               <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
                 <button
@@ -317,41 +408,52 @@ export const Megamenu = ({
                   />
                 </button>
 
-                <div
-                  className={cx(CLASS_NAV_DROPDOWN, "is-spaced")}
-                  id={ids.searchDropdownId}
-                >
-                  <div className={CLASS_CONTAINER}>
-                    <MegamenuSearchContent
-                      inputId={ids.searchInputDesktopId}
-                      inputLabel="Vyhľadávanie v hlavnom menu"
-                      searchValue={searchValue}
-                      hasSearchEmpty={hasSearchEmpty}
-                      hasSearchFilled={hasSearchFilled}
-                      emptyStateLinkHref="/"
-                    />
-                  </div>
-                </div>
+                <MegamenuSearchDropdown
+                  dropdownId={ids.searchDropdownId}
+                  inputId={ids.searchInputDesktopId}
+                  inputLabel="Vyhľadávanie v hlavnom menu"
+                  searchValue={searchValue}
+                  hasSearchEmpty={hasSearchEmpty}
+                  hasSearchFilled={hasSearchFilled}
+                  emptyStateLinkHref="/"
+                />
               </li>
               <li className={cx(CLASS_NAV_ITEM)}>
                 <a
                   href="/"
                   className={cx(CLASS_NAV_LINK)}
-                  aria-label="Košík, 1 položka"
+                  aria-label={
+                    hasCartItems ? `Košík, ${cartItems} položka` : "Košík"
+                  }
                 >
-                  <span
-                    className={CLASS_NAV_CART_ICON}
-                    data-items-in-cart="1"
-                    aria-hidden="true"
-                  >
-                    <MegamenuIcon
-                      width={24}
-                      height={24}
-                      name="buy"
+                  {hasCartItems ? (
+                    <span
+                      className={CLASS_NAV_CART_ICON}
+                      data-items-in-cart={cartItems}
                       aria-hidden="true"
-                    />
-                  </span>
-                  <span className="sr-only">1 položka v košíku</span>
+                    >
+                      <MegamenuIcon
+                        width={24}
+                        height={24}
+                        name="buy"
+                        aria-hidden="true"
+                      />
+                    </span>
+                  ) : (
+                    <span className={CLASS_NAV_CART_ICON} aria-hidden="true">
+                      <MegamenuIcon
+                        width={24}
+                        height={24}
+                        name="buy"
+                        aria-hidden="true"
+                      />
+                    </span>
+                  )}
+                  {hasCartItems ? (
+                    <span className="sr-only">
+                      {cartItems} položka v košíku
+                    </span>
+                  ) : null}
                 </a>
               </li>
               <li className={CLASS_NAV_ITEM}>
@@ -397,250 +499,252 @@ export const Megamenu = ({
 
         {/* MOBILE MENU */}
 
-        <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={ids.mobileMainTitleId}
-          aria-hidden="true"
+        <MegamenuMobilePanel
+          panelId={ids.mobileMainPanelId}
+          titleId={ids.mobileMainTitleId}
+          target="main"
+          title="Hlavné menu"
+          overlayAriaLabel="Zatvoriť menu"
         >
-          <span id={ids.mobileMainTitleId} className="sr-only">
-            Hlavné menu
-          </span>
-          <button
-            aria-label="Zatvoriť menu"
-            className={CLASS_MOBILE_OVERLAY}
-            type="button"
-          />
-
-          <div className={CLASS_MOBILE_WRAPPER}>
-            <div className={CLASS_MOBILE_HEADER}>
-              <div className={CLASS_CONTAINER}>
-                <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
-                  <li className={CLASS_NAV_ITEM}>
-                    <a
-                      href="/"
-                      className={cx(CLASS_NAV_LINK, "is-active")}
-                      aria-current="page"
+          <div className={CLASS_MOBILE_HEADER}>
+            <div className={CLASS_CONTAINER}>
+              <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
+                <li className={CLASS_NAV_ITEM}>
+                  <div
+                    className={cx(
+                      CLASS_NAV_BUTTON,
+                      CLASS_NAV_BUTTON_INDICATOR,
+                      CLASS_NAV_SELECT_WRAPPER,
+                    )}
+                  >
+                    <select
+                      className={CLASS_NAV_SELECT}
+                      defaultValue="/"
+                      aria-label="Vyberte typ zákazníka"
                     >
-                      Pre vás
-                    </a>
-                  </li>
-                  <li className={CLASS_NAV_ITEM}>
-                    <a href="/" className={CLASS_NAV_LINK}>
-                      Pre biznis
-                    </a>
-                  </li>
+                      <option value="/">Pre vás</option>
+                      <option value="/">Podnikatelia a malé firmy</option>
+                      <option value="/">Velké firmy</option>
+                    </select>
+                  </div>
+                </li>
 
-                  <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
+                <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
 
-                  <li className={CLASS_NAV_ITEM}>
-                    <button
-                      type="button"
-                      data-megamenu-close-button
-                      data-megamenu-mobile-target="main"
-                      className={CLASS_NAV_BUTTON}
-                      aria-label="Zatvoriť menu"
-                    >
-                      <MegamenuIcon
-                        name="close"
-                        width={20}
-                        height={20}
-                        aria-hidden="true"
-                      />
-                    </button>
-                  </li>
-                </ul>
-              </div>
+                <li className={CLASS_NAV_ITEM}>
+                  <MegamenuCloseButton
+                    ariaLabel="Zatvoriť menu"
+                    target="main"
+                  />
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className={CLASS_MOBILE_BODY}>
+            <div className={CLASS_CONTAINER}>
+              <MegamenuSearchContent
+                inputId={ids.searchInputMobileId}
+                inputLabel="Vyhľadávanie v mobilnom menu"
+                searchValue={searchValue}
+                hasSearchEmpty={hasSearchEmpty}
+                hasSearchFilled={hasSearchFilled}
+              />
             </div>
-            <div className={CLASS_MOBILE_BODY}>
-              <div className={CLASS_CONTAINER}>
-                <MegamenuSearchContent
-                  inputId={ids.searchInputMobileId}
-                  inputLabel="Vyhľadávanie v mobilnom menu"
-                  searchValue={searchValue}
-                  hasSearchEmpty={hasSearchEmpty}
-                  hasSearchFilled={hasSearchFilled}
-                />
 
-                {!showSearchState ? (
-                  <>
-                    <ul className={CLASS_ACCORDION}>
-                      {menuSections.map((section) => {
-                        const accordionId = `mobile-accordion-${section.id}`;
-                        const buttonId = `mobile-${section.id}-button`;
+            <div className={CLASS_CONTAINER}>
+              {!showSearchState ? (
+                <>
+                  <ul className={CLASS_ACCORDION}>
+                    {menuSections.map((section) => {
+                      const accordionId = `mobile-accordion-${section.id}`;
+                      const buttonId = `mobile-${section.id}-button`;
 
-                        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}
+                      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}
                             >
-                              {renderMenuSectionGrid(
-                                section,
-                                "mobile",
-                                CLASS_CAPTION,
-                                true,
-                              )}
-                            </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>
+                              <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,
+                              tiles,
+                              true,
+                            )}
+                          </div>
+                        </li>
+                      );
+                    })}
 
-                    <ul
-                      className={cx(
-                        CLASS_NAV,
-                        CLASS_NAV_SPACE_SMALL,
-                        CLASS_NAV_MOBILE_LOCALE,
-                      )}
-                      aria-label="Výber jazyka"
-                    >
-                      <li className={CLASS_NAV_ITEM}>
-                        <a
-                          href="/"
-                          className={cx(
-                            CLASS_NAV_LINK,
-                            CLASS_NAV_LINK_LOCALE,
-                            "is-active",
-                          )}
-                        >
-                          SK
+                    <li className={CLASS_ACCORDION_ITEM}>
+                      <div className={CLASS_ACCORDION_HEADER}>
+                        <a href="/" className={CLASS_ACCORDION_BUTTON}>
+                          <span className={CLASS_ACCORDION_TITLE}>Akcie</span>
                         </a>
-                      </li>
-                      <li className={CLASS_NAV_ITEM}>
-                        <a
-                          href="/"
-                          className={cx(CLASS_NAV_LINK, CLASS_NAV_LINK_LOCALE)}
-                        >
-                          EN
-                        </a>
-                      </li>
-                    </ul>
-                  </>
-                ) : null}
-              </div>
+                      </div>
+                    </li>
 
-              {!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
+                    <li className={CLASS_ACCORDION_ITEM}>
+                      <div className={CLASS_ACCORDION_HEADER}>
+                        <a href="/" className={CLASS_ACCORDION_BUTTON}>
+                          <span className={CLASS_ACCORDION_TITLE}>Pomoc</span>
                         </a>
-                      </li>
-                      <li className={CLASS_NAV_ITEM}>
-                        <a href="/" className={CLASS_NAV_BUTTON}>
-                          <MegamenuIcon
-                            width={24}
-                            height={24}
-                            name="newspaper"
-                            className={CLASS_NAV_ICON}
-                            aria-hidden="true"
-                          />
-                          Pomoc
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
+                      </div>
+                    </li>
+                  </ul>
                 </>
               ) : null}
             </div>
+
+            {!showSearchState ? (
+              <>
+                <div className={CLASS_CONTAINER}>
+                  <div className={CLASS_MOBILE_CTA}>
+                    <a href="/" className={CLASS_NAV_LINK_CTA}>
+                      <MegamenuIcon
+                        width={16}
+                        height={16}
+                        name="rewards"
+                        className={CLASS_NAV_ICON_CTA}
+                        aria-hidden="true"
+                      />
+                      Prejdite k nám
+                    </a>
+                  </div>
+                </div>
+
+                <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>
+
+                <div className={CLASS_CONTAINER}>
+                  <ul
+                    className={cx(
+                      CLASS_NAV,
+                      CLASS_NAV_SPACE_SMALL,
+                      CLASS_NAV_MOBILE_LOCALE,
+                    )}
+                    aria-label="Výber jazyka"
+                  >
+                    <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>
+                </div>
+              </>
+            ) : null}
           </div>
-        </div>
+        </MegamenuMobilePanel>
 
         <MyOrangeMobilePanel
           panelId={ids.myOrangePanelId}
           titleId={ids.myOrangeTitleId}
+          isB2B={isB2B}
         />
 
         <button