How to configure the dashboard sidebar for the Vanty Starter Kit

In this guide, we will look at how to configure the Vanty Starter Kit sidebar. The sidebar is dynamic. It can be configured to show different tabs based on different attributes such as user role or authentication state or replace it with your own custom templates.

Prerequisites

This guide is exclusively for Vanty Starter Kit users.

How it works

The sidebar is rendered using the display_responsive_sidenav template tag in vanty_tags.py. The DashboardNavModel class defines the schema for nav sections and contains all the logic for parsing and preparing the sidebar tab data for Django templates.

Adding a new tab

To add a new tab for authenticated users, modify the list returned by the authenticated_nav_tabs. The list is made up of nav_sections. For instance, if you want to add a new tab to the 'Dashboard' nav_section.

apps/common/vanty_tags.py

class DashboardNavModel(BaseModel):  
    ...

    def authenticated_nav_tabs(self):
    
    
        return [
            {
                "name": "Dashboard",
                "tabs": [
                    {"name": "Home", "path": "dashboard:home", "icon": "home"},
                    {
                        "name": "Teams",
                        "path": "teams:list",
                        "icon": "user-group",
                        "conditions": [settings.TEAMS_APP_ENABLED],
                    },
                    { --> new section
                        "name": "Webhooks",
                        "path": "webhooks:list",
                        "icon": "view-grid",
                        "conditions": [bool],
                    },
                ],
            },

Notes

  • we added a new tab to the Dashboard nav section. The schema for tabs is defined in the NavTab pydantic model in the same module.
  • path - this should be a reversible path. Set 'is_app_path' to False for external urls for example.
  • icon - this should be a valid heroicons icon of type 'outline.
  • conditions - this should be a list of boolean values indicating whether the tab should be visible or not.

Styling

By default, the display_responsive_sidenav template tag renders a responsive sidebar with no section headers. The app ships with a couple of other sidebars. A static sidebar and a slim sidebar. You can easily change this by swapping out the templates.

Conclusion

The UI is built for flexibility. You can modify, and extend the templates and logic to suit your use case. You can completely change the layout and switch to a top bar for example by changing the layout template in templates/layouts/responsive_flat.html. If changing the template, we suggest you make a new one and change the default layout variable in apps/common/context_processors.py.

That's it. If you need assistance do not hesitate to reach out to us on the site chat below.

Copyright © 2022 www.advantch.com