{{! 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 as part of the templating section 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-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 when the back-to-top button is clicked.}}
                            {{{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}}

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

    </div>
</div>