view wikked/templates/nav.html @ 487:1ec071454790

web: UX improvements for the sidebar menu. - Open/close the menu on click instead of mouse hover, so it's more friendly to mobile/touch devices. - Rework how the menu lock works.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 01 Nov 2018 21:25:23 -0700
parents 8ee6e7649aba
children
line wrap: on
line source

<a id="wiki-menu-shortcut" class="wiki-logo">
    <span>W</span>
</a>
<nav id="wiki-menu" role="navigation" class="pure-menu pure-menu-open">
    <div id="wiki-menu-header" title="Pin/unpin the wiki menu.">
        <i id="wiki-menu-lock" class="fas fa-{{nav.lock_icon}}"></i>
    </div>
    <ul class="pure-menu-list">
        {%if nav.url_home%}<li class="pure-menu-item"><a href="{{nav.url_home}}"><i class="fas fa-home"></i> Home</a></li>{%endif%}
        {%if nav.url_new%}<li class="pure-menu-item"><a href="{{nav.url_new}}"><i class="fas fa-file"></i> New Page</a></li>{%endif%}
        {%if nav.url_read%}<li class="pure-menu-item"><a href="{{nav.url_read}}"><i class="fas fa-book"></i> Read</a></li>{%endif%}
        {%if nav.url_edit%}<li class="pure-menu-item"><a href="{{nav.url_edit}}"><i class="fas fa-edit"></i> Edit</a></li>{%endif%}
        {%if nav.url_hist%}<li class="pure-menu-item"><a href="{{nav.url_hist}}"><i class="fas fa-road"></i> History</a></li>{%endif%}
    </ul>
    <form role="search" id="search" class="pure-form pure-menu-form pure-menu-divider" action="/search">
        <fieldset>
            <input type="text" name="q" id="search-query" class="pure-input-1" placeholder="Search..." autocomplete="off"></input>
            <ul id="search-preview"></ul>
        </fieldset>
    </form>
    {%if nav.extras%}
    <ul class="pure-menu-list">
    {%for e in nav.extras%}
        <li class="pure-menu-item"><a href="{{e.url}}">{%if e.icon%}<i class="fas fa-{{e.icon}}"></i> {%endif%}{{e.title}}</a></li>
    {%endfor%}
    </ul>
    {%endif%}
    <ul class="pure-menu-list">
        {%if auth.is_logged_in%}
        <li class="pure-menu-item"><a href="{{auth.url_profile}}"><i class="fas fa-cog"></i> {{auth.username}}</a></li>
        <li class="pure-menu-item"><a href="{{auth.url_logout}}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
        {%else%}
        <li class="pure-menu-item"><a href="{{auth.url_login}}"><i class="fas fa-sign-in-alt"></i> Login</a></li>
        {%endif%}
    </ul>
</nav>