[IMP] odoo_theme: add subheader and adapt switchers and searchbar

task-2800937

X-original-commit: 411e1cb1d3

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>