vigil/src/lib/MetaNav.svelte

<script lang="ts">

    import { RiLoginBoxLine, RiLogoutBoxLine, RiSearch2Line, RiSearchLine, RiSettings3Line } from "svelte-remixicon";
    import { activePostCount } from "./globals.svelte";
    import type { UserEntry } from "./backend";


let { user } : {user: UserEntry} = $props();


</script>


<div class="metanav">
<ul>
    <li>
        <form action="/search"
            method="POST"
            class="mini-search-bar nomobile">
            <!-- csrf_token() -->
            <input type="search" disabled={true} name="q" placeholder="Search among {activePostCount()} posts" />
            <button type="submit">Search</button>
        </form>
        <a href="/search" aria-label="Search" title="Search" class="mobileonly">
            <RiSearchLine />
        </a>
    </li>
    {#if user}
    <li>
        <div class="header-username nomobile">
            <span><a href="/@{user.username}">@{user.username}</a></span>
            <span>{user.karma || 0} karma</span>
        </div>
    </li>
    <li><a href="/logout" aria-label="Log out" title="Log out"><RiLogoutBoxLine /></a></li>
    {:else}
    <li><a href="/login" aria-label="Log in" title="Log in"><RiLoginBoxLine /></a></li>
    {/if}
</ul>
</div>

<style>
    .metanav {
        align-self: flex-end;
        font-size: 1.5em;
        margin: auto;
        margin-inline-start: 2em;
    }
    
    .metanav ul {
        list-style: none;
            padding: 0;
            margin: 0;
    }
    .metanav ul > li {
        margin: 0 6px;
    }
    .metanav ul,.metanav ul > li {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
            
    .metanav, .metanav > ul,.metanav > ul > li:has(.mini-search-bar) {
        flex: 1;
    } 

    .metanav .header-username {
        display: flex;
        flex-direction: column;
        color: var(--text-primary);
        font-size: .6em;
        justify-content: flex-start;
    }

    .mini-search-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        font-size: 1.2rem;
    }.mini-search-bar [type="search"] {
        flex: 1;
    }
.mini-search-bar [type="submit"]{
                 height: 0;
            width: 0;
            padding: 0;
            margin: 0;
            border-radius: 0;
            opacity: 0;
            overflow: hidden;
        } 
           
.mini-search-bar + a {display: none}
        

            
</style>