feat: add sidebar component

hngngn · Dec 23, 2024 · 3c601e5 · 3c601e5
1 parent afe84a9
commit 3c601e5
Show file tree

Hide file tree

Showing 10 changed files with 1,910 additions and 1 deletion.
diff --git a/docs/public/registry/index.json b/docs/public/registry/index.json
@@ -311,6 +311,16 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "sidebar",
+    "dependencies": [
+      "@kobalte/core"
+    ],
+    "files": [
+      "ui/sidebar.tsx"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "skeleton",
     "files": [

diff --git a/docs/scripts/utils/index.ts b/docs/scripts/utils/index.ts
@@ -183,6 +183,12 @@ const ui = [
 		dependencies: ["@kobalte/core"],
 		files: ["ui/sheet.tsx"],
 	},
+	{
+		name: "sidebar",
+		type: "components:ui",
+		dependencies: ["@kobalte/core"],
+		files: ["ui/sidebar.tsx"],
+	},
 	{
 		name: "skeleton",
 		type: "components:ui",
@@ -561,6 +567,11 @@ const example = [
 		type: "components:example",
 		files: ["examples/sheet-side.tsx"],
 	},
+	{
+		name: "sidebar-demo",
+		type: "components:example",
+		files: ["examples/sidebar-demo.tsx"],
+	},
 	{
 		name: "skeleton-demo",
 		type: "components:example",

diff --git a/docs/src/__registry__/index.js b/docs/src/__registry__/index.js
@@ -376,6 +376,12 @@ export const Index = {
       registryDependencies: undefined,
       component: lazy(() => import("../examples/sheet-side"))
     },
+    "sidebar-demo": {
+      name: "sidebar-demo",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: lazy(() => import("../examples/sidebar-demo"))
+    },
     "skeleton-demo": {
       name: "skeleton-demo",
       type: "components:example",

diff --git a/docs/src/config/docs.ts b/docs/src/config/docs.ts
@@ -244,6 +244,12 @@ export const docsConfig: TDocsConfig = {
 					href: "/docs/components/sheet",
 					items: [],
 				},
+				{
+					title: "Sidebar",
+					href: "/docs/components/sidebar",
+					items: [],
+					label: "New",
+				},
 				{
 					title: "Skeleton",
 					href: "/docs/components/skeleton",

diff --git a/docs/src/data/docs/cli.mdx b/docs/src/data/docs/cli.mdx
@@ -86,6 +86,7 @@ You will be presented with a list of components to choose from:
 │  ◻ select
 │  ◻ separator
 │  ◻ sheet
+│  ◻ sidebar
 │  ◻ skeleton
 │  ◻ switch
 │  ◻ table

diff --git a/docs/src/data/docs/components/sidebar.mdx b/docs/src/data/docs/components/sidebar.mdx
@@ -0,0 +1,100 @@
+---
+title: Sidebar
+description: A composable, themeable and customizable sidebar component.
+component: true
+---
+
+import ComponentInstallation from "@/components/component-installation";
+import ComponentPreview from "@/components/component-preview";
+
+<ComponentPreview name="sidebar-demo" client:only="solid-js">
+  <Fragment slot="code">
+    ```tsx file=<rootDir>/src/examples/sidebar-demo.tsx
+    ```
+  </Fragment>
+</ComponentPreview>
+
+## Installation
+
+<ComponentInstallation client:only="solid-js">
+
+  <Fragment slot="cli">
+    ```bash
+    npx shadcn-solid@latest add sidebar
+    ```
+  </Fragment>
+
+  <Step slot="tw">
+
+    <StepItem>Install the following dependencies:</StepItem>
+    ```bash
+    npm install @kobalte/core
+    ```
+
+    <StepItem>Copy and paste the following code into your project:</StepItem>
+    ```tsx file=<rootDir>/../packages/tailwindcss/ui/sidebar.tsx
+    ```
+
+  </Step>
+
+  <Step slot="uno">
+
+    <StepItem>Install the following dependencies:</StepItem>
+    ```bash
+    npm install @kobalte/core
+    ```
+
+    <StepItem>Copy and paste the following code into your project:</StepItem>
+    ```tsx file=<rootDir>/../packages/unocss/ui/sidebar.tsx
+    ```
+
+  </Step>
+
+</ComponentInstallation>
+
+## Usage
+
+```tsx showLineNumbers title="src/app.tsx"
+
+export default function App() {
+return (
+<Router
+  root={(props) => (
+    <MetaProvider>
+      <Title>My App</Title>
+      <Suspense>{props.children}</Suspense>
+    </MetaProvider>
+  )}
+>
+  <FileRoutes />
+</Router>
+);
+}
+```
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import {
+Sidebar,
+SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+} from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+return (
+<Sidebar>
+  <SidebarHeader />
+  <SidebarContent>
+    <SidebarGroup />
+    <SidebarGroup />
+  </SidebarContent>
+  <SidebarFooter />
+</Sidebar>
+)
+}
+```
+
+## Examples
+
+###
diff --git a/docs/src/data/docs/installation/solid-start.mdx b/docs/src/data/docs/installation/solid-start.mdx
@@ -17,7 +17,7 @@ pnpm create solid@latest
 
 ### Path Aliases
 
-I'm use the `@` alias to make it easier to import your components. This is how you can configure it:
+I use the `@` alias to make it easier to import your components. This is how you can configure it:
 
 ```json title="tsconfig.json"{3-6}
 {

diff --git a/docs/src/examples/sidebar-demo.tsx b/docs/src/examples/sidebar-demo.tsx
@@ -0,0 +1,165 @@
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarProvider,
+	SidebarTrigger,
+} from "@repo/tailwindcss/ui/sidebar";
+import { For, JSX } from "solid-js";
+
+type MenuItem = {
+	title: string;
+	url: string;
+	icon: () => JSX.Element;
+};
+
+const items: MenuItem[] = [
+	{
+		title: "Home",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-house"
+			>
+				<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+				<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+			</svg>
+		),
+	},
+	{
+		title: "Inbox",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-inbox"
+			>
+				<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+				<path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+			</svg>
+		),
+	},
+	{
+		title: "Calendar",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-calendar"
+			>
+				<path d="M8 2v4" />
+				<path d="M16 2v4" />
+				<rect width="18" height="18" x="3" y="4" rx="2" />
+				<path d="M3 10h18" />
+			</svg>
+		),
+	},
+	{
+		title: "Search",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-search"
+			>
+				<circle cx="11" cy="11" r="8" />
+				<path d="m21 21-4.3-4.3" />
+			</svg>
+		),
+	},
+	{
+		title: "Settings",
+		url: "#",
+		icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-settings"
+			>
+				<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+				<circle cx="12" cy="12" r="3" />
+			</svg>
+		),
+	},
+];
+
+export default function AppSidebar() {
+	return (
+		<SidebarProvider>
+			<Sidebar>
+				<SidebarContent>
+					<SidebarGroup>
+						<SidebarGroupLabel>Application</SidebarGroupLabel>
+						<SidebarGroupContent>
+							<SidebarMenu>
+								<For each={items}>
+									{(item) => (
+										<SidebarMenuItem>
+											<SidebarMenuButton>
+												<a href={item.url}>
+													<item.icon />
+													<span>{item.title}</span>
+												</a>
+											</SidebarMenuButton>
+										</SidebarMenuItem>
+									)}
+								</For>
+							</SidebarMenu>
+						</SidebarGroupContent>
+					</SidebarGroup>
+				</SidebarContent>
+			</Sidebar>
+			<SidebarInset>
+				<header class="flex items-center justify-between px-4 h-12">
+					<SidebarTrigger />
+				</header>
+			</SidebarInset>
+		</SidebarProvider>
+	);
+}