
<div class="mdh-microsite-pedagog__main-menu--wrapper" role="navigation">
    <ul class="mdh-microsite-pedagog__main-menu">
        #set($subLoop = 0)
        #foreach($item in $menuItems)
            #set ($columnCount = 0)
            #set($subItem = $nodeIteratorUtil.getMenuItems($item))
            #if($subItem.hasNext() && $item.getName() != "Bloggar" && $item.getName() != "Kalender")
                <li class="mdh-microsite-pedagog__main-menu--link #if($nodeTreeUtil.isDescendantOf($currentPage, $item))selected#end">
                    <button
                        aria-controls="menu-list-$subLoop"
                        class="mdh-microsite-pedagog__main-menu--link-btn"
                        aria-expanded='false'>
                        $item.getName()
                    </button>
                    <div class="mdh-microsite-pedagog__main-menu--subwrapper" id="menu-list-$subLoop" data-open="false">
                        <div class="mdh-microsite-pedagog__main-menu--sublinks-columns">
                          #foreach($node in $nodeIteratorUtil.getMenuItems($item))
                            #set($columnCount = $columnCount + 1)
                          #end
                            <ul class="mdh-microsite-pedagog__main-menu--sublinks column-$columnCount">
                                #foreach($node in $nodeIteratorUtil.getMenuItems($item))
                                  #if(!$nodeTypeUtil.isType($node, "sv:folder"))
                                    <li
                                      class="#if($currentPage == $node)is-active#end mdh-microsite-pedagog__main-menu--sublinks__link">
                                      $linkRenderer.update($node)
                                      $linkRenderer.render()
                                    </li>
                                  #end
                                #end
                            </ul>
                        </div>
                    </div>
                </li>
            #else
              <li class="mdh-microsite-pedagog__main-menu--link #if($nodeTreeUtil.isDescendantOf($currentPage, $item))selected#end">
                  $linkRenderer.update($item, $propertyUtil.getString($font, "selectorText"), $item.getName())
                  $linkRenderer.render()
              </li>
            #end
            #set($subLoop = $subLoop + 1)
        #end
    </ul>
</div>

<script>
    window.svDocReady(function () {
        const mainMenuLinks = document.querySelectorAll('.mdh-microsite-pedagog__main-menu--link');

        const mainMenuSublinks = document.querySelectorAll('.mdh-microsite-pedagog__main-menu--sublinks')
        mainMenuSublinks.forEach(function (link) {
            if (link.getElementsByTagName('a')) {
                link
                    .getElementsByTagName('a')
                    .href = '#';
            }
        })

        function changeLinkState(btn, link, subWrapper) {
            function toggleAttr(element, attr) {
                if (element.getAttribute(attr).trim() == 'false') {
                  element.setAttribute(attr, 'true');
                } else {
                  element.setAttribute(attr, 'false');
                }
            }
            document.addEventListener('click', function (e) {
                if (e.target == btn || btn.contains(e.target)) {
                    link
                      .classList
                      .toggle('in-focus');

                    toggleAttr(btn, 'aria-expanded');
                    toggleAttr(subWrapper, 'data-open');
                } else if (subWrapper.contains(e.target)) {
                    return
                } else { //click outside
                    if (link.classList.contains('in-focus')) {
                        link
                            .classList
                            .remove('in-focus');
                        toggleAttr(btn, 'aria-expanded');
                        toggleAttr(subWrapper, 'data-open');

                    }
                }
            })
        }

        mainMenuLinks.forEach(function (link) {
            if (link.querySelector('.mdh-microsite-pedagog__main-menu--link-btn')) {
                let btn = link.querySelector('.mdh-microsite-pedagog__main-menu--link-btn');
                let subWrapper = link.querySelector('.mdh-microsite-pedagog__main-menu--subwrapper');
                changeLinkState(btn, link, subWrapper);
            }
        })
    })
</script>