From 1879ec67f1fab12fe4f7ee19c29e6b5281f58762 Mon Sep 17 00:00:00 2001
From: Artemiy Solopov <a.solopov.001@gmail.com>
Date: Tue, 8 Sep 2026 13:49:29 +0300
Subject: [PATCH] Added Bootstrap's top nav

---
 package.json                             |  1 +
 pnpm-lock.yaml                           |  3 ++
 src/components/TopNav.astro              | 41 +++++++-----------------
 src/components/scripts/load_bootstrap.js |  1 +
 src/components/top_nav/Link.astro        |  2 +-
 src/components/top_nav/UserAction.vue    | 24 ++++++++------
 src/layouts/Layout.astro                 |  9 ++++--
 7 files changed, 38 insertions(+), 43 deletions(-)
 create mode 100644 src/components/scripts/load_bootstrap.js

diff --git a/package.json b/package.json
index 23bea0b..79b3469 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9814346..1efe1b8 100644
--- a/pnpm-lock.yaml
+++ b/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)
diff --git a/src/components/TopNav.astro b/src/components/TopNav.astro
index 3fb45ef..11f87c5 100644
--- a/src/components/TopNav.astro
+++ b/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>
\ No newline at end of file
+        <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>
\ No newline at end of file
diff --git a/src/components/scripts/load_bootstrap.js b/src/components/scripts/load_bootstrap.js
new file mode 100644
index 0000000..91a0068
--- /dev/null
+++ b/src/components/scripts/load_bootstrap.js
@@ -0,0 +1 @@
+import * as bootstrap from 'bootstrap'
\ No newline at end of file
diff --git a/src/components/top_nav/Link.astro b/src/components/top_nav/Link.astro
index 98e211b..a227dea 100644
--- a/src/components/top_nav/Link.astro
+++ b/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>
\ No newline at end of file
diff --git a/src/components/top_nav/UserAction.vue b/src/components/top_nav/UserAction.vue
index fed2306..70d3dcb 100644
--- a/src/components/top_nav/UserAction.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4432653..bd99e78 100644
--- a/src/layouts/Layout.astro
+++ b/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>