Skip to content

Commit 701e6fd

Browse files
Consolidate top into bottom nav
Switch operator layout to use bottom navigation across all screen sizes, removing the top bar for /operator views and streamline with tablet-friendly bottom navigation. Ensure the mobile bottom navigation is used universally to replace the desktop top navigation. X-Lovable-Edit-ID: edt-9d8eff9b-7112-41e6-b5f8-d7c942bd416b
2 parents 048d111 + 07120d9 commit 701e6fd

File tree

1 file changed

+7
-30
lines changed

1 file changed

+7
-30
lines changed

src/components/operator/OperatorLayout.tsx

Lines changed: 7 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -210,37 +210,14 @@ export const OperatorLayout = ({ children, showBackToAdmin = false }: OperatorLa
210210
</div>
211211
</div>
212212

213-
{/* Desktop Navigation Tabs - Hidden on mobile - Compact */}
214-
<div className="hidden sm:block sticky top-[calc(3rem+theme(spacing.12))] z-30 border-b border-border-subtle glass-card">
215-
<div className="flex gap-0.5 px-4 py-1.5">
216-
{navItems.map((item) => (
217-
<Button
218-
key={item.path}
219-
variant="ghost"
220-
size="sm"
221-
onClick={() => navigate(item.path)}
222-
className={cn(
223-
"gap-1.5 transition-base h-7 text-xs px-2.5",
224-
isActive(item.path)
225-
? "nav-item-active"
226-
: "nav-item-hover"
227-
)}
228-
>
229-
<item.icon className="h-3.5 w-3.5" />
230-
{item.label}
231-
</Button>
232-
))}
233-
</div>
234-
</div>
235-
236-
{/* Main Content - Reduced padding */}
237-
<main className="flex-1 px-3 sm:px-4 py-3 sm:py-4 pb-16 sm:pb-4">
213+
{/* Main Content */}
214+
<main className="flex-1 px-3 sm:px-4 py-3 sm:py-4 pb-20">
238215
{children}
239216
</main>
240217

241-
{/* Mobile Bottom Navigation - Fixed - Compact */}
242-
<nav className="sm:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-border-subtle glass-card">
243-
<div className="grid grid-cols-4 h-14">
218+
{/* Bottom Navigation - Fixed for all screen sizes */}
219+
<nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-border-subtle glass-card">
220+
<div className="grid grid-cols-4 h-14 max-w-lg mx-auto">
244221
{navItems.map((item) => (
245222
<button
246223
key={item.path}
@@ -252,9 +229,9 @@ export const OperatorLayout = ({ children, showBackToAdmin = false }: OperatorLa
252229
: "text-muted-foreground hover:text-foreground"
253230
)}
254231
>
255-
<item.icon className={cn("h-4 w-4", isActive(item.path) && "text-primary")} />
232+
<item.icon className={cn("h-5 w-5", isActive(item.path) && "text-primary")} />
256233
<span className={cn(
257-
"text-[10px]",
234+
"text-[10px] sm:text-xs",
258235
isActive(item.path) ? "font-semibold" : "font-medium"
259236
)}>
260237
{item.label}

0 commit comments

Comments
 (0)