Move mobile taxon menu into drawer (#17567)

Before: ![image](https://github.com/user-attachments/assets/6ab49cc0-d63e-4f90-b6cb-db10395ab05d) ![image](https://github.com/user-attachments/assets/90151f04-640a-49e8-bd2b-89ca2f0ddc1e) After: ![image](https://github.com/user-attachments/assets/47ab1c0e-fadc-4769-aeea-6a177ec402e3) ![image](https://github.com/user-attachments/assets/fca665f1-5844-4202-9ff6-fd9388dfc515)
Sylius · Dec 17, 2024 · 4f6ccd3 · 4f6ccd3
2 parents 46dd5bc + c9d9457
commit 4f6ccd3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/assets/styles/_nav.scss b/src/Sylius/Bundle/ShopBundle/Resources/assets/styles/_nav.scss
@@ -1,10 +1,18 @@
-.dropdown-menu {
-  width: max-content;
-  min-width: 13rem;
-  max-width: 20rem;
+.navbar {
+  .dropdown-menu {
+    width: max-content;
+    min-width: 13rem;
+    max-width: 20rem;
+    position: absolute;
 
-  .nav-link {
-    --bs-nav-link-padding-y: 2px;
-    --bs-nav-link-padding-x: 1.5rem;
+    @media (max-width: 991px) {
+      position: static;
+      border: none;
+    }
+
+    .nav-link {
+      --bs-nav-link-padding-y: 2px;
+      --bs-nav-link-padding-x: 1.5rem;
+    }
   }
 }
diff --git a/...s/Bundle/ShopBundle/templates/shared/layout/base/header/content/taxon_hamburger.html.twig b/...s/Bundle/ShopBundle/templates/shared/layout/base/header/content/taxon_hamburger.html.twig
@@ -1,5 +1,5 @@
 <div class="col-auto d-lg-none">
-    <button class="navbar-toggler btn btn-icon btn-transparent px-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler btn btn-icon btn-transparent px-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         {{ ux_icon('tabler:menu-2', { class: 'icon icon-md' }) }}
     </button>
 </div>
diff --git a/src/Sylius/Bundle/ShopBundle/templates/shared/layout/base/header/navbar/menu.html.twig b/src/Sylius/Bundle/ShopBundle/templates/shared/layout/base/header/navbar/menu.html.twig
@@ -1,11 +1,15 @@
 <div class="w-100 border-bottom">
     {% if taxons|length > 0 %}
-        <nav class="navbar navbar-expand-lg p-0">
-            <div class="container">
-                <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
-                    <div class="navbar-nav my-2" {{ sylius_test_html_attribute('menu') }}>
-                        {% hook 'sylius_shop.base.header.navbar.menu' with { taxons } %}
-                    </div>
+        <nav class="navbar offcanvas-lg offcanvas-start offcanvas-wide p-0" id="navbarNav">
+            <div class="offcanvas-header w-full">
+                <h5 class="offcanvas-title">
+                    {{ 'sylius.ui.taxons'|trans }}
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#navbarNav" aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body justify-content-lg-center w-full py-0">
+                <div class="navbar-nav my-2 flex-column flex-lg-row gap-lg-4" {{ sylius_test_html_attribute('menu') }}>
+                    {% hook 'sylius_shop.base.header.navbar.menu' with { taxons } %}
                 </div>
             </div>
         </nav>

diff --git a/...s/Bundle/ShopBundle/templates/shared/layout/base/header/navbar/menu/item/toggle.html.twig b/...s/Bundle/ShopBundle/templates/shared/layout/base/header/navbar/menu/item/toggle.html.twig
@@ -1,5 +1,6 @@
 {% set taxon = hookable_metadata.context.taxon %}
 
-<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+<a class="nav-link d-flex align-items-center gap-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
     {{ taxon.name }}
+    {{ ux_icon('tabler:chevron-down', { 'class': 'icon icon-sm'}) }}
 </a>