@{
    // ViewData["HasSidebar"] (bool): renders the hamburger that toggles this page's own #sidebar
    // (folder list on Mail, contact list on Contacts) - Settings/Maintenance have no sidebar of
    // their own, so they don't get this button.
    // ViewData["ActiveNav"] (string): "contacts" | "settings" | "maintenance" | null - which link
    // (if any) gets the "active" styling for the current page.
    var hasSidebar = ViewData["HasSidebar"] as bool? ?? false;
    var activeNav = ViewData["ActiveNav"] as string;
}
<div class="topbar">
    @if (hasSidebar)
    {
        <button class="hamburger" id="sidebarToggle" aria-label="Menu">&#9776;</button>
    }
    <span class="brand">MailSharp</span>
    <a class="account-email" id="accountEmail" asp-controller="Mail" asp-action="Index"></a>
    <div class="spacer"></div>
    <!--
        Everything past this point used to just sit directly in the topbar's own flex row - on a
        phone-width screen there's simply too much here (Contacten, taal, Beheer, Instellingen,
        Uitloggen) to fit without either shrinking it illegibly or scrolling the bar sideways
        (both tried, both bad). Wrapping it in its own collapsible panel, opened via the "meer"
        button, means the topbar itself never has to fit more than brand + hamburger + one toggle
        button on mobile - see common.js for the toggle behavior and site.css's mobile breakpoint
        for what turns this from an inline row into a dropdown panel.
    -->
    <div class="topbar-links" id="topbarLinks">
        <a class="btn btn-text @(activeNav == "contacts" ? "active" : "")" asp-controller="Contacts" asp-action="Index" data-i18n="topbar_contacts"></a>
        <select class="lang-select" id="langSelect"></select>
        <a class="btn btn-text @(activeNav == "maintenance" ? "active" : "")" asp-controller="Maintenance" asp-action="Index" id="maintenanceLink" style="display:none" data-i18n="topbar_maintenance"></a>
        <a class="btn btn-text @(activeNav == "settings" ? "active" : "")" asp-controller="Settings" asp-action="Index" data-i18n="topbar_settings"></a>
        <a class="btn" href="#" id="logoutBtn" data-i18n="topbar_logout"></a>
    </div>
    <button class="topbar-menu-toggle" id="topbarMenuToggle" aria-label="Menu" aria-expanded="false">&#8942;</button>
</div>