How to write multilevel menu in jade?

Question

Pug

Tell me how to write a multi-level menu function in jade with parameter passing and an active item.

Answer 1

Use mixins data as an array of objects
If the menu is fixed nesting, you can do this

mixin main-menu-submenu(data)
  ul.main-menu-submenu&attributes(attributes)
    each item in data
      li.main-menu-submenu__item
        a(href="#{item.url}")= item.title


mixin main-menu(data)
  nav.main-menu.js-link-sroll&attributes(attributes)
    ul
      each item in data
        - var itemClasses = ['main-menu__item']
        //- Доп класс для пунктов с подменю
        if (item.submenu !== false)
          - itemClasses.push(itemClasses[0] + '_dropdown')

        li(class=itemClasses)
          a(href="#{item.url}").main-menu__link= item.title
          if (item.submenu !== false)
            .main-menu__submenu
              +main-menu-submenu(item.submenu)

And something like this data structure

{
  "menu": [
    {
      "title": "Level 1 title 1",
      "url": "#url1",
      "submenu": [
        {
          "title": "Submenu item 1",
          "url": "url2"
        },
        {
          "title": "Submenu item 2",
          "url": "url3"
        }
      ]
    },
    {
      "title": "Level 1 title 2",
      "url": "#url4",
      "submenu": false
    }
  ]
}

If you don't know the maximum nesting then you can use recursion
How to write a mixin for Jade/Pug?

Answer 2

Namutil I think so much, it seems to work, but I think somehow it can be done easier, I want to select another active menu item on the current page.
Output on each page:
- var pageId = 1;
And if there is a submenu and there is an active item, I didn’t understand how to do it, I had to invent a bicycle and substitute one more variable.
- var pageId = 1;
- var subId = 0;

mixin main-menu-submenu(data)
  ul.main-menu__submenu&attributes(attributes)
    each item, i in data
      if i === subId
        li.main-menu__item.main-menu__item_active
          a(href=item.url)= item.title
      else  
        li.main-menu__submenu__item
          a(href=item.url)= item.title


mixin main-menu(data)
  nav.main-menu&attributes(attributes)
    ul
      each item, i in data
        if i === pageId
          li.main-menu__item.main-menu__item_active
            a(href=item.url).main-menu__link= item.title
            if (item.submenu !== false)
              +main-menu-submenu(item.submenu)
        else
          li.main-menu__item
            a(href=item.url).main-menu__link= item.title
            if (item.submenu !== false)
              +main-menu-submenu(item.submenu)

This is not entirely clear in the shrew:
a(href="#{item.url}")