Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add sidebar component #136

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add sidebar component #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions docs/public/registry/frameworks/tailwindcss/sidebar.json
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions docs/public/registry/frameworks/unocss/sidebar.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions docs/public/registry/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,16 @@
],
"type": "components:ui"
},
{
"name": "sidebar",
"dependencies": [
"@kobalte/core"
],
"files": [
"ui/sidebar.tsx"
],
"type": "components:ui"
},
{
"name": "skeleton",
"files": [
Expand Down
11 changes: 11 additions & 0 deletions docs/scripts/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
6 changes: 6 additions & 0 deletions docs/src/__registry__/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
6 changes: 6 additions & 0 deletions docs/src/config/docs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions docs/src/data/docs/cli.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ You will be presented with a list of components to choose from:
│ ◻ select
│ ◻ separator
│ ◻ sheet
│ ◻ sidebar
│ ◻ skeleton
│ ◻ switch
│ ◻ table
Expand Down
100 changes: 100 additions & 0 deletions docs/src/data/docs/components/sidebar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

###
2 changes: 1 addition & 1 deletion docs/src/data/docs/installation/solid-start.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
{
Expand Down
165 changes: 165 additions & 0 deletions docs/src/examples/sidebar-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading