Subnavigation

In ShipWithDjango, the subnavigation menu that users see when logged into the platform is fully customizable through a configuration file, eliminating the need to modify template files directly. This approach provides a flexible and centralized way to manage the navigation structure across your application.

The subnavigation configuration is defined in the CONFIG/subnavigation.py file. This file outlines the different sections and items that will appear in the user's subnavigation menu, allowing you to control what options are available based on the user's role or other conditions.

Example Subnavigation Configuration

Here’s a breakdown of how the example subnavigation configuration is structured:

from django.utils.translation import gettext_lazy as _
from django.conf import settings

GLOBAL_SUBNAV = [
    {
        'key' : 'default',
        'name' : _('Default'),
        'show_title' : False,
        'is_active' : True,
        'items' : [{
            'key': 'dashboard',
            'name': _('Dashboard'),
            'url_name' : 'main:dashboard',
            'icon': 'circle',
            'is_active': True,
        },
        {
            'key': 'adminpanel',
            'name': _('Adminpanel'),
            'url_name' : 'admin:index',
            'icon': 'hexagon',
            'is_active': True,
            'superuser_required': True,
        },
        ]
    },
    {
        'key' : 'account_settings',
        'name' : _('Account settings'),
        'show_title' : True,
        'is_active' : True,
        'items' : [{
            'key': 'billing',
            'name': _('Billing'),
            'url_name' : 'billing:manage_billing',
            'icon': 'credit-card',
            'is_active': True,
        },
        {
            'key': 'settings',
            'name': _('Settings'),
            'url_name' : 'authentication:user_settings',
            'icon': 'settings',
            'is_active': True,
        },
        {
            'key': 'logout',
            'name': _('Logout'),
            'url_name' : 'authentication:logout',
            'icon': 'log-out',
            'is_active': True,
        }]
    }
]

Structure and Components

1. Subnavigation Sections:

   • The GLOBAL_SUBNAV list contains dictionaries, each representing a section in the subnavigation menu.

   • Each section has a key, name, and other properties like show_title (controls if the section title is displayed) and is_active (determines if the section is active and visible).

2. Menu Items:

   • Each section contains an items list, which holds individual menu items.

   • Each item is defined by a key, name, url_name (the named URL pattern for the link), icon (the icon displayed next to the item), and is_active.

   • Some items, like the "Adminpanel," can have additional properties such as superuser_required, which restricts access to superusers.

Customizing the Subnavigation

To customize the subnavigation for your application:

1. Add or Modify Sections:

   • You can add new sections or modify existing ones by editing the GLOBAL_SUBNAV list. Define new sections with unique key values and populate them with relevant items.

2. Customize Menu Items:

   • Within each section, you can customize the menu items by changing their name, url_name, and icon. You can also control their visibility with is_active or restrict access to certain roles, like superusers, using additional flags.

3. Dynamic Subnavigation:

   • Utilize conditional logic to dynamically include subnavigation sections based on the presence of specific apps or conditions within your project.