mark active page on menu

bamort/web/src/components/Menu.vue

@@ -2,10 +2,10 @@
   <nav class="menu">
     <ul>
       <li>
-        <router-link to="/dashboard">Dashboard</router-link>
+        <router-link to="/dashboard" active-class="active">Dashboard</router-link>
       </li>
       <li v-if="!isLoggedIn">
-        <router-link to="/register">Register</router-link>
+        <router-link to="/register" active-class="active">Register</router-link>
       </li>
       <li v-if="isLoggedIn">
         <button @click="logout">Logout</button>
@@ -31,3 +31,38 @@ export default {
   },
 };
 </script>
+
+<style>
+.menu {
+  background-color: #333;
+  color: white;
+  padding: 1rem;
+}
+
+.menu ul {
+  list-style: none;
+  display: flex;
+  gap: 1rem;
+}
+
+.menu a {
+  color: white;
+  text-decoration: none;
+}
+
+.menu a:hover {
+  text-decoration: underline;
+}
+
+.menu .active {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.menu button {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+}
+</style>

bamort/web/src/router/index.js

@@ -15,6 +15,7 @@ const routes = [
 const router = createRouter({
   history: createWebHistory(),
   routes,
+  //linkActiveClass: "current-page", // Custom active class
 });
 
 // Navigation guard