basis/components/web/templates/includes/menu.html

<nav hx-target="#body-main">
  <ul>
    <li>
      <a href="#" hx-get="/" class="nav-logo">
        {% include "ehlo.svg" %}
      </a>
      <span aria-busy="true" data-loading></span>
    </li>
  </ul>

  <ul>
    {% if not session["login"] %}
    <li>
      <a class="contrast" role="button" _="
        on click
          halt the event
          get value of <[name=login]/> in #register-form
          set value of <[name=login]/> in #login-form to it as String
          toggle @hidden on .login-register
        end"
        href="#">
          <span class="login-register">Register</span>
          <span class="login-register" hidden>Login</span>
      </a>
    </li>
    {% else %}

    {% if "system" in session.get("acl", []) or "user" in session.get("acl", []) %}
    <li>
      <details class="dropdown" hx-on:click="event.target.nodeName==='A'?this.open=false:null">
        <summary>Ctrl</summary>
        <ul dir="rtl">
          <li>
            <a href="#" class="secondary" hx-get="/objects/domains">Domains</a>
          </li>
          <li>
            <a href="#" class="secondary" hx-get="/objects/addresses">Addresses</a>
          </li>
          <li>
            <a href="#" class="secondary" hx-get="/objects/emailusers">Email Users</a>
          </li>
          <li>
            <a href="#" class="secondary" hx-get="/objects/keypairs">Signing keys</a>
          </li>
          {% endif %}
          {% if "system" in session.get("acl", []) %}
          <li>
            <hr>
            <small>System</small>
          </li>
          <li>
            <a href="#" hx-get="/system/users">Users</a>
          </li>
          <li>
            <a href="#" hx-get="/system/logs">Logs</a>
          </li>
          <li>
            <a href="#" hx-get="/system/settings">Settings</a>
          </li>
          <li>
            <a href="#" hx-get="/system/status">Status</a>
          </li>
          {% endif %}
        </ul>
      </details>
    </li>
    {% endif %}

    {% if session["login"] %}
    <li>
      <details class="dropdown" hx-on:click="event.target.nodeName==='A'?this.open=false:null">
        <summary>User</summary>
        <ul dir="rtl">
          <li>
            <a href="#" hx-get="/profile/">Profile</a>
          </li>
          <li>
            <hr>
            <a href="#" hx-post="/logout" hx-swap="innerHTML">Logout</a>
          </li>
        </ul>
      </details>
    </li>
    {% endif %}
  </ul>
</nav>


{% if session["login"] %}
<div id="nav-sub-primary" hx-target="#body-main" class="grid-space-between">
  <div class="no-text-wrap hi">
    👋 <b><a href="#" hx-get="/profile/">{{ session.get("login") or "guest" }}</a></b>
  </div>
  <div>
  {% for role in session.get("acl", []) %}
    <mark>{{ role }}</mark>
  {% endfor %}
  </div>
</div>
{% endif %}

<div id="nav-sub-secondary" hx-target="#body-main" class="grid-end">
  <div id="ws-indicator" class="no-text-decoration" data-tooltip="{% if session["login"] %}Disconnected{% else %}Not logged in{% endif %}" hx-swap-oob="outerHTML">⭕</div>
  {% if "system" in session.get("acl", []) %}
  <div id="enforce-dbupdate" hx-swap-oob="outerHTML">
    {% if ENFORCE_DBUPDATE %}
    <button data-tooltip="Enforced database updates are enabled"
        class="button-red-800"
        id="enforce-dbupdate-button"
        hx-get="/system/status"
        _="on load call countdownSeconds(me, {{ ENFORCE_DBUPDATE }}) end">
          !!!
    </button>
    {% endif %}
  </div>
  {% endif %}
  <div id="nav-theme-toggle"
    _="on updateTheme
        if not localStorage.theme
          if window.matchMedia('(prefers-color-scheme: light)').matches
            set (@data-theme of <html/>) to 'light'
          else
            set (@data-theme of <html/>) to 'dark'
          end
        else
          set (@data-theme of <html/>) to localStorage.theme
        end
        set my @class to (@data-theme of <html/>)
        set localStorage.theme to (@data-theme of <html/>)
      end
      init trigger updateTheme end
      on click
        if I match .light
          set (@data-theme of <html/>) to 'dark'
        else
          set (@data-theme of <html/>) to 'light'
        end
        set localStorage.theme to (@data-theme of <html/>)
        toggle between .light and .dark
      end
    ">&#128161; Theme
  </div>
</div>

{% if session["login"] %}
<section>
  <hr>
  <fieldset _="install tresorToggle" role="group">
    <input hx-disable
      id="vault-unlock-pin"
      name="vault-unlock-pin"
      type="password"
      autocomplete="off"
      autocorrect="off"
      data-protonpass-ignore="true"
      autocapitalize="off"
      spellcheck="false"/>
    <a role="button" href="#" id="vault-unlock" data-tresor="{{ session.profile.tresor }}">...</a>
  </fieldset>
</section>
{% endif %}