Skip to content

Commit e0ed12b

Browse files
TheOrcDevTheOrcDev
authored
feat(registry) add sidebar component (#170)
1 parent a95ddae commit e0ed12b

File tree

5 files changed

+293
-0
lines changed

5 files changed

+293
-0
lines changed

‎app/docs/components/sidebar/page.tsx‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import { Metadata } from "next"
2+
import { Press_Start_2P } from "next/font/google"
3+
import Link from "next/link"
4+
import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
5+
6+
import { buttonMetaData } from "@/lib/metadata"
7+
import { Skeleton } from "@/components/ui/8bit/skeleton"
8+
import { Separator } from "@/components/ui/separator"
9+
import {
10+
Sidebar,
11+
SidebarContent,
12+
SidebarGroup,
13+
SidebarGroupContent,
14+
SidebarGroupLabel,
15+
SidebarMenu,
16+
SidebarMenuButton,
17+
SidebarMenuItem,
18+
SidebarProvider,
19+
SidebarTrigger,
20+
} from "@/components/ui/sidebar"
21+
22+
import CodeSnippet from "../code-snippet"
23+
import CopyCommandButton from "../copy-command-button"
24+
import InstallationCommands from "../installation-commands"
25+
import { OpenInV0Button } from "../open-in-v0-button"
26+
27+
export const metadata: Metadata = {
28+
title: "8bit Sidebar",
29+
description:
30+
"Displays a sidebar or a component that looks like a 8-bit sidebar.",
31+
openGraph: {
32+
images: buttonMetaData,
33+
},
34+
}
35+
36+
const pressStart = Press_Start_2P({
37+
weight: ["400"],
38+
subsets: ["latin"],
39+
})
40+
41+
// Menu items.
42+
const items = [
43+
{
44+
title: "Home",
45+
url: "#",
46+
icon: Home,
47+
},
48+
{
49+
title: "Inbox",
50+
url: "#",
51+
icon: Inbox,
52+
},
53+
{
54+
title: "Calendar",
55+
url: "#",
56+
icon: Calendar,
57+
},
58+
{
59+
title: "Search",
60+
url: "#",
61+
icon: Search,
62+
},
63+
{
64+
title: "Settings",
65+
url: "#",
66+
icon: Settings,
67+
},
68+
]
69+
70+
export default function SidebarPage() {
71+
return (
72+
<div className="flex flex-col gap-4">
73+
<div className="flex flex-col md:flex-row items-center justify-between gap-2">
74+
<h1 className="text-3xl font-bold">Sidebar</h1>
75+
<CopyCommandButton
76+
copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-sidebar.json`}
77+
command={"pnpm dlx shadcn@canary add 8bit-sidebar"}
78+
/>
79+
</div>
80+
81+
<p className="text-muted-foreground">
82+
Displays a sidebar or a component that looks like a 8-bit sidebar.
83+
</p>
84+
85+
<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
86+
<div className="flex items-center justify-between">
87+
<h2 className="text-sm text-muted-foreground sm:pl-3">
88+
A simple 8-bit sidebar component
89+
</h2>
90+
91+
<div className="flex items-center gap-2">
92+
<OpenInV0Button name="8bit-sidebar" className="w-fit" />
93+
</div>
94+
</div>
95+
<div className="relative flex min-h-[400px] h-[450px] w-full">
96+
<SidebarProvider>
97+
<div className="flex border w-full h-[450px]">
98+
<Sidebar
99+
collapsible="none"
100+
className={`${pressStart.className} border-r-4 border-foreground dark:border-ring`}
101+
>
102+
<SidebarContent>
103+
<SidebarGroup>
104+
<SidebarGroupLabel>Application</SidebarGroupLabel>
105+
<SidebarGroupContent>
106+
<SidebarMenu>
107+
{items.map((item) => (
108+
<SidebarMenuItem key={item.title}>
109+
<SidebarMenuButton asChild>
110+
<a href={item.url}>
111+
<item.icon />
112+
<span>{item.title}</span>
113+
</a>
114+
</SidebarMenuButton>
115+
</SidebarMenuItem>
116+
))}
117+
</SidebarMenu>
118+
</SidebarGroupContent>
119+
</SidebarGroup>
120+
</SidebarContent>
121+
</Sidebar>
122+
123+
<div className="bg-accent w-full px-5 py-3 gap-5 hidden md:flex flex-col">
124+
<SidebarTrigger className="-ml-1" />
125+
<Skeleton className="h-[225px] w-full rounded-xl" />
126+
<div className="flex gap-5">
127+
<Skeleton className="h-[125px] w-full rounded-xl" />
128+
<Skeleton className="h-[125px] w-full rounded-xl" />
129+
<Skeleton className="h-[125px] w-full rounded-xl" />
130+
</div>
131+
</div>
132+
</div>
133+
</SidebarProvider>
134+
</div>
135+
</div>
136+
137+
<h3 className="text-lg font-bold">Installation</h3>
138+
139+
<Separator />
140+
141+
<InstallationCommands
142+
packageUrl={`${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-sidebar.json`}
143+
/>
144+
145+
<h3 className="text-lg font-bold mt-10">Usage</h3>
146+
147+
<Separator />
148+
149+
<p>
150+
8bit sidebar is using Shadcn sidebar component. All you need to do is
151+
replace your app sidebar with 8bit sidebar.
152+
</p>
153+
154+
<p>For more information, check out the:</p>
155+
<Link
156+
href="https://ui.shadcn.com/docs/components/sidebar"
157+
target="_blank"
158+
rel="noopener noreferrer"
159+
className="text-primary underline hover:text-primary/80"
160+
>
161+
Shadcn Sidebar documentation
162+
</Link>
163+
164+
<h3 className="text-lg font-bold mt-10">In your layout file:</h3>
165+
<CodeSnippet>{`import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
166+
import { AppSidebar } from "@/components/ui/8bit/blocks/sidebar"
167+
168+
export default function Layout({ children }: { children: React.ReactNode }) {
169+
return (
170+
<SidebarProvider>
171+
<AppSidebar />
172+
<main>
173+
<SidebarTrigger />
174+
{children}
175+
</main>
176+
</SidebarProvider>
177+
)
178+
}`}</CodeSnippet>
179+
</div>
180+
)
181+
}

‎components/ui/8bit/blocks/sidebar.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { Press_Start_2P } from "next/font/google"
2+
import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
3+
4+
import {
5+
Sidebar,
6+
SidebarContent,
7+
SidebarGroup,
8+
SidebarGroupContent,
9+
SidebarGroupLabel,
10+
SidebarMenu,
11+
SidebarMenuButton,
12+
SidebarMenuItem,
13+
} from "@/components/ui/sidebar"
14+
15+
const pressStart = Press_Start_2P({
16+
weight: ["400"],
17+
subsets: ["latin"],
18+
})
19+
20+
// Menu items.
21+
const items = [
22+
{
23+
title: "Home",
24+
url: "#",
25+
icon: Home,
26+
},
27+
{
28+
title: "Inbox",
29+
url: "#",
30+
icon: Inbox,
31+
},
32+
{
33+
title: "Calendar",
34+
url: "#",
35+
icon: Calendar,
36+
},
37+
{
38+
title: "Search",
39+
url: "#",
40+
icon: Search,
41+
},
42+
{
43+
title: "Settings",
44+
url: "#",
45+
icon: Settings,
46+
},
47+
]
48+
49+
export function AppSidebar() {
50+
return (
51+
<Sidebar
52+
className={`${pressStart.className} border-r-4 border-foreground dark:border-ring`}
53+
>
54+
<SidebarContent>
55+
<SidebarGroup>
56+
<SidebarGroupLabel>Application</SidebarGroupLabel>
57+
<SidebarGroupContent>
58+
<SidebarMenu>
59+
{items.map((item) => (
60+
<SidebarMenuItem key={item.title}>
61+
<SidebarMenuButton asChild>
62+
<a href={item.url}>
63+
<item.icon />
64+
<span>{item.title}</span>
65+
</a>
66+
</SidebarMenuButton>
67+
</SidebarMenuItem>
68+
))}
69+
</SidebarMenu>
70+
</SidebarGroupContent>
71+
</SidebarGroup>
72+
</SidebarContent>
73+
</Sidebar>
74+
)
75+
}

‎config/nav-items.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,11 @@ export const navItems = {
110110
title: "Sheet",
111111
url: "/docs/components/sheet",
112112
},
113+
{
114+
title: "Sidebar",
115+
url: "/docs/components/sidebar",
116+
new: true,
117+
},
113118
{
114119
title: "Skeleton",
115120
url: "/docs/components/skeleton",

‎public/r/8bit-sidebar.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
3+
"name": "8bit-sidebar",
4+
"type": "registry:component",
5+
"title": "8-bit Sidebar",
6+
"description": "A simple 8-bit sidebar component",
7+
"registryDependencies": [
8+
"sidebar"
9+
],
10+
"files": [
11+
{
12+
"path": "components/ui/8bit/blocks/sidebar.tsx",
13+
"content": "import { Press_Start_2P } from \"next/font/google\"\nimport { Calendar, Home, Inbox, Search, Settings } from \"lucide-react\"\n\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst pressStart = Press_Start_2P({\n weight: [\"400\"],\n subsets: [\"latin\"],\n})\n\n// Menu items.\nconst items = [\n {\n title: \"Home\",\n url: \"#\",\n icon: Home,\n },\n {\n title: \"Inbox\",\n url: \"#\",\n icon: Inbox,\n },\n {\n title: \"Calendar\",\n url: \"#\",\n icon: Calendar,\n },\n {\n title: \"Search\",\n url: \"#\",\n icon: Search,\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: Settings,\n },\n]\n\nexport function AppSidebar() {\n return (\n <Sidebar\n className={`${pressStart.className} border-r-4 border-foreground dark:border-ring`}\n >\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Application</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {items.map((item) => (\n <SidebarMenuItem key={item.title}>\n <SidebarMenuButton asChild>\n <a href={item.url}>\n <item.icon />\n <span>{item.title}</span>\n </a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n </Sidebar>\n )\n}\n",
14+
"type": "registry:component",
15+
"target": "components/ui/8bit/blocks/sidebar.tsx"
16+
}
17+
]
18+
}

‎registry.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -671,6 +671,20 @@
671671
"target": "components/ui/8bit/toggle-group.tsx"
672672
}
673673
]
674+
},
675+
{
676+
"name": "8bit-sidebar",
677+
"type": "registry:component",
678+
"title": "8-bit Sidebar",
679+
"description": "A simple 8-bit sidebar component",
680+
"registryDependencies": ["sidebar"],
681+
"files": [
682+
{
683+
"path": "components/ui/8bit/blocks/sidebar.tsx",
684+
"type": "registry:component",
685+
"target": "components/ui/8bit/blocks/sidebar.tsx"
686+
}
687+
]
674688
}
675689
]
676690
}

0 commit comments

Comments
 (0)