Added Bootstrap's top nav

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@astrojs/vue": "^7.0.2",
     "@nanostores/vue": "^1.0.1",
+    "@popperjs/core": "^2.11.8",
     "astro": "^7.2.10",
     "bootstrap": "^5.3.8",
     "nanostores": "^1.1.0",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@nanostores/vue':
         specifier: ^1.0.1
         version: 1.0.1(@nanostores/logger@1.0.0(nanostores@1.1.0))(nanostores@1.1.0)(vue@3.5.42(typescript@5.9.3))
+      '@popperjs/core':
+        specifier: ^2.11.8
+        version: 2.11.8
       astro:
         specifier: ^7.2.10
         version: 7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3)(sass-embedded@1.104.0)(sass@1.104.0)

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 class="navbar navbar-expand bg-primary-subtle">
+    <div class="container-fluid">
+        <a class="brand p-2" href="/">NV</a>
+
+        <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>
-
-<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>

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>

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/app.scss'
+
 import TopNav from '../components/TopNav.astro'
 
 const {title} = Astro.props
@@ -13,14 +14,16 @@ const {title} = Astro.props
         <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
         <meta name="generator" content={Astro.generator}/>
         <title>Neon Vertigo</title>
-        <script src="../components/scripts/load_token.js"></script>
+        <script src="../components/scripts/load_bootstrap.js"></script>
     </head>
     <body>
         <header>
             <TopNav />
         </header>
-        <h1>{title}</h1>
-        <slot/>
+        <main class="container">
+            <h1>{title}</h1>
+            <slot/>
+        </main>
 
         {import.meta.env.DEV &&
             <script>