runfoo-org/fediversion
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Mobile-optimized band selector with sheet drawer
Some checks failed
Deploy Fediversion / deploy (push) Failing after 1s
Details

Browse source 
- Desktop: Existing dropdown menu
- Mobile: Bottom sheet with large touch targets (h-14)
- Uses responsive classes (hidden md:block / md:hidden)
This commit is contained in:
fullsizemalt 2025-12-28 16:41:25 -08:00
parent 8718fc663a
commit fe81271ab3
1 changed files with 77 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
frontend/components/layout/band-selector.tsx
View file

@ -1,7 +1,7 @@
"use client" "use client"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { ChevronDown } from "lucide-react" import { ChevronDown, Music } from "lucide-react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { import {
DropdownMenu, DropdownMenu,
@ -9,39 +9,93 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu" } from "@/components/ui/dropdown-menu"
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
import { useVertical, VERTICALS, VerticalSlug } from "@/contexts/vertical-context" import { useVertical, VERTICALS, VerticalSlug } from "@/contexts/vertical-context"
import { useState } from "react"
export function BandSelector() { export function BandSelector() {
const { current, setCurrent } = useVertical() const { current, setCurrent } = useVertical()
const router = useRouter() const router = useRouter()
const [sheetOpen, setSheetOpen] = useState(false)
const handleSelect = (slug: VerticalSlug) => { const handleSelect = (slug: VerticalSlug) => {
setCurrent(slug) setCurrent(slug)
router.push(`/${slug}`) router.push(`/${slug}`)
setSheetOpen(false)
} }
// Desktop: Dropdown menu
// Mobile: Sheet drawer
return ( return (
<DropdownMenu> <>
<DropdownMenuTrigger asChild> {/* Desktop Dropdown (hidden on mobile) */}
<Button <div className="hidden md:block">
variant="ghost" <DropdownMenu>
className="flex items-center gap-2 font-bold text-lg" <DropdownMenuTrigger asChild>
> <Button
<span>{current.name}</span> variant="ghost"
<ChevronDown className="h-4 w-4 opacity-50" /> className="flex items-center gap-2 font-bold text-lg"
</Button> >
</DropdownMenuTrigger> <span>{current.name}</span>
<DropdownMenuContent align="start" className="w-56"> <ChevronDown className="h-4 w-4 opacity-50" />
{VERTICALS.map((vertical) => ( </Button>
<DropdownMenuItem </DropdownMenuTrigger>
key={vertical.slug} <DropdownMenuContent align="start" className="w-56">
onClick={() => handleSelect(vertical.slug)} {VERTICALS.map((vertical) => (
className={`cursor-pointer ${vertical.slug === current.slug ? "font-bold" : ""}`} <DropdownMenuItem
> key={vertical.slug}
{vertical.name} onClick={() => handleSelect(vertical.slug)}
</DropdownMenuItem> className={`cursor-pointer ${vertical.slug === current.slug ? "font-bold" : ""}`}
))} >
</DropdownMenuContent> {vertical.name}
</DropdownMenu> </DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* Mobile Sheet (hidden on desktop) */}
<div className="md:hidden">
<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
<SheetTrigger asChild>
<Button
variant="ghost"
size="lg"
className="flex items-center gap-2 font-bold text-lg px-3"
>
<span>{current.name}</span>
<ChevronDown className="h-4 w-4 opacity-50" />
</Button>
</SheetTrigger>
<SheetContent side="bottom" className="h-[60vh]">
<SheetHeader>
<SheetTitle className="flex items-center gap-2">
<Music className="h-5 w-5" />
Switch Band
</SheetTitle>
</SheetHeader>
<div className="grid gap-2 py-4">
{VERTICALS.map((vertical) => (
<Button
key={vertical.slug}
variant={vertical.slug === current.slug ? "default" : "outline"}
size="lg"
className="w-full justify-start text-lg h-14"
onClick={() => handleSelect(vertical.slug)}
>
{vertical.name}
</Button>
))}
</div>
</SheetContent>
</Sheet>
</div>
</>
) )
} }