Fix desktop responsive layout: sidebar, content sizing, remove duplicate tab bar

- Replace uni-app custom-tab-bar with manual NavBar component in App.vue
  (uni-app auto-detection was not including component in build)
- Mobile: NavBar hidden via CSS display:none, uni-app default tab bar handles nav
- Desktop: NavBar visible as 220px left sidebar, uni-app tab bar hidden
- Content area: max-width 1200px with margin-left:220px, centered
- Buttons/inputs/cards: global desktop CSS overrides for reasonable sizing
- Clean approach: NavBar always in DOM, CSS media queries control visibility
  (no v-if, no conflicting !important)
This commit is contained in:
TradeMate Dev
2026-05-21 10:10:11 +08:00
parent a2a7cb893b
commit b71b7e6cdf
4 changed files with 160 additions and 174 deletions
+36 -3
View File
@@ -1,8 +1,12 @@
<template>
<router-view />
<div class="app-wrapper">
<NavBar />
<router-view />
</div>
</template>
<script setup>
import NavBar from './components/nav-bar.vue'
</script>
<style>
@@ -18,7 +22,7 @@ html, body, #app {
width: 100%;
}
/* Let uni-app framework manage layout for native tabbar */
/* Let uni-app pages scroll */
uni-page {
overflow-y: auto !important;
}
@@ -29,12 +33,22 @@ uni-page-body {
/* ===== Desktop responsive (≥1024px) ===== */
@media (min-width: 1024px) {
/* Hide the built-in uni-app tab bar on desktop */
uni-tabbar {
display: none !important;
}
/* Sidebar — shift page content right */
uni-page-body {
margin-left: 220px !important;
font-size: 16px !important;
}
/* Remove the tab-bar-height bottom padding that uni-app adds for tab pages */
.uni-app--showtabbar uni-page-wrapper:after {
display: none !important;
}
/* Constrain + center page content */
uni-page-body > view {
max-width: 1200px !important;
@@ -49,7 +63,26 @@ uni-page-body {
border-radius: 20px !important;
}
/* Fix floating AI assistant (clear sidebar + reasonable position) */
/* Buttons: reasonable desktop sizing */
uni-page-body button,
uni-page-body .btn-primary,
uni-page-body .btn-secondary,
uni-page-body .uni-btn,
uni-page-body [class*="btn-"] {
min-width: 120px;
padding: 12px 32px !important;
font-size: 15px !important;
}
/* Inputs */
uni-page-body input,
uni-page-body textarea,
uni-page-body .uni-input-input {
font-size: 15px !important;
padding: 10px 16px !important;
}
/* Fix floating AI assistant (clear sidebar) */
.ai-float-btn {
right: 40px !important;
bottom: 40px !important;