Sidebar (Floating)

1"use client"
2 
3import * as React from "react"
4 
5import { Button } from "@/registry/radix-sera/ui/button"
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/registry/radix-sera/ui/card"
13import {
14  DropdownMenu,
15  DropdownMenuContent,
16  DropdownMenuGroup,
17  DropdownMenuItem,
18  DropdownMenuTrigger,
19} from "@/registry/radix-sera/ui/dropdown-menu"
20import { Field } from "@/registry/radix-sera/ui/field"
21import {
22  Item,
23  ItemContent,
24  ItemDescription,
25  ItemMedia,
26  ItemTitle,
27} from "@/registry/radix-sera/ui/item"
28import {
29  Sidebar,
30  SidebarContent,
31  SidebarFooter,
32  SidebarGroup,
33  SidebarHeader,
34  SidebarInput,
35  SidebarInset,
36  SidebarMenu,
37  SidebarMenuButton,
38  SidebarMenuItem,
39  SidebarProvider,
40  SidebarRail,
41  SidebarTrigger,
42} from "@/registry/radix-sera/ui/sidebar"
43import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
44 
45export default function SidebarFloatingExample() {
46  const data = {
47    navMain: [
48      {
49        title: "Getting Started",
50        url: "#",
51        items: [
52          {
53            title: "Installation",
54            url: "#",
55          },
56          {
57            title: "Project Structure",
58            url: "#",
59          },
60        ],
61      },
62      {
63        title: "Build Your Application",
64        url: "#",
65        items: [
66          {
67            title: "Routing",
68            url: "#",
69          },
70          {
71            title: "Data Fetching",
72            url: "#",
73            isActive: true,
74          },
75          {
76            title: "Rendering",
77            url: "#",
78          },
79          {
80            title: "Caching",
81            url: "#",
82          },
83          {
84            title: "Styling",
85            url: "#",
86          },
87          {
88            title: "Optimizing",
89            url: "#",
90          },
91          {
92            title: "Configuring",
93            url: "#",
94          },
95          {
96            title: "Testing",
97            url: "#",
98          },
99          {
100            title: "Authentication",
101            url: "#",
102          },
103          {
104            title: "Deploying",
105            url: "#",
106          },
107          {
108            title: "Upgrading",
109            url: "#",
110          },
111          {
112            title: "Examples",
113            url: "#",
114          },
115        ],
116      },
117      {
118        title: "API Reference",
119        url: "#",
120        items: [
121          {
122            title: "Components",
123            url: "#",
124          },
125          {
126// … truncated