wrongmove/frontend/src/AppSidebar.tsx

import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarRail,
} from "@/components/ui/sidebar"
import * as React from "react"

const data = {
    navMain: [
        {
            title: "Property Explorer",
            url: "#",
            items: [
                {
                    title: "Map View",
                    url: "#",
                    isActive: true,
                },
                {
                    title: "List View",
                    url: "#",
                },
            ],
        },
        {
            title: "Data Management",
            url: "#",
            items: [
                {
                    title: "Refresh Listings",
                    url: "#",
                },
                {
                    title: "Active Tasks",
                    url: "#",
                },
            ],
        },
        {
            title: "Settings",
            url: "#",
            items: [
                {
                    title: "Preferences",
                    url: "#",
                },
                {
                    title: "Account",
                    url: "#",
                },
            ],
        },
    ],
}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
    return (
        <Sidebar {...props}>
            <SidebarHeader>
            </SidebarHeader>
            <SidebarContent>
                {data.navMain.map((item) => (
                    <SidebarGroup key={item.title}>
                        <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
                        <SidebarGroupContent>
                            <SidebarMenu>
                                {item.items.map((subItem) => (
                                    <SidebarMenuItem key={subItem.title}>
                                        <SidebarMenuButton asChild isActive={subItem.isActive}>
                                            <a href={subItem.url}>{subItem.title}</a>
                                        </SidebarMenuButton>
                                    </SidebarMenuItem>
                                ))}
                            </SidebarMenu>
                        </SidebarGroupContent>
                    </SidebarGroup>
                ))}
            </SidebarContent>
            <SidebarRail />
        </Sidebar>
    )
}