fix: removed Nav Container plugin and fixed Navigation Link plugin

djangocms_frontend/contrib/navigation/cms_plugins.py

@@ -23,7 +23,7 @@ class NavigationPlugin(
     CMSUIPlugin,
 ):
     """
-    Creates a Navbar
+    The NavigationPlugin class is a plugin used in Django CMS to create navigation menus or off-canvas menus.
     """
 
     name = _("Navigation")
@@ -36,7 +36,6 @@ class NavigationPlugin(
         "NavLinkPlugin",
         "PageTreePlugin",
         "NavBrandPlugin",
-        "NavContainerPlugin",
     ]
 
     fieldsets = [
@@ -71,13 +70,18 @@ class PageTreePlugin(
     AttributesMixin,
     CMSUIPlugin,
 ):
+    """
+
+    The PageTreePlugin class is a plugin for Django CMS that allows users to display a hierarchical
+    tree-like structure of pages on the frontend.
+    """
     name = _("Page tree")
     module = _("Frontend")
     model = models.PageTree
     form = forms.PageTreeForm
     change_form_template = "djangocms_frontend/admin/page_tree.html"
     allow_children = False
-    parent_classes = ["NavigationPlugin", "NavContainerPlugin"]
+    parent_classes = ["NavigationPlugin",]
     fieldsets = [
         (
             None,
@@ -102,13 +106,18 @@ class NavBrandPlugin(
     LinkPluginMixin,
     CMSUIPlugin,
 ):
+    """
+    The `NavBrandPlugin` class is a plugin used in Django CMS to create a navigation brand element.
+    This plugin allows the user to define a brand logo or text that will be displayed in the
+    navigation header. Content is added through child plugins.
+    """
     name = _("Brand")
     module = _("Frontend")
     model = models.NavBrand
     form = forms.NavBrandForm
     change_form_template = "djangocms_frontend/admin/brand.html"
     allow_children = True
-    parent_classes = ["NavigationPlugin", "NavContainerPlugin"]
+    parent_classes = ["NavigationPlugin",]
     link_fieldset_position = -1
 
     fieldsets = [
@@ -130,13 +139,15 @@ class NavContainerPlugin(
     AttributesMixin,
     CMSUIPlugin,
 ):
+    """
+    The `NavContainerPlugin` class is a deprecated plugin without functionality. It will be removed.
+    """
     name = _("Navigation container")
     module = _("Frontend")
     model = models.NavContainer
-    form = forms.NavContainerForm
-    change_form_template = "djangocms_frontend/admin/nav_container.html"
+    change_form_template = "djangocms_frontend/admin/deprecated.html"
     allow_children = True
-    parent_classes = ["NavigationPlugin"]
+    parent_classes = [""]  # No parent classes
     child_classes = [
         "NavLinkPlugin",
         "PageTreePlugin",
@@ -150,24 +161,33 @@ class NavContainerPlugin(
         ),
     ]
 
-    def get_render_template(self, context, instance, placeholder):
-        return get_template_path(
-            "navigation", context.get("nav_template", default_template), "nav_container"
-        )
-
 
 @plugin_pool.register_plugin
 class NavLinkPlugin(
     mixin_factory("NavLink"),
     LinkPlugin,
 ):
+    """
+    A plugin that allows creating navigation links for the frontend.
+
+    Attributes:
+    -----------
+    - `name` (str): The name of the plugin, displayed in the plugin list when editing a page.
+    - `module` (str): The module where the plugin belongs, displayed in the plugin list when editing a page.
+    - `model` (Model): The Django model used to store the plugin's data.
+    - `form` (Form): The form used to render the plugin's settings in the admin interface.
+    - `change_form_template` (str): The path to the template used to render the plugin's change form in the admin interface.
+    - `allow_children` (bool): Whether the plugin allows having child plugins.
+    - `parent_classes` (list): List of parent plugin classes that this plugin can be nested within.
+    - `child_classes` (list): List of child plugin classes that can be nested within this plugin.
+    """
     name = _("Navigation link")
     module = _("Frontend")
     model = models.NavLink
     form = forms.NavLinkForm
     change_form_template = "djangocms_frontend/admin/navlink.html"
     allow_children = True
-    parent_classes = ["NavigationPlugin", "NavContainerPlugin", "NavLinkPlugin"]
+    parent_classes = ["NavigationPlugin", "NavLinkPlugin"]
     child_classes = [
         "NavLinkPlugin",
         "GridContainerPlugin",

djangocms_frontend/contrib/navigation/forms.py

@@ -108,18 +108,5 @@ class Meta:
     attributes = AttributesFormField()
 
 
-class NavContainerForm(mixin_factory("NavContainer"), EntangledModelForm):
-    class Meta:
-        model = FrontendUIItem
-        entangled_fields = {
-            "config": [
-                "attributes",
-            ]
-        }
-        untangled_fields = ()
-
-    attributes = AttributesFormField()
-
-
 class NavLinkForm(mixin_factory("NavLink"), LinkForm):
     link_is_optional = True

djangocms_frontend/contrib/navigation/frameworks/bootstrap5.py

@@ -5,6 +5,8 @@
             f"navbar-{instance.config.get('navbar_design', '')}",
             f"navbar-expand-{instance.config.get('navbar_breakpoint', '')}",
         )
+        if instance.config.get("navbar_design", "") == "dark":
+            instance.add_classes("bg-dark")
         return super().render(context, instance, placeholder)
 
 

djangocms_frontend/contrib/navigation/models.py

@@ -23,6 +23,9 @@
         proxy = True
         verbose_name = _("Navigation container")
 
+    def get_short_description(self):
+        return _("(deprecated)")
+
 
 class NavLink(Link):
     class Meta:

djangocms_frontend/contrib/navigation/templates/djangocms_frontend/bootstrap5/navigation/default/brand.html

@@ -1,6 +1,6 @@
-{% load cms_tags sekizai_tags %}{% spaceless %}{% with link=instance.get_link %}{% if link %}<a {{ instance.get_attributes }} href="{{ link }}"{% if instance.target %} target="{{ instance.target }}"{% endif %}>{% else %}    <{{ instance.tag_type }}{{ instance.get_attributes }}>{% endif %}
+{% load cms_tags sekizai_tags %}{% spaceless %}{% with link=instance.get_link %}{% if link %}<a {{ instance.get_attributes }} href="{{ link }}"{% if instance.target %} target="{{ instance.target }}"{% endif %}>{% else %}    <span {{ instance.get_attributes }}>{% endif %}
     {% for plugin in instance.child_plugin_instances %}
         {% with parentloop=forloop parent=instance %}{% render_plugin plugin %}{% endwith %}
     {% empty %}{{ instance.simple_content }}{% endfor %}
-{% if link %}</a>{% else %}</{{ instance.tag_type }}>{% endif %}{% endwith %}
+{% if link %}</a>{% else %}</span>{% endif %}{% endwith %}
 {% endspaceless %}

djangocms_frontend/contrib/navigation/templates/djangocms_frontend/bootstrap5/navigation/default/icon.html

@@ -0,0 +1,2 @@
+{% if "iconClass" in icon_class %}{% load icon_tags %}{% add_css_for_icon icon_class %}<i class="{{ icon_class.iconClass }} {{ attribute_class }}">{{ icon_class.iconText }}</i>
+{% else %}<i class="{{ icon_class }} {{ attribute_class }}" aria-hidden="true"></i>{% endif %}

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

@@ -6,8 +6,10 @@
     {% else %}
         <div class="{{ item|default:"nav" }}-item  {{ drop|default:"dropdown" }}">
     {% endif %}
+        {% if instance.icon_left %}{% include "djangocms_frontend/bootstrap5/navigation/default/icon.html" with icon_class=instance.icon_left attribute_class="pe-0 nav-link" %}{% endif %}
         <a {{ instance.get_attributes }} href="{{ instance.get_link }}"
            {% if parent.plugin_type != "NavLinkPlugin" %}data-bs-toggle="dropdown"{% endif %}>{{ instance.name }}</a>
+        {% if instance.icon_right %}{% include "djangocms_frontend/bootstrap5/navigation/default/icon.html" with icon_class=instance.icon_right attribute_class="ps-0 nav-link" %}{% endif %}
         <ul class="dropdown-menu">
             {% for plugin in instance.child_plugin_instances %}
                 {% with forloop=parentloop parent=instance drop="dropend" item="dropdown" %}{% render_plugin plugin %}{% endwith %}
@@ -20,7 +22,9 @@
     {% endif %}
 {% else %}
     {% if parent.plugin_type != "NavigationPlugin" %}<li class="{{ item|default:"nav" }}-item">{% endif %}
+        {% if instance.icon_left %}{% include "djangocms_frontend/bootstrap5/navigation/default/icon.html" with icon_class=instance.icon_left attribute_class="pe-0 nav-link" %}{% endif %}
         <a {{ instance.get_attributes }} href="{{ instance.get_link }}"{% if instance.target %} target="{{ instance.target }}"{% endif %}>{{ instance.name }}</a>
+        {% if instance.icon_right %}{% include "djangocms_frontend/bootstrap5/navigation/default/icon.html" with icon_class=instance.icon_right attribute_class="ps-0 nav-link" %}{% endif %}
     {% if parent.plugin_type != "NavigationPlugin" %}</li>{% endif %}
 {% endif %}{# djlint:on #}
 {% endspaceless %}

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

@@ -1,18 +1,23 @@
-{% load cms_tags frontend %}{% spaceless %}
-    <nav{{ instance.get_attributes }}>
-        {% if instance.navbar_container %}<div class="container">{% endif %}
+{% load cms_tags frontend %}
+<nav{{ instance.get_attributes }}>
+    {% if instance.navbar_container %}<div class="container">{% endif %}
+        {% for plugin in instance.child_plugin_instances %}
+            {% if plugin.plugin_type == "NavBrandPlugin" %}
+                {% render_plugin plugin %}
+            {% endif %}
+        {% endfor %}
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 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="collapse navbar-collapse" id="nav{{ instance.id|safe }}">
             <ul class="navbar-nav">
-            {% 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" %}
+                       {% with forloop=parentloop parent=instance %}{% render_plugin plugin %}{% endwith %}
+                   {% endif %}
+                {% endfor %}
             </ul>
-        {% if instance.navbar_container %}</div>{% endif %}
-    </nav>
-{% endspaceless %}
+        </div>
+    {% if instance.navbar_container %}</div>{% endif %}
+</nav>
+

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/navigation.html

@@ -1,16 +1,33 @@
 {% 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">
+            <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 %}
+<style>
+    html.cms-toolbar-expanded .offcanvas-header {
+        margin-top: 3rem;
+    }
+</style>