[IMP] odoo_theme: show the "On this page" section in mobile

When the page gets too small for the "On this page" section (local tree
of content) to fit on the page, the section is now moved above the menu
(global tree of content) rather than being hidden.

task-2800970

closes odoo/documentation#2201

X-original-commit: c0040fa532
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
Co-authored-by: Antoine Vandevenne (anv) <anv@odoo.com>

extensions/odoo_theme/static/js/menu.js

@@ -2,17 +2,17 @@
 (function ($) {
 
     document.addEventListener('DOMContentLoaded', () => {
-        this.navigationMenu = document.getElementById('o_main_toctree');
+        const navigationMenu = document.getElementById('o_main_toctree');
 
         // Allow to automatically collapse and expand TOC entries
-        _prepareAccordion(this.navigationMenu);
+        _prepareAccordion(navigationMenu);
 
         // Allow to respectively highlight and expand the TOC entries and their related TOC
         // entry list whose page is displayed.
-        _flagActiveTocEntriesAndLists();
+        _flagActiveTocEntriesAndLists(navigationMenu);
 
         // Show hidden menu when the css classes have been properly specified
-        this.navigationMenu.removeAttribute('hidden');
+        navigationMenu.removeAttribute('hidden');
     });
 
     /**
@@ -23,13 +23,15 @@
      * 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.
      */
-    const _flagActiveTocEntriesAndLists = () => {
+    const _flagActiveTocEntriesAndLists = navigationMenu => {
         const regexLayer = /\btoctree-l(?<layer>\d+)\b/;
         let lastLayer = undefined;
         let lastTocEntry = undefined;
         const deepestTocEntries = [];
-        this.navigationMenu.querySelectorAll('.current').forEach(element => {
+        navigationMenu.querySelectorAll('.current').forEach(element => {
             if (element.tagName === 'UL') {
                 element.classList.add('show'); // Expand all related <ul>
             } else if (element.tagName === 'LI') {