From 5887847105b428e455edad6464dcaeff0bf859fc Mon Sep 17 00:00:00 2001
From: mano-odoo <mano@odoo.com>
Date: Mon, 11 Dec 2023 10:44:20 +0000
Subject: [PATCH] [FIX] website_blog: navigation filters dropdown on mobile

The blogs filters in mobile is breaking the layout. This commit applies
a dropdown or an offcanvas instead which is displayed next to searchbar.

In this 17.0 fix, the dropdown becomes an
offcanvas if we have a sufficient amount of blogs which allows better
navigation on mobile and makes it consistent with other website modules.

Additionally it adapts the spacing to make it even between the
navigation component.

The `t-set="_classes"` is not removed in case of potential xpath in
production. Same goes for the `container` class on the div at line 9,
being overridden by it's t-attf-class counterpart.

task-3315921

closes odoo/odoo#157757

X-original-commit: 19f34c5e0973903b47cf6a5c65cc8888986abaa8
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
 .../views/website_blog_components.xml         | 68 +++++++++++++++++--
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/addons/website_blog/views/website_blog_components.xml b/addons/website_blog/views/website_blog_components.xml
index 085323a82bc..2d3d787d42d 100644
--- a/addons/website_blog/views/website_blog_components.xml
+++ b/addons/website_blog/views/website_blog_components.xml
@@ -5,9 +5,10 @@
 <!-- ======   Template: Blogs Navbar   =========================================
 ============================================================================ -->
 <template id="blogs_nav" name="Blogs Bar Template">
-    <nav t-attf-class="navbar navbar-expand-sm navbar-light #{additional_classes}">
-        <div class="container">
-            <ul class="navbar-nav" t-if="len(blogs) > 1">
+    <nav t-attf-class="navbar navbar-expand-lg navbar-light pt-4 pb-0 px-0 #{additionnal_classes}">
+        <div t-attf-class="container gap-2 w-100 #{len(blogs) > 4 and 'flex-nowrap' or 'flex-wrap flex-sm-nowrap'}" class="container">
+            <!-- Desktop -->
+            <ul t-if="len(blogs) > 1" class="navbar-nav d-none d-lg-flex">
                 <li class="nav-item">
                     <span class="nav-link disabled ps-0">Blogs:</span>
                 </li>
@@ -21,9 +22,68 @@
                     </a>
                 </li>
             </ul>
+            <!-- Mobile -->
+            <t t-set="wblog_nav_offcanvas" t-value="len(blogs) > 4"/>
+            <t t-set="wblog_all_title_string">All Blogs</t>
+
+            <div t-if="len(blogs) > 1" t-attf-class="order-2 d-lg-none #{not wblog_nav_offcanvas and 'dropdown flex-grow-1 flex-sm-grow-0 min-w-0'}">
+                <t t-if="wblog_nav_offcanvas">
+                    <a class="btn btn-light"
+                       role="button"
+                       t-att-title="blog.name if blog else wblog_all_title_string"
+                       data-bs-toggle="offcanvas"
+                       data-bs-target="#o_wblog_offcanvas"
+                       aria-controls="o_wblog_offcanvas">
+                        <i class="fa fa-navicon" role="img"/>
+                    </a>
+                    <div id="o_wblog_offcanvas" class="offcanvas offcanvas-end d-lg-none">
+                        <div class="offcanvas-header">
+                            <h5 class="offcanvas-title my-0">Blogs</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
+                        </div>
+                        <div class="offcanvas-body">
+                            <ul class="nav navbar-nav">
+                                <li class="nav-item">
+                                    <a href="/blog" t-attf-class="nav-link #{(not blog) and 'active'}" t-att-title="wblog_all_title_string">All</a>
+                                </li>
+                                <li t-foreach="blogs" t-as="nav_blog" class="nav-item">
+                                    <a t-attf-href="/blog/#{slug(nav_blog)}"
+                                       t-attf-class="nav-link #{(blog and nav_blog.id == blog.id) and 'active' or ''}"
+                                       t-att-title="nav_blog.name">
+                                        <span t-field="nav_blog.name"/>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </t>
+                <t t-else="">
+                    <a class="btn btn-light dropdown-toggle d-flex align-items-center justify-content-between"
+                       role="button"
+                       t-att-title="blog.name if blog else wblog_all_title_string"
+                       data-bs-toggle="dropdown"
+                       aria-expanded="false">
+                        <span t-if="blog" class="text-truncate" t-out="blog.name"/>
+                        <span t-else="" class="text-truncate">All</span>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                            <a href="/blog" t-attf-class="dropdown-item #{(not blog) and 'active'}" title="All Blogs">All</a>
+                        </li>
+                        <li t-foreach="blogs" t-as="nav_blog">
+                            <a t-attf-href="/blog/#{slug(nav_blog)}"
+                               t-attf-class="dropdown-item #{(blog and nav_blog.id == blog.id) and 'active' or ''}"
+                               t-att-title="nav_blog.name">
+                                <span t-field="nav_blog.name"/>
+                            </a>
+                        </li>
+                    </ul>
+                </t>
+            </div>
             <!-- 'Search Box' -->
             <t t-call="website.website_search_box_input">
-                <t t-set="_classes" t-valuef="w-100 w-md-auto pt-2 pt-md-0 d-md-flex"/>
+                <t t-set="_form_classes" t-valuef="#{not len(blogs) &gt; 1 and 'ms-auto'} flex-grow-1 flex-lg-grow-0"/>
+                <t t-set="_classes" t-valuef=""/>
                 <t t-set="search_type" t-valuef="blogs"/>
                 <t t-set="action" t-value="blog_url(tag=tag,search=search)"/>
                 <t t-set="display_description" t-valuef="true"/>