Files
drinktracker/src/components/layout/bottom-nav.tsx
JP Scott 2ac2c4b2d4 Add My Bar, Bartender, Recommend features + drink images
- Drink Images: upload/display photos of bottles/cans on drink cards and detail pages
- My Bar: inventory tracker for spirits, liqueurs, mixers, bitters, garnishes, tools
- Bartender: AI-powered cocktail recipe generation, "what can I make" suggestions,
  saved recipes. Cross-references bar inventory for ingredient availability.
- Recommend: AI flavor profile analysis, personalized drink recommendations,
  "find similar" drinks based on highly-rated favorites
- Navigation: desktop sidebar with all 8 routes, mobile bottom nav with
  4 primary items + "More" popup menu
- New Prisma models: BarItem, Recipe, FlavorProfile
- Backup/restore updated to include bar items

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 18:28:02 -07:00

45 lines
1.3 KiB
TypeScript

"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { LayoutDashboard, Wine, FlaskConical, GlassWater } from "lucide-react"
import { cn } from "@/lib/utils"
import { MoreMenu } from "./more-menu"
const primaryItems = [
{ href: "/dashboard", label: "Home", icon: LayoutDashboard },
{ href: "/drinks", label: "Drinks", icon: Wine },
{ href: "/bar", label: "Bar", icon: FlaskConical },
{ href: "/bartender", label: "Mix", icon: GlassWater },
]
export function BottomNav() {
const pathname = usePathname()
return (
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-card border-t safe-area-bottom">
<div className="flex items-center justify-around h-16">
{primaryItems.map((item) => {
const isActive = pathname.startsWith(item.href)
return (
<Link
key={item.href}
href={item.href}
className={cn(
"flex flex-col items-center gap-1 px-3 py-2 text-xs font-medium transition-colors min-w-[64px]",
isActive
? "text-primary"
: "text-muted-foreground"
)}
>
<item.icon className="h-5 w-5" />
{item.label}
</Link>
)
})}
<MoreMenu />
</div>
</nav>
)
}