[FW][MERGE] odoo_theme: revamp header and menu for better mobile support

conf.py

@@ -194,14 +194,14 @@
 # The language names that should be shown in the language switcher, if the config option `languages`
 # is populated. If a language is passed to `languages` but is not listed here, it will not be shown.
 languages_names = {
-    'de': 'Deutsch',
-    'en': 'English',
-    'es': 'Español',
-    'fr': 'Français',
-    'nl': 'Nederlands',
-    'pt_BR': 'Português (BR)',
-    'uk': 'українська',
-    'zh_CN': '简体中文',
+    'de': 'DE',
+    'en': 'EN',
+    'es': 'ES',
+    'fr': 'FR',
+    'nl': 'NL',
+    'pt_BR': 'PT',
+    'uk': 'UA',
+    'zh_CN': 'ZH',
 }
 
 # The specifications of redirect rules used by the redirects extension.

extensions/odoo_theme/layout.html

@@ -62,24 +62,22 @@
         </nav>
     </noscript>
     {# Shown when the JS has properly set all the classes on the TOC elements #}
-    <nav id="o_menu" class="o_side_nav border-end">
-        {%- if 'hide-page-toc' not in meta %}
-            {# Shown when the JS has properly set all the classes on the TOC elements #}
-            <aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pb-3 mb-4" hidden>
-                {%- include "layout_templates/page_toc.html" %}
-            </aside>
-        {%- endif %}
-        <div id="o_main_toctree" class="o_main_toc" hidden>
-            {%- include "layout_templates/menu.html" %}
+    <nav id="o_menu" class="o_side_nav">
+        <div class="o_mobile-overlay" data-bs-toggle="collapse" data-bs-target="#o_menu"></div>
+        <div class="o_side_nav-inner border-end">
+            {%- if 'hide-page-toc' not in meta %}
+                {# Shown when the JS has properly set all the classes on the TOC elements #}
+                <aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pt-3 pb-3" hidden>
+                    {%- include "layout_templates/page_toc.html" %}
+                </aside>
+            {%- endif %}
+            <div id="o_main_toctree" class="o_main_toc mt-3" hidden>
+                {%- include "layout_templates/menu.html" %}
+            </div>
         </div>
     </nav>
-    <header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
+    <header class="o_headers">
         {%- include "layout_templates/header.html" %}
-        <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-        </button>
     </header>
 {%- endblock %}
 

extensions/odoo_theme/layout_templates/header.html

@@ -1,12 +1,23 @@
-<div class="o_logo_wrapper">
+<div class="o_main_header border-bottom d-flex align-items-center">
+    <div class="o_logo_wrapper">
       <a href="{{ pathto(master_doc) }}" class="o_logo">
           <img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="20" alt="Odoo"/>
           <span>docs</span>
       </a>
+    </div>
+    <div class="d-flex flex-grow-1">
+        {%- include "layout_templates/searchbox.html" %}
+        <a class="btn btn-primary fw_semibold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
+    </div>
 </div>
-{%- include "layout_templates/searchbox.html" %}
-<div class="d-none d-lg-flex ms-auto">
-    {%- include "layout_templates/language_switcher.html" %}
-    {%- include "layout_templates/version_switcher.html" %}
-    <a class="btn btn-primary fw_semibold" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
+<div class="o_subheader border-bottom d-flex">
+    <div class="o_side_nav_toggler_wrapper border-end d-flex d-lg-none">
+        <button class="h-100 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
+            <i class="i-sidepanel"></i>
+        </button>
+    </div>
+    <div class="d-flex justify-content-end ms-auto">
+        {%- include "layout_templates/language_switcher.html" %}
+        {%- include "layout_templates/version_switcher.html" %}
+    </div>
 </div>

extensions/odoo_theme/layout_templates/language_switcher.html

@@ -1,13 +1,13 @@
-<div class="o_languages me-3">
+<div class="o_languages">
 	<div class="dropdown">
         {%- if alternate_languages|length > 0 %}
-            <button class="btn border dropdown-toggle"
+            <button class="btn btn-sm dropdown-toggle"
                     id="languages"
                     data-bs-toggle="dropdown">
                 {{ language }} {# The current language #}
             </button>
         {%- else %}
-            <button class="btn border dropdown-toggle"
+            <button class="btn btn-sm dropdown-toggle"
                     id="languages"
                     disabled="">
                 {{ language }} {# The current language #}

extensions/odoo_theme/layout_templates/searchbox.html

@@ -1,5 +1,5 @@
 {# NOTE: the 'searchbox' id is used to hook the "Hide Search Matches" button #}
-<div id="searchbox" class="o_search_wrapper pe-lg-2" role="search">
+<div id="searchbox" class="o_search_wrapper d-flex flex-grow-1" role="search">
     <form class="o_search" action="{{ pathto('search') }}" method="get">
         <input type="text" name="q" id="q" class="form-control rounded-pill" placeholder="What are you looking for?">
         <input type="hidden" name="area" value="default">

extensions/odoo_theme/layout_templates/version_switcher.html

@@ -1,27 +1,22 @@
-<div class="o_versions row gx-2 me-3">
-	<div class="col align-self-center">
-    	<label class="fw_bold small ms-2">Version</label>
-    </div>
-    <div class="col">
-        <div class="dropdown">
-            {%- if alternate_versions|length > 0 %}
-                <button class="btn border dropdown-toggle"
-                        id="versions"
-                        data-bs-toggle="dropdown">
-                    {{ version_display_name }} {# The current version #}
-                </button>
-            {%- else %}
-                <button class="btn border dropdown-toggle"
-                        id="versions"
-                        disabled="">
-                    {{ version_display_name }} {# The current version #}
-                </button>
-            {%- endif %}
-            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
-                {%- for alternate_version, url in alternate_versions %}
-                    <li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
-                {%- endfor %}
-            </ul>
-        </div>
+<div class="o_versions row">
+    <div class="dropdown">
+        {%- if alternate_versions|length > 0 %}
+            <button class="btn btn-sm dropdown-toggle"
+                    id="versions"
+                    data-bs-toggle="dropdown">
+                {{ version_display_name }} {# The current version #}
+            </button>
+        {%- else %}
+            <button class="btn btn-sm dropdown-toggle"
+                    id="versions"
+                    disabled="">
+                {{ version_display_name }} {# The current version #}
+            </button>
+        {%- endif %}
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
+            {%- for alternate_version, url in alternate_versions %}
+                <li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
+            {%- endfor %}
+        </ul>
     </div>
 </div>