Search code examples
phptwigpyrocms

PyroCMS theme custom navigation structure

I've searched everywhere but can't seem to find anything in the documentation or anywhere else. I've created my own custom theme, copypasting stuff from the Starter theme which ships with PyroCMS. In my navigation partial there is this twig directive:

{{ structure()
            .linkAttributesDropdown({'data-toggle': 'dropdown'})
            .listClass('nav navbar-nav navbar-right')
            .childListClass('dropdown-menu')
            .render()|raw }}

This works when using the Bootstrap framework. I am using Purecss.io and I want to assign different classes and assign classes to more elements. My navigation should look like this:

<ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
        <a href="http://local.dev" class="pure-menu-link" >Home</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
        <a href="http://local.dev/products" class="pure-menu-link">Item with children</a>
    <ul class="pure-menu-children">
        <li class="pure-menu-item">
            <a href="http://local.dev/products/child1" class="pure-menu-link">Child 1</a>
        </li>
        <li class="pure-menu-item">
            <a href="http://local.dev/products/chil2" class="pure-menu-link">Child 2</a>
        </li>
    </ul>
    </li>
 </ul>

I've tried the folling in my partial:

{{ structure()
            .linkAttributesDropdown({'class': 'pure-menu-item pure-menu-has-children pure-menu-allow-hover'})
            .listClass('pure-menu-list')
            .elementClass('pure-menu-item')
            .childListClass('pure-menu-children')
            .render() }}

But that doesn't do the trick.

How would I accomplish this? Where can I find documentation for the used functions structure(), listClass() etc.?

Thanks in advance!

Solution

  • Unfortunately this portion of the system is still being developed but I can show you the macro and how to interact with it:

    https://github.com/anomalylabs/pages-module/blob/master/resources/views/macro.twig

    The chaining you are seeing is how you set the options so structure().fooBar(value) set's the foo_bar option to value in the options collection.

    For elementClass you are probably looking for linkClass. Also don't forget to escape with |raw!

    Looks like this will give you your desired markup:

    {{ structure()
        .currentClass('pure-menu-selected')
        .dropdownClass('pure-menu-has-children pure-menu-allow-hover')
        .linkAttributesDropdown({'class': 'pure-menu-item pure-menu-has-children pure-menu-allow-hover'})
        .listClass('pure-menu-list')
        .itemClass('pure-menu-item')
        .linkClass('pure-menu-link')
        .childListClass('pure-menu-children')
        .render()|raw }}