Django dynamic menu in navbar

Viewed 603

I want to create dynamic menu, means that menu loaded from table

Here is menu setup in my django admin panel

List of menu from my table

and here is how i create or setup a menu

Add menu's child

And this is the current result

This is the current condition

def process_request(self, request):
    html_menu = ''
    menus = menu.Menu.objects.order_by('order_number').all()

    used_ids = []
    for m in menus:
        print(">>>>>> " , m, m.children_menu.all())
        if m.target_url == '' or m.target_url is None or m.target_url == '#':
            menu_link = '#'
        else:
            menu_link = reverse(m.target_url)

        children = m.children_menu.all()
        if len(children) > 0:
            children_ids, children_html_menu = self.recursive_menu(m, children)
            html_menu += children_html_menu
            used_ids += children_ids
        elif m.is_divider:
            html_menu += f'''
              <hr class="sidebar-divider">
              <div class="sidebar-heading">
                  {m.title}
              </div>
            '''
        elif m.id not in used_ids:
            html_menu += f'''
                <li class="nav-item active">
                    <a class="nav-link" href="{menu_link}">
                      <i class="{m.icon_class}"></i>
                      <span>{m.title}</span>
                    </a>
                </li>
            '''

        used_ids.append(m.id)

    print(html_menu)
    request.menus = html_menu

def recursive_menu(self, m, children):
    print("test " , m, children)
    children_ids = []
    html_menu = f'''
      <li class="nav-item">
        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapse{m.order_number}"
          aria-expanded="true" aria-controls="collapse{m.order_number}">
          <i class="{m.icon_class}"></i>
          <span>{m.title}</span>
        </a>
        <div id="collapse{m.order_number}" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
          <div class="bg-white py-2 collapse-inner rounded">            
    '''

    if len(children) < 1:
        return children_ids, html_menu
    else:
        for c in children:
            # print(c, ">>>>>>>>>..", c.children_menu)
            children_ids.append(c.id)
            if c.target_url == '' or c.target_url is None or c.target_url == '#':
                menu_link = '#'
            else:
                menu_link = reverse(c.target_url)

            if len(c.children_menu.all()) > 0:
                child_ids, children_html_menu = self.recursive_menu(c, c.children_menu.all())
                html_menu += children_html_menu
                children_ids += child_ids
            else:
                html_menu += f'''
                    <a class="collapse-item" href="{menu_link}">
                    <i class="{c.icon_class}"></i>
                    <span>{c.title}</span>
                    </a>
                '''

        html_menu += '''
                    </div>
                </div>
            </li>
        '''

    return children_ids, html_menu

I want to create not only, Something: A, B

but able to handle Something: A: A1, A2 , B, C: C1,....C7 and so on

I really appreciate for any help, thank you very much

I open to change the menu concept ( schema / relation ), also about the existing code i know there is something that i can improve, i need your suggestion.

0 Answers
Related