MobileSidebar

import { GiddaaLogo } from "@giddaa-housing/ui/logo";
import { MobileSidebar } from "@giddaa-housing/ui/mobile-sidebar";
import { HouseIcon } from "lucide-react";

<MobileSidebar.Root>
	<MobileSidebar.Trigger aria-label="Open main navigation" />
	<MobileSidebar.Content>
		<MobileSidebar.Header>
			<GiddaaLogo className="h-[38px] w-[90px] text-fg-brand" />
			<MobileSidebar.Title>Main navigation</MobileSidebar.Title>
			<MobileSidebar.Close aria-label="Close main navigation" />
		</MobileSidebar.Header>
		<MobileSidebar.Body>
			<MobileSidebar.Nav aria-label="Main navigation">
				<MobileSidebar.List>
					<MobileSidebar.Item>
						<MobileSidebar.Group>
							<MobileSidebar.GroupTrigger icon={<HouseIcon />}>
								Houses
							</MobileSidebar.GroupTrigger>
							<MobileSidebar.GroupPanel>
								<MobileSidebar.SubList>
									<li>
										<MobileSidebar.SubLink href="/houses">
											Browse all homes
										</MobileSidebar.SubLink>
									</li>
								</MobileSidebar.SubList>
							</MobileSidebar.GroupPanel>
						</MobileSidebar.Group>
					</MobileSidebar.Item>
					<MobileSidebar.Item>
						<MobileSidebar.Link href="/agents">Agents</MobileSidebar.Link>
					</MobileSidebar.Item>
				</MobileSidebar.List>
			</MobileSidebar.Nav>
		</MobileSidebar.Body>
	</MobileSidebar.Content>
</MobileSidebar.Root>;