Added Bootstrap's top nav

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>