Added Bootstrap's top nav

src/components/TopNav.astro

@@ -3,34 +3,15 @@ import Link from './top_nav/Link.astro'
 import UserAction from './top_nav/UserAction.vue'
 ---
 
-<nav>
-    <a class="brand" href="/">NV</a>
-    <ul class="center">
-        <li><Link href="/auctions">Auctions</Link></li>
-    </ul>
-    <ul class="right">
-        <li><UserAction client:only /></li>
-    </ul>
-</nav>
+<nav class="navbar navbar-expand bg-primary-subtle">
+    <div class="container-fluid">
+        <a class="brand p-2" href="/">NV</a>
 
-<style>
-    nav {
-        display: flex;
-        flex-flow: row nowrap;
-        width: 100%;
-
-        > ul {
-            list-style: none;
-            display: flex;
-            flex-flow: row nowrap;
-        }
-
-        > .center {
-            margin-inline: auto;
-        }
-
-        > .right {
-            margin-left: auto;
-        }
-    }
-</style>
+        <ul class="navbar-nav me-auto">
+            <li class="nav-item"><Link href="/auctions">Auctions</Link></li>
+        </ul>
+        <ul class="navbar-nav">
+            <UserAction client:load />
+        </ul>
+    </div>
+</nav>

src/components/scripts/load_bootstrap.js

@@ -0,0 +1 @@
+import * as bootstrap from 'bootstrap'

src/components/top_nav/Link.astro

@@ -3,6 +3,6 @@ const {href} = Astro.props
 const isActive = Astro.url.pathname.startsWith(href)
 ---
 
-<a class:list={[{active: isActive}]} href={href}>
+<a class:list={["nav-link", {active: isActive}]} href={href}>
     <slot></slot>
 </a>

src/components/top_nav/UserAction.vue

@@ -11,16 +11,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="token === Loading" class="placeholder"></div> <!-- TODO: replace with an actual placeholder -->
-  <a href="/login" v-else-if="token === Anonymous">Login</a>
-  <span v-else>{{ token.username || "Username" }}</span>
+  <li :class="['nav-item', {'dropdown': (token !== Loading && token !== Anonymous)}]">
+    <div v-if="token === Loading" class="placeholder"></div>
+    <a v-else-if="token === Anonymous" class="nav-link" href="/login">Login</a>
+    <template v-else>
+      <a href="#" class="btn btn-secondary dropdown-toggle" role="button"
+         data-bs-toggle="dropdown">{{ token.username || "Username" }}</a>
+      <ul class="dropdown-menu dropdown-menu-end">
+        <li><a href="#" class="dropdown-item">Logout</a></li>
+      </ul>
+    </template>
+  </li>
 </template>
 
 <style scoped>
-  .placeholder {
-    display: inline-block;
-    width: 2em;
-    height: 1em;
-    background: gray;
-  }
+.placeholder {
+  display: inline-block;
+  width: 2em;
+}
 </style>