feat(mobile): native-feel sticky top bar + bottom tab nav
Build & Push Docker Images / test-backend (push) Successful in 22s
Build & Push Docker Images / test-frontend (push) Failing after 23s
Build & Push Docker Images / build-backend (push) Has been skipped
Build & Push Docker Images / build-frontend (push) Has been skipped
Build & Push Docker Images / test-backend (push) Successful in 22s
Build & Push Docker Images / test-frontend (push) Failing after 23s
Build & Push Docker Images / build-backend (push) Has been skipped
Build & Push Docker Images / build-frontend (push) Has been skipped
Replaces the floating pill nav with persistent mobile chrome that
frames scrolling content the way iOS/Android native apps do.
New components:
- TopBar: brand left, contextual action right (Admin pill for admins,
bell for saved, Login button when logged out)
- BottomNav: 4-tab fixed nav (Search, Scan [elevated center FAB],
Saved, Profile). Saved/Profile disabled when logged out, tapping
opens LoginModal
- icons.jsx: 5 stroke-based SVG icons (Search, Scan, Bell, User, Cog)
plus Logo; replaces emoji in nav chrome
Behavior changes:
- App.jsx: tracks publicScreen ('home'|'scan'|'search') so BottomNav
can drive both top-level view + inner screen
- PublicView: screen state lifted to App via props (back-compat
defaults preserved so existing call sites don't break)
- App.css: old mobile .view-switcher block hidden (replaced by
BottomNav); .app padding bumped to clear the fixed bottom bar
Desktop (>768px) unchanged — existing centered pill nav still works,
new components hidden via display:none.
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+2
-20
@@ -290,7 +290,7 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app {
|
||||
padding: 1.5rem 1rem calc(5rem + env(safe-area-inset-bottom));
|
||||
padding: 1rem 1rem calc(7rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
@@ -310,25 +310,7 @@
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
position: fixed;
|
||||
left: 0.75rem;
|
||||
right: 0.75rem;
|
||||
bottom: calc(0.75rem + env(safe-area-inset-bottom));
|
||||
z-index: 100;
|
||||
width: auto;
|
||||
max-width: 32rem;
|
||||
margin: 0 auto;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
box-shadow:
|
||||
0 10px 30px rgba(28, 25, 23, 0.12),
|
||||
0 2px 6px rgba(28, 25, 23, 0.06);
|
||||
padding: 0.5rem;
|
||||
overflow: visible;
|
||||
justify-content: space-around;
|
||||
align-items: stretch;
|
||||
gap: 0.25rem;
|
||||
display: none; /* ponytail: replaced by BottomNav on mobile */
|
||||
}
|
||||
|
||||
.view-switcher button {
|
||||
|
||||
Reference in New Issue
Block a user