{{! The nav section appears as a sidebar in the mouse layout, and tabs along the bottom of the screen in the touch layout. }}

<div id="site-nav-wrapper">
    <div> {{! This div is here to make sure the touch layout tabs can extend into the page without interrupting the layout at the base.}}
    
        {{#data-portlets-sidebar}}

            {{#data-portlets-first}}
                <nav class="site-nav-menu">
                    <button>
                        {{{label}}}
                    </button>
                    <ul class="site-nav-menu-links">
                        {{{html-items}}}
                    </ul>
                </nav>
            {{/data-portlets-first}}

            {{! The Tools menu generated below is hidden with CSS, as its functions are moved to Page and User Options.}}

            {{#array-portlets-rest}}
                <div class="site-nav-menu nav-external">
                    <button>
                        {{{label}}}
                    </button>
                    <ul class="site-nav-menu-links">
                        {{{html-items}}}
                    </ul>
                </div>
            {{/array-portlets-rest}}

        {{/data-portlets-sidebar}}

        {{#data-footer.data-info.array-items.0}}
            <p id="site-lastedit" class="layout-mouse">
                {{{html}}}
            </p>
        {{/data-footer.data-info.array-items.0}}

        {{#data-toc}}
        <nav id="site-nav-toc" class="site-nav-menu site-nav-sticky">
            <button>Contents</button>
            <ul class="site-nav-menu-links">
                <li id="site-nav-toc-title" class="mw-list-item">
                    <a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()" class="nav-backtotop"> {{! This removes the empty # from the browser URL.}}
                            {{{html-title}}}
                    </a>
                </li>
                {{#array-sections}}
                    <li class="mw-list-item">
                        <a href="#{{{linkAnchor}}}" class="site-nav-toc-level nav-toclevel-{{{toclevel}}}">
                            {{{line}}}
                        </a>
                    </li>
                {{/array-sections}}
            </ul>
        </nav>
        {{/data-toc}}

    </div>
</div>