add sidebar to map view

src/app/student/map/_components/MainView.tsx

@@ -1,3 +1,32 @@
+"use client"
+
+import { MapComponent } from "@/app/student/map/_components/MapComponent"
+import Sidebar from "@/app/student/map/_components/Sidebar"
+import { useState } from "react"
+import { BoothMap } from "../lib/booths"
+import { LocationId, locations, Location } from "../lib/locations"
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue
+} from "@/components/ui/select"
+import { Exhibitor } from "@/components/shared/hooks/api/useExhibitors"
+
+export default function MainView({ boothMap, exhibitors }: { boothMap: BoothMap, exhibitors: Exhibitor[] }) {
+	const [locationId, setLocationId] = useState<LocationId>("nymble/1")
+	const location = locations.find(loc => loc.id === locationId)!
+
+	return (
+		<div className="flex h-full w-full flex-col relative">
+			<Sidebar exhibitors={exhibitors} />
+			<MapComponent boothMap={boothMap} />
+			<SelectLocation locationId={locationId} setLocationId={setLocationId} />
+		</div>
+	)
+}
+
 function SelectLocation({
 	locationId,
 	setLocationId

src/app/student/map/_components/Sidebar.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { useScreenSize } from "@/components/shared/hooks/useScreenSize"
+import { Exhibitor } from "@/components/shared/hooks/api/useExhibitors"
+import { Drawer, DrawerContent } from "@/components/ui/drawer"
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+
+export default function Sidebar({ exhibitors }: { exhibitors: Exhibitor[] }) {
+	const { width } = useScreenSize()
+	const isMobile = width ? width <= 640 : false
+
+	return (
+		<SidebarContainer isMobile={isMobile}>
+			<ul className="p-2">
+				{exhibitors.map(exhibitor => (
+					<li key={exhibitor.id}>{exhibitor.name}</li>
+				))}
+			</ul>
+		</SidebarContainer>
+	)
+}
+
+function SidebarContainer({
+	isMobile,
+	children
+}: {
+	isMobile: boolean
+	children: React.ReactNode
+}) {
+	const [open, setOpen] = useState<boolean>(true)
+
+	if (!open) {
+		return (
+			<Button
+				variant="secondary"
+				onClick={() => setOpen(true)}
+				className={cn(
+					"absolute z-10 dark:bg-transparent",
+					isMobile ? "bottom-1 mx-auto self-center" : "left-1 top-1"
+				)}>
+				Open sidebar
+			</Button>
+		)
+	}
+
+	return (
+		<Drawer
+			noBodyStyles={true}
+			modal={false}
+			setBackgroundColorOnScale={false}
+			shouldScaleBackground={false}
+			open={open}
+			// snapPoints={[0.5]}
+			onOpenChange={open => {
+				setOpen(open)
+			}}
+			direction={isMobile ? "bottom" : "left"}>
+			<DrawerContent
+				withHandle={isMobile}
+				className={cn(
+					"z-10 focus-visible:outline-none",
+					isMobile
+						? "h-[50%] w-full"
+						: "top-16 h-full w-[50%] max-w-[600px] rounded-none rounded-e-[10px] pb-16 pr-2"
+				)}>
+				<ScrollArea className="h-full">
+					{children}
+					<ScrollBar></ScrollBar>
+				</ScrollArea>
+			</DrawerContent>
+		</Drawer>
+	)
+}

src/components/ui/drawer.tsx

@@ -37,18 +37,22 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 
 const DrawerContent = React.forwardRef<
 	React.ElementRef<typeof DrawerPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+		withHandle?: boolean
+	}
+>(({ className, children, withHandle = true, ...props }, ref) => (
 	<DrawerPortal>
 		<DrawerOverlay />
 		<DrawerPrimitive.Content
 			ref={ref}
 			className={cn(
 				"fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-[10px] border border-stone-200 bg-white dark:border-stone-800 dark:bg-stone-950",
-				className,
+				className
 			)}
 			{...props}>
-			<div className="mx-auto min-h-1 my-3 w-[80px] rounded-full bg-stone-400" />
+			{withHandle && (
+				<div className="mx-auto my-3 min-h-1 w-[80px] rounded-full bg-stone-400" />
+			)}
 			<div className="overflow-y-auto">{children}</div>
 		</DrawerPrimitive.Content>
 	</DrawerPortal>