From d14c98e93ca98e9f4c62a831093fe47422b57913 Mon Sep 17 00:00:00 2001
From: TradeMate Dev <dev@trademate.com>
Date: Thu, 21 May 2026 10:16:40 +0800
Subject: [PATCH] Fix NavBar sidebar not showing: move all nav CSS to App.vue
 global styles

Root cause: nav-bar.vue styles compiled with [data-v-xxxxx] attribute
selectors by uni-app Vite plugin, but Vue didn't add the attribute to
DOM elements (styles were not scoped). The CSS selector mismatch meant
no sidebar styles ever applied.

Fix:
- Remove all CSS from nav-bar.vue (<style> block deleted entirely)
- Move ALL nav-bar styles to App.vue's global <style>
- Use .app-wrapper > .nav-bar selector (no data-v issues)
- Mobile: display:none; Desktop (>=1024px): display:flex sidebar
- Also fixed: nav-bar was accidentally visible as block on mobile
---
 uni-app/src/App.vue                | 65 ++++++++++++++++++++++++++++
 uni-app/src/components/nav-bar.vue | 68 ------------------------------
 2 files changed, 65 insertions(+), 68 deletions(-)

diff --git a/uni-app/src/App.vue b/uni-app/src/App.vue
index 5e626d7..3f75744 100644
--- a/uni-app/src/App.vue
+++ b/uni-app/src/App.vue
@@ -31,8 +31,73 @@ uni-page-body {
   min-height: 100% !important;
 }
 
+/* ===== NavBar — hidden on mobile (uni-app default tab bar is used) ===== */
+.app-wrapper > .nav-bar {
+  display: none;
+}
+
 /* ===== Desktop responsive (≥1024px) ===== */
 @media (min-width: 1024px) {
+  /* NavBar sidebar */
+  .app-wrapper > .nav-bar {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 220px;
+    height: 100vh;
+    background: #fff;
+    box-shadow: 4px 0 16px rgba(0,0,0,0.08);
+    z-index: 999999;
+    border-right: 1px solid #e0e0e0;
+    padding-top: 24px;
+  }
+
+  .nav-brand {
+    font-size: 20px;
+    font-weight: 700;
+    color: #1890ff;
+    padding: 20px 24px 32px;
+    text-align: center;
+  }
+
+  .nav-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 14px 24px;
+    margin: 2px 12px;
+    border-radius: 12px;
+    gap: 14px;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .nav-item:hover {
+    background: #f0f7ff;
+  }
+
+  .nav-item.active {
+    background: #e6f0ff;
+  }
+
+  .nav-icon {
+    font-size: 22px;
+    line-height: 1;
+    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+  }
+
+  .nav-text {
+    font-size: 15px;
+    color: #555;
+  }
+
+  .nav-item.active .nav-text {
+    color: #1890ff;
+    font-weight: 600;
+  }
+
   /* Hide the built-in uni-app tab bar on desktop */
   uni-tabbar {
     display: none !important;
diff --git a/uni-app/src/components/nav-bar.vue b/uni-app/src/components/nav-bar.vue
index 4ec58f6..405a15e 100644
--- a/uni-app/src/components/nav-bar.vue
+++ b/uni-app/src/components/nav-bar.vue
@@ -53,71 +53,3 @@ onUnmounted(() => {
   window.removeEventListener('hashchange', updateCurrentIndex)
 })
 </script>
-
-<style>
-.nav-bar {
-  display: none;
-}
-
-@media (min-width: 1024px) {
-  .nav-bar {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 220px;
-    height: 100vh;
-    background: #fff;
-    box-shadow: 4px 0 16px rgba(0,0,0,0.08);
-    z-index: 999999;
-    border-right: 1px solid #e0e0e0;
-    box-sizing: border-box;
-    padding-top: 24px;
-  }
-
-  .nav-brand {
-    font-size: 20px;
-    font-weight: 700;
-    color: #1890ff;
-    padding: 20px 24px 32px;
-    text-align: center;
-  }
-
-  .nav-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 14px 24px;
-    margin: 2px 12px;
-    border-radius: 12px;
-    gap: 14px;
-    cursor: pointer;
-    transition: background 0.15s;
-  }
-
-  .nav-item:hover {
-    background: #f0f7ff;
-  }
-
-  .nav-item.active {
-    background: #e6f0ff;
-  }
-
-  .nav-icon {
-    font-size: 22px;
-    line-height: 1;
-    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
-  }
-
-  .nav-text {
-    font-size: 15px;
-    color: #555;
-  }
-
-  .nav-item.active .nav-text {
-    color: #1890ff;
-    font-weight: 600;
-  }
-}
-</style>