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:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user