Sidebar menu two columns layout on frontend

Need Help
#1

Hi,
I need yours advices.
I have layout with two columns first column sidebar menu, second column with content.
Content is through Tailor.

In sidebar menu i need different tailor entries types.

First level - only for main menu top of page

  • item main menu
  • item main menu
    • sidebar item - level 2+
      • sidebar item
        • sidebar item
  • item main menu
    • sidebar item
      • sidebar item

Second level - only for sidebar menu level 2+ all children

    • sidebar item
      • sidebar item
        • sidebar item

I dont want use static pages, most likely only menu from static pages.

It is possible? Or i need write custom menu plugin?

How do you solve it?

#2

Guys, i figured it out!

I used recursive macro function. Here is code, it’s only for level 2+ in sidebar, may be some help with sidebar solution.

component: staticMenu for sidebar inject in main layout

path: partials/sidebar_links.htm

{% macro render_nav_items(menuItems, activeLevel = 0, level, parent) %}

    {% set level = level + 1 %}
    {% set activeLevel = (activeLevel < level) ? activeLevel + 1 : activeLevel %}

    {% for item in menuItems %}
        
        {% 
            set itemClass = [
                'item-level-'~level,
                item.isActive ? 'active',
                item.isChildActive ? 'active-child',
                item.viewBag.featured ? 'featured'
            ]
        %}
        
        {% if parent is not null and (parent.isActive or parent.isChildActive)  %} 

            {% if activeLevel == level %} 

                 <li class="{{ itemClass|join(' ')|trim }}"><a href="{{ item.url }}">{{ item.title }}</a>
                    
                    {% if item.items  %}
                        
                        <ul> {{ _self.render_nav_items(item.items,activeLevel,level,parent) }} </ul>
                   
                   {% endif %}

                 </li>
             
             {% endif %}

         {% else %} 
             
                {{ _self.render_nav_items(item.items,activeLevel,level,item) }}
         
         {% endif %}
    
    {% endfor %}

{% endmacro %}

{% import _self as menu %}

<ul>{{ menu.render_nav_items(staticMenu.menuItems,2) }}</ul>

If you want extend Menu Items for viewBag ex. sibling checkbox and control showing children.

Partial sidebar_links.html putting through placeholder to place where i need in layout

2 Likes