fix: Tabs list in desktop (#1526)

* fix: resolve issue with hamburgermenu hiding the tabs list in desktop view

* fix: tabs were getting hidden in desktop view

* fix: tabs were getting hidden in desktop view and removed unused code

* feat(hamburgerMenu): test case added

* feat(hamburgerMenu): test case added and html on server side

* fix: tabs were getting hidden in desktop view

* feat(hamburgerMenu): test case added

---------

Co-authored-by: Rajat Khurana <rajatkhurana@adobe.com>

Author: rajatofficial

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/README.md

@@ -92,3 +92,5 @@ Applying `data-cmp-custom-functions-module-url` attribute to the div to point to
 This Url should whitelist the AEM author/publish domain in the Cross Origin Resource Sharing (CORS) configuration.
 
 Applying `data-cmp-auto-save` attribute to the `cmp-adaptiveform-container` block to control the auto-save functionality. If the attribute's value is set to true, auto-save will be enabled for the form; otherwise, it will not be triggered. This attribute will be set to true in published mode if enableAutoSave is enabled.
+
+Applying `data-cmp-hamburger-menu-enabled` attribute to the `cmp-adaptiveform-container` block to control the hamburger meu. If the attribute's value is set to true, hamburger menu will be enabled in the mobile view.

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js/hamburgerMenu.js

@@ -334,27 +334,6 @@ if (typeof window.HamburgerMenu === 'undefined') {
             return ul;
         }
 
-        #hideIndividualComponentsNavigation() {
-            // hide all the horizontal tabs list
-            const tabsLists = document.getElementsByClassName('cmp-tabs__tablist');
-            Array.from(tabsLists).forEach(tabsList => {
-                tabsList.style.display = 'none';
-            });
-    
-            // hide all the vertical tabs list
-            const verticalTabsLists = document.getElementsByClassName('cmp-verticaltabs__tablist');
-            Array.from(verticalTabsLists).forEach(tabsList => {
-                tabsList.style.display = 'none';
-            });
-            // hide all the wizard tabs list
-            const wizardTabsLists = document.getElementsByClassName('cmp-adaptiveform-wizard__tabList');
-            const wizardTabsNavButton = document.querySelector('.cmp-adaptiveform-wizard__containerNav');
-            if(wizardTabsNavButton) wizardTabsNavButton.style.display = 'none';
-            Array.from(wizardTabsLists).forEach(tabsList => {
-                tabsList.style.display = 'none';
-            });
-        }
-    
         // Function to find the currently active li
         #findActiveLi() {
             return document.querySelector(HamburgerMenu.selectors.active).parentElement;
@@ -492,8 +471,6 @@ if (typeof window.HamburgerMenu === 'undefined') {
 
                 this.#attachHamburgerEventListeners(hamburgerIcon, menu);
                 this.#attachOutsideClickHandler(hamburgerIcon, menu);
-    
-                this.#hideIndividualComponentsNavigation();
                 this.#attachMenuEventListeners(menu);
                 this.#styleSubmenuItems(menu);
                 parentContainer.innerHTML='';
@@ -566,6 +543,7 @@ if (typeof window.HamburgerMenu === 'undefined') {
 
         init() {
             if(this.formContainer?.getModel()?.properties?.['fd:isHamburgerMenuEnabled']) {
+                document.querySelector('.cmp-adaptiveform-container')?.setAttribute('data-cmp-hamburger-menu-enabled', 'true');
                 const panels = this.#getAllPanels();
                 this.#renderHamburgerItems(panels);
             }

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/container.html

@@ -41,6 +41,7 @@
       data-cmp-context-path="${request.contextPath}"
       data-cmp-page-lang="${container.containingPageLang}"
       data-cmp-path="${resource.path}"
+      data-cmp-hamburger-menu-enabled="${container.isHamburgerMenuEnabled ? 'true' : 'false'}"
       class="cmp-adaptiveform-container cmp-container ${wcmmode.edit ? 'cmp-adaptiveform-container--edit' : ''}"
       data-cmp-custom-functions-module-url="${configurationProvider.customFunctionModuleUrl}"
       dir="${container.languageDirection}"

ui.tests/test-module/specs/formContainer/formContainer.runtime.cy.js

@@ -43,6 +43,12 @@ describe("Form Runtime with Hamburger Menu", () => {
         cy.get(selectors.hamburgerMenuWidget.hamburgerMenu).should("be.visible");
     })
 
+    it(`Test data-cmp-hamburger-menu-enabled attribute when hamburger menu is enabled`, () => {
+        cy.viewport('iphone-x');
+        cy.get('form')
+            .should('have.attr', 'data-cmp-hamburger-menu-enabled', 'true');
+    })
+
     it(`Test hamburger menu should render exact number of items`, () => {
         cy.viewport('iphone-x');
         cy.get(selectors.hamburgerMenuTopContainer.hamburgerMenuIcon).click();