<nav id="dgMenu" aria-label="Page menu" class="dg-menu">
    <div class="dg-menu-toggle">
        <button class="env-button env-button--primary dg-menu-toggle-btn">
        <i class="fal fa-times env-d--none"></i>
        <span>
            Stäng meny
        </span>
        </button>
    </div>
    <ul class="dg-menu__list">
        #foreach($page in $context.pages)
            <li class="dg-menu-page__item #if($page.hasChildren)has-children#end #if($page.active)expanded#end #if($page.current)current#end">
                <a href="$page.URI" class="dg-menu-page__name"> $page.displayName </a>
                #childrenMacro($page)
            </li>
        #end
    </ul>
</nav>

#macro( childrenMacro $page )
    #if($page.hasChildren)
        <button
            aria-label="#if($page.active)Minska#else Expandera#end undersidor för $page.displayName"
            aria-expanded="#if($page.active)true#else false#end"
            aria-controls="childs$page.guid"
            class="dg-menu-page__icon">
            <span class="#if($page.active)env-d--none#end">
                <i class="fal fa-plus "></i>
            </span>
            <span class="#if(!$page.active)env-d--none#end">
                <i class="fal fa-minus"></i>
            </span>
        </button>
        <ul class="dg-menu-page__children" id="childs$page.guid">
            #foreach($child in $page.children)
                <li class="dg-menu-page__item #if($child.hasChildren)has-children#end #if($child.active)expanded#end #if($child.current)current#end">
                    <a href="$child.URI" class="dg-menu-page__name">
                        $child.displayName
                    </a>
                    #childrenMacro($child)
                </li>
            #end
        </ul>
    #end
#end