Reorder nav bar from django admin

Question

So I am currently working on a project and the client has asked for this requirement.

Basically, I have to provide some sort of mechanism in the admin panel so that the admin can order the navbar items. Current nav bar Like in the image above, admin should be able to set the order to eg. SIGN-IN SIGN-UP ABOUT HOME

I'm new to Django but have decent programming skill. Can anyone point me in the right direction?

Home, About, Signup, SignIn is the best practice – Nisharg Shah Apr 21 '20 at 12:07 — Nisharg Shah, Apr 21 '20 at 12:07

score 0 · Accepted Answer · answered Apr 22 '20 at 13:07

You will have to make the navbar display data-driven.

Create a model for the navbar display.

from django.db import models

class Navbar(models.Model):
    name = models.CharField(max_length=100)
    display_order = models.IntegerField(null=True, blank=True)

Register the model so the user can modify in the admin.

from django.contrib import admin
from .models import Navbar

admin.site.register(Navbar)

Create objects for the model class for each of the desired navbar links.
Use content_processors to pass the navbar object to the template that contains the navbar (generally base.html). This link explains in detail how to use content processors.

How can i pass data to django layouts (like 'base.html') without having to provide it through every view?

Your function in content_processors.py should be similar to this.

from .models import Navbar
def add_navbar_data_to_base(request):
    return {
        'navbar': Navbar.objects.all().order_by('display_order')
    }

Now you can add the links to base.html template using a for loop and they will display in the order specified by the display_order which can be modified in the admin.

#base.html
<!DOCTYPE html>
{% load static %}
<html>

<head>
</head>

<body>
    {% block nav %}
    <nav class="navbar sticky-top navbar-expand navbar-light">

        <ul class="navbar-nav">
           {% for link in navbar %}
            <li class="nav-item">
                <a class="nav-link">{{ link }}</a>
            </li>
           {% endfor %}

        </ul>
    </nav>

    {% endblock %}

    {% block content %}
    {% endblock %}

</body>

</html>

This code has not been tested but the general idea should work.

Reorder nav bar from django admin

1 Answers1