Как написать многоуровневое меню в jade?

Question

[Anton Essential]

Подскажите как написать функцию многоуровневого меню в jade с передаче параметров и активным пунктом.

Answer 1

[Константин Величко]

Используйте миксины данные в виде массива объектов
Если меню фиксированной вложенности можно сделать так

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)

И примерно такой структурой данных

{
	"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
		}
	]
}

Если неизвестна максимальная вложенность то можно использовать рекурсию
Как написать mixin для Jade/Pug?

Comments

[Anton Essential]

Спасибо Константин, собственно ждал ваш ответ, видел вывод меню у вас в спутнике с привязкой id к странице для активного пункта, и не понял как сделать вложенность.

[Anton Essential]

Намутил я так думаю сильно, оно вроде и работает но я так думаю как-то можно это сделать проще, хочется выделить еще активный пункт меню на текущей странице.
Вывод на каждой странице:
- var pageId = 1;
А если есть подменю и там активный пункт, не понял как это сделать, пришлось велосипед выдумать и подставить еще одну переменную.
- 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)

Вот это не совсем понятно в шреве:
a(href="#{item.url}")

[Константин Величко]

1. Собирайте классы в масив и его применяйте, как в моем коде выше. Так не придется дублировать один и тот же код
2. a(href="#{item.url}") это то же самое что a(href=item.url)

Answer 2

[Anton Essential]

Намутил я так думаю сильно, оно вроде и работает но я так думаю как-то можно это сделать проще, хочется выделить еще активный пункт меню на текущей странице.
Вывод на каждой странице:
- var pageId = 1;
А если есть подменю и там активный пункт, не понял как это сделать, пришлось велосипед выдумать и подставить еще одну переменную.
- 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)

Вот это не совсем понятно в шреве:
a(href="#{item.url}")