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
This commit is contained in:
TradeMate Dev
2026-05-21 10:16:40 +08:00
parent b71b7e6cdf
commit d14c98e93c
2 changed files with 65 additions and 68 deletions
+65
View File
@@ -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;