initial commit

src/lib/MetaNav.svelte

@@ -0,0 +1,101 @@
+<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>@{user.username}</span>
+            <span>{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>