From 520cd5fb9e6483f59159bfab2a3fcc9b48e24fff Mon Sep 17 00:00:00 2001
From: "Antoine Vandevenne (anv)" <anv@odoo.com>
Date: Wed, 21 Dec 2022 12:26:17 +0000
Subject: [PATCH] [IMP] odoo_theme: expand top level menu items on the homepage

When the user browses the homepage, it might be hard to figure out
where they want to go next. Expanding the top-level menu items could
help them with that.

task-3106339

X-original-commit: 5526f1ea07637660bb5045ab8c5ced33e6ae2337
Part-of: odoo/documentation#3239
---
 extensions/odoo_theme/static/js/menu.js | 28 +++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/extensions/odoo_theme/static/js/menu.js b/extensions/odoo_theme/static/js/menu.js
index ac79da21e..fa6af0b59 100644
--- a/extensions/odoo_theme/static/js/menu.js
+++ b/extensions/odoo_theme/static/js/menu.js
@@ -7,10 +7,13 @@
         // Allow to automatically collapse and expand TOC entries
         _prepareAccordion(navigationMenu);
 
-        // Allow to respectively highlight and expand the TOC entries and their related TOC
-        // entry list whose page is displayed.
+        // Allow to respectively highlight and expand the TOC entries and their related TOC entry
+        // list whose page is displayed.
         _flagActiveTocEntriesAndLists(navigationMenu);
 
+        // Expand the top-level menu items on the homepage.
+        _expandTopMenus(navigationMenu);
+
         // Show hidden menu when the css classes have been properly specified
         navigationMenu.removeAttribute('hidden');
     });
@@ -20,9 +23,9 @@
      *
      * TOC entries (<li> elements) that are on the path of the displayed page receive the
      * `o_active_toc_entry` class, and their related (parent) TOC entry list (<ul> elements) receive
-     * the `show` (Bootstrap) class.
-     * Also, the deepest TOC entries of their respective branch receive the
-     * `o_deepest_active_toc_entry` class, and their child TOC entry lists receive the `show` class.
+     * the `show` (Bootstrap) class. Also, the deepest TOC entries of their respective branch
+     * receive the `o_deepest_active_toc_entry` class, and their child TOC entry lists receive the
+     * `show` class.
      *
      * @param {HTMLElement} navigationMenu - The navigation menu.
      */
@@ -44,7 +47,7 @@
                 lastLayer = currentLayer;
                 lastTocEntry = element;
             }
-        })
+        });
         if (lastTocEntry) {
             deepestTocEntries.push(lastTocEntry); // The last TOC entry is the deepest of its branch
         }
@@ -59,6 +62,19 @@
         });
     };
 
+    /**
+     * Add the `show` class on top-level menus if the user is browsing the homepage.
+     *
+     * @param {HTMLElement} navigationMenu - The navigation menu.
+     */
+    const _expandTopMenus = navigationMenu => {
+        navigationMenu.querySelectorAll('.toctree-l1').forEach(element => {
+            if (!element.parentElement.classList.contains('current')) { // For the homepage only.
+                element.querySelector('ul').classList.add('show'); // Expand the top-level menus.
+            }
+        });
+    };
+
      document.addEventListener('scroll', () => {
          // Allow to hide the searchbar when the page is scrolled in mobile.
          _flagHeaderWithScrollPosition();