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;
|
min-height: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== NavBar — hidden on mobile (uni-app default tab bar is used) ===== */
|
||||||
|
.app-wrapper > .nav-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* ===== Desktop responsive (≥1024px) ===== */
|
/* ===== Desktop responsive (≥1024px) ===== */
|
||||||
@media (min-width: 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 */
|
/* Hide the built-in uni-app tab bar on desktop */
|
||||||
uni-tabbar {
|
uni-tabbar {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|||||||
@@ -53,71 +53,3 @@ onUnmounted(() => {
|
|||||||
window.removeEventListener('hashchange', updateCurrentIndex)
|
window.removeEventListener('hashchange', updateCurrentIndex)
|
||||||
})
|
})
|
||||||
</script>
|
</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