fix nav

web/src/components/NavBar.vue

@@ -37,34 +37,32 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
 </script>
 
 <template>
-  <div class="navbar-container">
-    <n-menu mode="horizontal" :options="menuOptions" :value="activeMenu" class="modern-menu" />
+  <div>
+    <n-menu
+      mode="horizontal"
+      :options="menuOptions"
+      :value="activeMenu"
+      responsive
+      class="modern-menu"
+    />
   </div>
 </template>
 
 <style scoped>
-.navbar-container {
-  flex: 1;
-  display: flex;
-  max-width: 600px;
-}
-
 :deep(.nav-menu-item) {
   display: flex;
   align-items: center;
   gap: 8px;
   text-decoration: none;
   color: inherit;
-  padding: 8px 16px;
+  padding: 8px;
   border-radius: var(--border-radius-md);
   transition: all 0.2s ease;
   font-weight: 500;
 }
 
-:deep(.nav-item-icon) {
-  font-size: 1.1rem;
-  display: flex;
-  align-items: center;
+:deep(.n-menu-item-content) {
+  padding: 0 10px !important;
 }
 
 :deep(.nav-item-text) {
@@ -72,12 +70,6 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   letter-spacing: 0.2px;
 }
 
-:deep(.n-menu) {
-  background: transparent;
-  border-bottom: none;
-  justify-content: center;
-}
-
 :deep(.n-menu-item) {
   border-radius: var(--border-radius-md);
   margin: 0 4px;
@@ -100,18 +92,4 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
   transform: translateY(-1px);
 }
-
-:deep(.n-menu-item-content) {
-  border-radius: var(--border-radius-md);
-}
-
-:deep(.n-menu-item-content-header) {
-  overflow: visible;
-}
-
-@media (max-width: 768px) {
-  .navbar-container {
-    display: none;
-  }
-}
 </style>