Fix offcanvas markup

djangocms_frontend/contrib/navigation/templates/djangocms_frontend/bootstrap5/navigation/offcanvas/link.html

@@ -5,9 +5,8 @@
     {% else %}
         <div class="{{ item|default:"nav" }}-item  {{ drop|default:"dropdown" }}">
     {% endif %}
-        <a {{ instance.get_attributes }} href="{{ instance.get_link }}"
-           {% if parent.plugin_type != "NavLinkPlugin" %}data-bs-toggle="dropdown"{% endif %}>{{ instance.name }}</a>
-        <ul class="dropdown-menu">
+        <a class="nav-link" href="{{ instance.get_link }}">{{ instance.name }}</a>
+        <ul>
             {% for plugin in instance.child_plugin_instances %}
                 {% with forloop=parentloop parent=instance drop="dropend" item="dropdown" %}{% render_plugin plugin %}{% endwith %}
             {% endfor %}
@@ -19,18 +18,7 @@
     {% endif %}
 {% else %}
     {% if parent.plugin_type != "NavigationPlugin" %}<li class="{{ item|default:"nav" }}-item">{% endif %}
-        <a {{ instance.get_attributes }} href="{{ instance.get_link }}"{% if instance.target %} target="{{ instance.target }}"{% endif %}>{{ instance.name }}</a>
+        <a class="nav-link" href="{{ instance.get_link }}"{% if instance.target %} target="{{ instance.target }}"{% endif %}>{{ instance.name }}</a>
     {% if parent.plugin_type != "NavigationPlugin" %}</li>{% endif %}
 {% endif %}{# djlint:on #}
 {% endspaceless %}
-{% addtoblock "css" %}
-    <style>
-        .dropdown-menu > li:hover > .dropdown-menu {
-            display: block;
-        }
-        .dropdown-menu .dropdown-menu {
-          left: calc(100% - 0.3rem);
-          top: calc(0.3rem - 8px);
-        }
-    </style>
-{% endaddtoblock %}

djangocms_frontend/contrib/navigation/templates/djangocms_frontend/bootstrap5/navigation/offcanvas/menu.html

@@ -1,12 +1,12 @@
 {% load i18n menu_tags cache %}{% spaceless %}
     {% for child in children %}
         <li class="nav-item {% if child.ancestor %}ancestor{% endif %}{% if child.children %} dropdown{% endif %}">
-            {% if child.children %}<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" href="{{ child.get_absolute_url }}" id="menu-{{ child.id|safe }}">{{ child.get_menu_title }}</a>
-                <div class="dropdown-menu" aria-labelledby="menu-{{ child.ancestor.id|safe }}">
+            {% if child.children %}<a href="{{ child.get_absolute_url }}" id="menu-{{ child.id|safe }}">{{ child.get_menu_title }}</a>
+                <div class="ms-3" aria-labelledby="menu-{{ child.ancestor.id|safe }}">
                     {% show_menu from_level to_level extra_inactive extra_active "djangocms_frontend/bootstrap5/navigation/offcanvas/menu_dropdown.html" "" "" child %}
                 </div>
             {% else %}
-                <a class="nav-link{% if child.selected %} active{% endif %}" href="{{ child.get_absolute_url }}"><span>{{ child.get_menu_title }}</span></a>
+                <a class="{% if child.selected %} active{% endif %}" href="{{ child.get_absolute_url }}"><span>{{ child.get_menu_title }}</span></a>
             {% endif %}
         </li>
     {% endfor %}

djangocms_frontend/contrib/navigation/templates/djangocms_frontend/bootstrap5/navigation/offcanvas/menu_dropdown.html

@@ -3,5 +3,5 @@
     {% if child.get_menu_title|first == ' ' %}
         <div class="dropdown-divider"></div>
     {% endif %}
-    <a class="dropdown-item" href="{{ child.get_absolute_url }}"><span>{{ child.get_menu_title }}</span></a>
+    <a href="{{ child.get_absolute_url }}"><span>{{ child.get_menu_title }}</span></a>
 {% endfor %}

djangocms_frontend/contrib/navigation/templates/djangocms_frontend/bootstrap5/navigation/offcanvas/nav_container.html

@@ -1,17 +0,0 @@
-{% load cms_tags frontend %}{% spaceless %}
-    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav{{ instance.id|safe }}" aria-controls="nav{{ instance.id|safe }}" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="offcanvas offcanvas-end" id="nav{{ instance.id|safe }}">
-        <div class="offcanvas-header">
-            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-        </div>
-        <div class="offcanvas-body">
-           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
-               {% for plugin in instance.child_plugin_instances %}
-                   {% with forloop=parentloop parent=instance %}{% render_plugin plugin %}{% endwith %}
-               {% endfor %}
-           </ul>
-        </div>
-    </div>
- {% endspaceless %}

djangocms_frontend/contrib/navigation/templates/djangocms_frontend/bootstrap5/navigation/offcanvas/navigation.html

@@ -1,16 +1,28 @@
 {% load cms_tags frontend %}{% spaceless %}
     <nav{{ instance.get_attributes }}>
         {% if instance.navbar_container %}<div class="container">{% endif %}
-            {% for plugin in instance.child_plugin_instances %}
-                {% if plugin.plugin_type == "BrandPlugin" %}
-                    {% render_plugin plugin %}
-                {% endif %}
-            {% endfor %}
-            {% for plugin in instance.child_plugin_instances %}
-               {% if plugin.plugin_type != "BrandPlugin" %}
-                   {% with forloop=parentloop parent=instance %}{% render_plugin plugin %}{% endwith %}
-               {% endif %}
-            {% endfor %}
+        {% for plugin in instance.child_plugin_instances %}
+            {% if plugin.plugin_type == "NavBrandPlugin" %}
+                {% render_plugin plugin %}
+            {% endif %}
+        {% endfor %}
+        <button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav{{ instance.id|safe }}" aria-controls="nav{{ instance.id|safe }}" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
         {% if instance.navbar_container %}</div>{% endif %}
     </nav>
+    <div class="offcanvas offcanvas-end" id="nav{{ instance.id|safe }}">
+        <div class="offcanvas-header mt-5">
+            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+                {% for plugin in instance.child_plugin_instances %}
+                    {% if plugin.plugin_type != "NavBrandPlugin" %}
+                        {% with forloop=parentloop parent=instance %}{% render_plugin plugin %}{% endwith %}
+                    {% endif %}
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
 {% endspaceless %}

private/sass/components/_icon-picker.scss

@@ -49,7 +49,7 @@
             border-radius: 50%;
             color: var(--dca-black, var(--body-fg, $black));
             background-color: var(--dca-white, var(--body-bg, $white));
-            padding: 0.5rem;
+            padding: 0.3rem;
             border: 1px solid var(--dca-black, var(--body-fg, $black));
             transform: translate(-50%, -50%);
             top: 0;