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

task-2800937

Author: edi-odoo

extensions/odoo_theme/layout.html

@@ -65,21 +65,16 @@
     <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>
+            <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" hidden>
+        <div id="o_main_toctree" class="o_main_toc mt-3" hidden>
             {%- include "layout_templates/menu.html" %}
         </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>

extensions/odoo_theme/static/scss/_variables.scss

@@ -231,9 +231,13 @@ $doc_cyan:                                  $color-alpha;
 
 // Header
 $o-header-mobile-height:                    50px;
-$o-header-height:                           90px;
+$o-header-height:                           80px;
 $o-header-white:                            #ffffff;
 
+$o-subheader-height:                        calc(#{$o-header-height}/2.5);
+
+$o-headers-mobile-height:                   calc(#{$o-header-mobile-height} + (#{$o-subheader-height}));
+$o-headers-height:                          calc(#{$o-header-height} + #{$o-subheader-height});
 // Navigation
 $o-side-nav-width:                          350px;
 $o-on-page-width:                           20%;