Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add sidebars block (2/2)

Browse Source
This commit is contained in:
zernonia 2024-11-25 13:35:17 +08:00
parent 360e55fd3d
commit 99c685e411
96 changed files with 8556 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

936
apps/www/__registry__/block.ts
View File

@ -195,7 +195,7 @@ export const Index: Record<string, any> = {
name: "Sidebar01",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
files: [{
path: "registry/new-york/block/Sidebar01/page.vue",
type: "registry:page",
@ -469,6 +469,238 @@ export const Index: Record<string, any> = {
category: "",
subcategory: ""
},
"Sidebar10": {
name: "Sidebar10",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
files: [{
path: "registry/new-york/block/Sidebar10/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar10/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavActions.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavActions.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavFavorites.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavFavorites.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavMain.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavMain.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavSecondary.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavSecondary.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavWorkspaces.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/TeamSwitcher.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar10/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar10/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar11": {
name: "Sidebar11",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
files: [{
path: "registry/new-york/block/Sidebar11/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar11/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar11/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar11/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar11/components/Tree.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar11/components/Tree.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar11/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar11/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar12": {
name: "Sidebar12",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
files: [{
path: "registry/new-york/block/Sidebar12/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar12/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar12/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar12/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar12/components/Calendars.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar12/components/Calendars.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar12/components/DatePicker.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar12/components/DatePicker.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar12/components/NavUser.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar12/components/NavUser.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar12/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar12/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar13": {
name: "Sidebar13",
description: "",
type: "registry:block",
registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
files: [{
path: "registry/new-york/block/Sidebar13/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar13/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar13/components/SettingsDialog.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar13/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar13/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar14": {
name: "Sidebar14",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
files: [{
path: "registry/new-york/block/Sidebar14/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar14/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar14/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar14/components/AppSidebar.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar14/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar14/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar15": {
name: "Sidebar15",
description: "",
type: "registry:block",
registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
files: [{
path: "registry/new-york/block/Sidebar15/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/Calendars.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/Calendars.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/DatePicker.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/DatePicker.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavFavorites.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavFavorites.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavMain.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavMain.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavSecondary.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavSecondary.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavUser.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavUser.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavWorkspaces.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/SidebarLeft.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/SidebarRight.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/SidebarRight.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/TeamSwitcher.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Authentication01": {
name: "Authentication01",
description: "",
@ -660,7 +892,7 @@ export const Index: Record<string, any> = {
name: "Sidebar01",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
files: [{
path: "registry/new-york/block/Sidebar01/page.vue",
type: "registry:page",
@ -934,6 +1166,238 @@ export const Index: Record<string, any> = {
category: "",
subcategory: ""
},
"Sidebar10": {
name: "Sidebar10",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
files: [{
path: "registry/new-york/block/Sidebar10/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar10/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavActions.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavActions.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavFavorites.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavFavorites.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavMain.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavMain.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavSecondary.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavSecondary.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/NavWorkspaces.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar10/components/TeamSwitcher.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar10/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar10/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar11": {
name: "Sidebar11",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
files: [{
path: "registry/new-york/block/Sidebar11/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar11/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar11/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar11/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar11/components/Tree.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar11/components/Tree.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar11/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar11/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar12": {
name: "Sidebar12",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
files: [{
path: "registry/new-york/block/Sidebar12/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar12/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar12/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar12/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar12/components/Calendars.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar12/components/Calendars.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar12/components/DatePicker.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar12/components/DatePicker.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar12/components/NavUser.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar12/components/NavUser.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar12/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar12/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar13": {
name: "Sidebar13",
description: "",
type: "registry:block",
registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
files: [{
path: "registry/new-york/block/Sidebar13/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar13/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar13/components/SettingsDialog.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar13/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar13/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar14": {
name: "Sidebar14",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
files: [{
path: "registry/new-york/block/Sidebar14/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar14/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar14/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar14/components/AppSidebar.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar14/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar14/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar15": {
name: "Sidebar15",
description: "",
type: "registry:block",
registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
files: [{
path: "registry/new-york/block/Sidebar15/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/Calendars.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/Calendars.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/DatePicker.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/DatePicker.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavFavorites.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavFavorites.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavMain.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavMain.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavSecondary.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavSecondary.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavUser.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavUser.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/NavWorkspaces.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/SidebarLeft.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/SidebarRight.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/SidebarRight.vue?raw").then((m) => m.default)
},{
path: "registry/new-york/block/Sidebar15/components/TeamSwitcher.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
raw: () => import("@/registry/new-york/block/Sidebar15/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
}, "default": {
"Authentication01": {
name: "Authentication01",
@ -1126,7 +1590,7 @@ export const Index: Record<string, any> = {
name: "Sidebar01",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
files: [{
path: "registry/default/block/Sidebar01/page.vue",
type: "registry:page",
@ -1400,6 +1864,238 @@ export const Index: Record<string, any> = {
category: "",
subcategory: ""
},
"Sidebar10": {
name: "Sidebar10",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
files: [{
path: "registry/default/block/Sidebar10/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar10/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavActions.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavActions.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavFavorites.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavFavorites.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavMain.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavMain.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavSecondary.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavSecondary.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavWorkspaces.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavWorkspaces.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/TeamSwitcher.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/TeamSwitcher.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar10/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar10/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar11": {
name: "Sidebar11",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
files: [{
path: "registry/default/block/Sidebar11/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar11/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar11/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar11/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar11/components/Tree.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar11/components/Tree.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar11/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar11/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar12": {
name: "Sidebar12",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
files: [{
path: "registry/default/block/Sidebar12/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar12/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar12/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar12/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar12/components/Calendars.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar12/components/Calendars.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar12/components/DatePicker.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar12/components/DatePicker.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar12/components/NavUser.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar12/components/NavUser.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar12/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar12/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar13": {
name: "Sidebar13",
description: "",
type: "registry:block",
registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
files: [{
path: "registry/default/block/Sidebar13/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar13/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar13/components/SettingsDialog.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar13/components/SettingsDialog.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar13/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar13/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar14": {
name: "Sidebar14",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
files: [{
path: "registry/default/block/Sidebar14/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar14/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar14/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar14/components/AppSidebar.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar14/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar14/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar15": {
name: "Sidebar15",
description: "",
type: "registry:block",
registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
files: [{
path: "registry/default/block/Sidebar15/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar15/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/Calendars.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/Calendars.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/DatePicker.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/DatePicker.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavFavorites.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavFavorites.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavMain.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavMain.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavSecondary.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavSecondary.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavUser.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavUser.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavWorkspaces.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavWorkspaces.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/SidebarLeft.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/SidebarLeft.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/SidebarRight.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/SidebarRight.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/TeamSwitcher.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/TeamSwitcher.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar15/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar15/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Authentication01": {
name: "Authentication01",
description: "",
@ -1591,7 +2287,7 @@ export const Index: Record<string, any> = {
name: "Sidebar01",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
files: [{
path: "registry/default/block/Sidebar01/page.vue",
type: "registry:page",
@ -1865,6 +2561,238 @@ export const Index: Record<string, any> = {
category: "",
subcategory: ""
},
"Sidebar10": {
name: "Sidebar10",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
files: [{
path: "registry/default/block/Sidebar10/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar10/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavActions.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavActions.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavFavorites.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavFavorites.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavMain.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavMain.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavSecondary.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavSecondary.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/NavWorkspaces.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/NavWorkspaces.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar10/components/TeamSwitcher.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar10/components/TeamSwitcher.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar10/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar10/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar11": {
name: "Sidebar11",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
files: [{
path: "registry/default/block/Sidebar11/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar11/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar11/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar11/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar11/components/Tree.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar11/components/Tree.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar11/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar11/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar12": {
name: "Sidebar12",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
files: [{
path: "registry/default/block/Sidebar12/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar12/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar12/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar12/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar12/components/Calendars.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar12/components/Calendars.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar12/components/DatePicker.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar12/components/DatePicker.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar12/components/NavUser.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar12/components/NavUser.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar12/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar12/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar13": {
name: "Sidebar13",
description: "",
type: "registry:block",
registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
files: [{
path: "registry/default/block/Sidebar13/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar13/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar13/components/SettingsDialog.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar13/components/SettingsDialog.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar13/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar13/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar14": {
name: "Sidebar14",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
files: [{
path: "registry/default/block/Sidebar14/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar14/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar14/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar14/components/AppSidebar.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar14/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar14/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar15": {
name: "Sidebar15",
description: "",
type: "registry:block",
registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
files: [{
path: "registry/default/block/Sidebar15/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue",
raw: () => import("@/registry/default/block/Sidebar15/page.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/AppSidebar.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/AppSidebar.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/Calendars.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/Calendars.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/DatePicker.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/DatePicker.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavFavorites.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavFavorites.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavMain.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavMain.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavSecondary.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavSecondary.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavUser.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavUser.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/NavWorkspaces.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/NavWorkspaces.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/SidebarLeft.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/SidebarLeft.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/SidebarRight.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/SidebarRight.vue?raw").then((m) => m.default)
},{
path: "registry/default/block/Sidebar15/components/TeamSwitcher.vue",
type: "registry:component",
target: "",
raw: () => import("@/registry/default/block/Sidebar15/components/TeamSwitcher.vue?raw").then((m) => m.default)
}],
component: () => import("@/registry/default/block/Sidebar15/page.vue").then((m) => m.default),
raw: () => import("@/registry/default/block/Sidebar15/page.vue?raw").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
},
}

784
apps/www/__registry__/index.ts
View File

@ -5239,7 +5239,7 @@ export const Index: Record<string, any> = {
name: "Sidebar01",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
files: [{
path: "registry/new-york/block/Sidebar01/page.vue",
type: "registry:page",
@ -5470,6 +5470,200 @@ export const Index: Record<string, any> = {
category: "",
subcategory: ""
},
"Sidebar10": {
name: "Sidebar10",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
files: [{
path: "registry/new-york/block/Sidebar10/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar10/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavActions.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavFavorites.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavMain.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavSecondary.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavWorkspaces.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/TeamSwitcher.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar10/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar11": {
name: "Sidebar11",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
files: [{
path: "registry/new-york/block/Sidebar11/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar11/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar11/components/Tree.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar11/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar12": {
name: "Sidebar12",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
files: [{
path: "registry/new-york/block/Sidebar12/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar12/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar12/components/Calendars.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar12/components/DatePicker.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar12/components/NavUser.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar12/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar13": {
name: "Sidebar13",
description: "",
type: "registry:block",
registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
files: [{
path: "registry/new-york/block/Sidebar13/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar13/components/SettingsDialog.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar13/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar14": {
name: "Sidebar14",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
files: [{
path: "registry/new-york/block/Sidebar14/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar14/components/AppSidebar.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar14/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar15": {
name: "Sidebar15",
description: "",
type: "registry:block",
registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
files: [{
path: "registry/new-york/block/Sidebar15/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar15/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/Calendars.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/DatePicker.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavFavorites.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavMain.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavSecondary.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavUser.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavWorkspaces.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/SidebarLeft.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/SidebarRight.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/TeamSwitcher.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"accordion": {
name: "accordion",
description: "",
@ -10690,7 +10884,7 @@ export const Index: Record<string, any> = {
name: "Sidebar01",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
files: [{
path: "registry/new-york/block/Sidebar01/page.vue",
type: "registry:page",
@ -10921,6 +11115,200 @@ export const Index: Record<string, any> = {
category: "",
subcategory: ""
},
"Sidebar10": {
name: "Sidebar10",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
files: [{
path: "registry/new-york/block/Sidebar10/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar10/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavActions.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavFavorites.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavMain.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavSecondary.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/NavWorkspaces.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar10/components/TeamSwitcher.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar10/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar11": {
name: "Sidebar11",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
files: [{
path: "registry/new-york/block/Sidebar11/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar11/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar11/components/Tree.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar11/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar12": {
name: "Sidebar12",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
files: [{
path: "registry/new-york/block/Sidebar12/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar12/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar12/components/Calendars.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar12/components/DatePicker.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar12/components/NavUser.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar12/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar13": {
name: "Sidebar13",
description: "",
type: "registry:block",
registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
files: [{
path: "registry/new-york/block/Sidebar13/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar13/components/SettingsDialog.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar13/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar14": {
name: "Sidebar14",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
files: [{
path: "registry/new-york/block/Sidebar14/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar14/components/AppSidebar.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar14/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar15": {
name: "Sidebar15",
description: "",
type: "registry:block",
registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
files: [{
path: "registry/new-york/block/Sidebar15/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/new-york/block/Sidebar15/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/Calendars.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/DatePicker.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavFavorites.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavMain.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavSecondary.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavUser.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/NavWorkspaces.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/SidebarLeft.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/SidebarRight.vue",
type: "registry:component",
target: ""
},{
path: "registry/new-york/block/Sidebar15/components/TeamSwitcher.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/new-york/block/Sidebar15/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
}, "default": {
"utils": {
name: "utils",
@ -16157,7 +16545,7 @@ export const Index: Record<string, any> = {
name: "Sidebar01",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
files: [{
path: "registry/default/block/Sidebar01/page.vue",
type: "registry:page",
@ -16388,6 +16776,200 @@ export const Index: Record<string, any> = {
category: "",
subcategory: ""
},
"Sidebar10": {
name: "Sidebar10",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
files: [{
path: "registry/default/block/Sidebar10/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar10/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavActions.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavFavorites.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavMain.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavSecondary.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavWorkspaces.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/TeamSwitcher.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar10/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar11": {
name: "Sidebar11",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
files: [{
path: "registry/default/block/Sidebar11/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar11/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar11/components/Tree.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar11/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar12": {
name: "Sidebar12",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
files: [{
path: "registry/default/block/Sidebar12/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar12/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar12/components/Calendars.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar12/components/DatePicker.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar12/components/NavUser.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar12/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar13": {
name: "Sidebar13",
description: "",
type: "registry:block",
registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
files: [{
path: "registry/default/block/Sidebar13/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar13/components/SettingsDialog.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar13/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar14": {
name: "Sidebar14",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
files: [{
path: "registry/default/block/Sidebar14/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar14/components/AppSidebar.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar14/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar15": {
name: "Sidebar15",
description: "",
type: "registry:block",
registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
files: [{
path: "registry/default/block/Sidebar15/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar15/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/Calendars.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/DatePicker.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavFavorites.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavMain.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavSecondary.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavUser.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavWorkspaces.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/SidebarLeft.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/SidebarRight.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/TeamSwitcher.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar15/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"accordion": {
name: "accordion",
description: "",
@ -21608,7 +22190,7 @@ export const Index: Record<string, any> = {
name: "Sidebar01",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","label","dropdown-menu"],
files: [{
path: "registry/default/block/Sidebar01/page.vue",
type: "registry:page",
@ -21839,6 +22421,200 @@ export const Index: Record<string, any> = {
category: "",
subcategory: ""
},
"Sidebar10": {
name: "Sidebar10",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","NavActions.vue","breadcrumb","separator","sidebar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","button","popover","dropdown-menu","collapsible"],
files: [{
path: "registry/default/block/Sidebar10/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar10/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavActions.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavFavorites.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavMain.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavSecondary.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/NavWorkspaces.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar10/components/TeamSwitcher.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar10/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar11": {
name: "Sidebar11",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Tree.vue","collapsible"],
files: [{
path: "registry/default/block/Sidebar11/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar11/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar11/components/Tree.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar11/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar12": {
name: "Sidebar12",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","Calendars.vue","DatePicker.vue","NavUser.vue","collapsible","calendar","avatar","dropdown-menu"],
files: [{
path: "registry/default/block/Sidebar12/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar12/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar12/components/Calendars.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar12/components/DatePicker.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar12/components/NavUser.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar12/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar13": {
name: "Sidebar13",
description: "",
type: "registry:block",
registryDependencies: ["SettingsDialog.vue","breadcrumb","button","dialog","sidebar"],
files: [{
path: "registry/default/block/Sidebar13/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar13/components/SettingsDialog.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar13/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar14": {
name: "Sidebar14",
description: "",
type: "registry:block",
registryDependencies: ["AppSidebar.vue","breadcrumb","sidebar"],
files: [{
path: "registry/default/block/Sidebar14/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar14/components/AppSidebar.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar14/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
"Sidebar15": {
name: "Sidebar15",
description: "",
type: "registry:block",
registryDependencies: ["SidebarLeft.vue","SidebarRight.vue","breadcrumb","separator","sidebar","collapsible","calendar","dropdown-menu","avatar","NavFavorites.vue","NavMain.vue","NavSecondary.vue","NavWorkspaces.vue","TeamSwitcher.vue","Calendars.vue","DatePicker.vue","NavUser.vue"],
files: [{
path: "registry/default/block/Sidebar15/page.vue",
type: "registry:page",
target: "pages/dashboard/index.vue"
},{
path: "registry/default/block/Sidebar15/components/AppSidebar.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/Calendars.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/DatePicker.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavFavorites.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavMain.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavSecondary.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavUser.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/NavWorkspaces.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/SidebarLeft.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/SidebarRight.vue",
type: "registry:component",
target: ""
},{
path: "registry/default/block/Sidebar15/components/TeamSwitcher.vue",
type: "registry:component",
target: ""
}],
component: () => import("@/registry/default/block/Sidebar15/page.vue").then((m) => m.default),
source: "",
category: "",
subcategory: ""
},
},
}

BIN
apps/www/src/public/avatars/shadcn.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

3
apps/www/src/public/r/styles/default/Sidebar01.json
View File

@ -9,7 +9,6 @@
"sidebar",
"SearchForm.vue",
"VersionSwitcher.vue",
"collapsible",
"label",
"dropdown-menu"
],
@ -22,7 +21,7 @@
},
{
"path": "block/Sidebar01/components/AppSidebar.vue",
"content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n type SidebarProps,\n SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n navMain: [\n {\n title: 'Getting Started',\n url: '#',\n items: [\n {\n title: 'Installation',\n url: '#',\n },\n {\n title: 'Project Structure',\n url: '#',\n },\n ],\n },\n {\n title: 'Building Your Application',\n url: '#',\n items: [\n {\n title: 'Routing',\n url: '#',\n },\n {\n title: 'Data Fetching',\n url: '#',\n isActive: true,\n },\n {\n title: 'Rendering',\n url: '#',\n },\n {\n title: 'Caching',\n url: '#',\n },\n {\n title: 'Styling',\n url: '#',\n },\n {\n title: 'Optimizing',\n url: '#',\n },\n {\n title: 'Configuring',\n url: '#',\n },\n {\n title: 'Testing',\n url: '#',\n },\n {\n title: 'Authentication',\n url: '#',\n },\n {\n title: 'Deploying',\n url: '#',\n },\n {\n title: 'Upgrading',\n url: '#',\n },\n {\n title: 'Examples',\n url: '#',\n },\n ],\n },\n {\n title: 'API Reference',\n url: '#',\n items: [\n {\n title: 'Components',\n url: '#',\n },\n {\n title: 'File Conventions',\n url: '#',\n },\n {\n title: 'Functions',\n url: '#',\n },\n {\n title: 'next.config.js Options',\n url: '#',\n },\n {\n title: 'CLI',\n url: '#',\n },\n {\n title: 'Edge Runtime',\n url: '#',\n },\n ],\n },\n {\n title: 'Architecture',\n url: '#',\n items: [\n {\n title: 'Accessibility',\n url: '#',\n },\n {\n title: 'Fast Refresh',\n url: '#',\n },\n {\n title: 'Next.js Compiler',\n url: '#',\n },\n {\n title: 'Supported Browsers',\n url: '#',\n },\n {\n title: 'Turbopack',\n url: '#',\n },\n ],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarHeader>\n <VersionSwitcher\n :versions=\"data.versions\"\n :default-version=\"data.versions[0]\"\n />\n <SearchForm />\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n <a :href=\"childItem.url\">{{ childItem.title }}</a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n type SidebarProps,\n SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n navMain: [\n {\n title: 'Getting Started',\n url: '#',\n items: [\n {\n title: 'Installation',\n url: '#',\n },\n {\n title: 'Project Structure',\n url: '#',\n },\n ],\n },\n {\n title: 'Building Your Application',\n url: '#',\n items: [\n {\n title: 'Routing',\n url: '#',\n },\n {\n title: 'Data Fetching',\n url: '#',\n isActive: true,\n },\n {\n title: 'Rendering',\n url: '#',\n },\n {\n title: 'Caching',\n url: '#',\n },\n {\n title: 'Styling',\n url: '#',\n },\n {\n title: 'Optimizing',\n url: '#',\n },\n {\n title: 'Configuring',\n url: '#',\n },\n {\n title: 'Testing',\n url: '#',\n },\n {\n title: 'Authentication',\n url: '#',\n },\n {\n title: 'Deploying',\n url: '#',\n },\n {\n title: 'Upgrading',\n url: '#',\n },\n {\n title: 'Examples',\n url: '#',\n },\n ],\n },\n {\n title: 'API Reference',\n url: '#',\n items: [\n {\n title: 'Components',\n url: '#',\n },\n {\n title: 'File Conventions',\n url: '#',\n },\n {\n title: 'Functions',\n url: '#',\n },\n {\n title: 'next.config.js Options',\n url: '#',\n },\n {\n title: 'CLI',\n url: '#',\n },\n {\n title: 'Edge Runtime',\n url: '#',\n },\n ],\n },\n {\n title: 'Architecture',\n url: '#',\n items: [\n {\n title: 'Accessibility',\n url: '#',\n },\n {\n title: 'Fast Refresh',\n url: '#',\n },\n {\n title: 'Next.js Compiler',\n url: '#',\n },\n {\n title: 'Supported Browsers',\n url: '#',\n },\n {\n title: 'Turbopack',\n url: '#',\n },\n ],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarHeader>\n <VersionSwitcher\n :versions=\"data.versions\"\n :default-version=\"data.versions[0]\"\n />\n <SearchForm />\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n <a :href=\"childItem.url\">{{ childItem.title }}</a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"type": "registry:component",
"target": ""
},

2
apps/www/src/public/r/styles/default/Sidebar06.json
View File

@ -30,7 +30,7 @@
},
{
"path": "block/Sidebar06/components/NavMain.vue",
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n SidebarGroup,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n items: {\n title: string\n url: string\n icon?: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n <SidebarGroup>\n <SidebarMenu>\n <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n <SidebarMenuItem>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n v-if=\"item.items?.length\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n :align=\"isMobile ? 'end' : 'start'\"\n class=\"min-w-56 rounded-lg\"\n >\n <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n <a :href=\"childItem.url\">{{ childItem.title }}</a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </SidebarMenuItem>\n </DropdownMenu>\n </SidebarMenu>\n </SidebarGroup>\n</template>\n",
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n SidebarGroup,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n items: {\n title: string\n url: string\n icon?: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n <SidebarGroup>\n <SidebarMenu>\n <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n <SidebarMenuItem>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n v-if=\"item.items?.length\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n :align=\"isMobile ? 'end' : 'start'\"\n class=\"min-w-56 rounded-lg\"\n >\n <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n <a :href=\"childItem.url\">{{ childItem.title }}</a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </SidebarMenuItem>\n </DropdownMenu>\n </SidebarMenu>\n </SidebarGroup>\n</template>\n",
"type": "registry:component",
"target": ""
},

71
apps/www/src/public/r/styles/default/Sidebar10.json Normal file
View File

File diff suppressed because one or more lines are too long

33
apps/www/src/public/r/styles/default/Sidebar11.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "Sidebar11",
"type": "registry:block",
"dependencies": [],
"registryDependencies": [
"AppSidebar.vue",
"breadcrumb",
"separator",
"sidebar",
"Tree.vue",
"collapsible"
],
"files": [
{
"path": "block/Sidebar11/page.vue",
"content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger class=\"-ml-1\" />\n <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n components\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n ui\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>button.tsx</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n </div>\n <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n</template>\n",
"type": "registry:page",
"target": "pages/dashboard/index.vue"
},
{
"path": "block/Sidebar11/components/AppSidebar.vue",
"content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n type SidebarProps,\n SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n changes: [\n {\n file: 'README.md',\n state: 'M',\n },\n {\n file: 'api/hello/route.ts',\n state: 'U',\n },\n {\n file: 'app/layout.tsx',\n state: 'M',\n },\n ],\n tree: [\n [\n 'app',\n [\n 'api',\n ['hello', ['route.ts']],\n 'page.tsx',\n 'layout.tsx',\n ['blog', ['page.tsx']],\n ],\n ],\n [\n 'components',\n ['ui', 'button.tsx', 'card.tsx'],\n 'header.tsx',\n 'footer.tsx',\n ],\n ['lib', ['util.ts']],\n ['public', 'favicon.ico', 'vercel.svg'],\n '.eslintrc.json',\n '.gitignore',\n 'next.config.js',\n 'tailwind.config.js',\n 'package.json',\n 'README.md',\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Changes</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n <SidebarMenuButton>\n <File />\n {{ item.file }}\n </SidebarMenuButton>\n <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n <SidebarGroup>\n <SidebarGroupLabel>Files</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"type": "registry:component",
"target": ""
},
{
"path": "block/Sidebar11/components/Tree.vue",
"content": "<script setup lang=\"ts\">\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n <SidebarMenuButton\n v-if=\"!items.length\"\n :is-active=\"name === 'button.tsx'\"\n class=\"data-[active=true]:bg-transparent\"\n >\n <File />\n {{ name }}\n </SidebarMenuButton>\n\n <SidebarMenuItem v-else>\n <Collapsible\n class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n :default-open=\"name === 'components' || name === 'ui'\"\n >\n <CollapsibleTrigger as-child>\n <SidebarMenuButton>\n <ChevronRight class=\"transition-transform\" />\n <Folder />\n {{ name }}\n </SidebarMenuButton>\n </CollapsibleTrigger>\n <CollapsibleContent>\n <SidebarMenuSub>\n <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n </SidebarMenuSub>\n </CollapsibleContent>\n </Collapsible>\n </SidebarMenuItem>\n</template>\n",
"type": "registry:component",
"target": ""
}
]
}

50
apps/www/src/public/r/styles/default/Sidebar12.json Normal file
View File

@ -0,0 +1,50 @@
{
"name": "Sidebar12",
"type": "registry:block",
"dependencies": [],
"registryDependencies": [
"AppSidebar.vue",
"breadcrumb",
"separator",
"sidebar",
"Calendars.vue",
"DatePicker.vue",
"NavUser.vue",
"collapsible",
"calendar",
"avatar",
"dropdown-menu"
],
"files": [
{
"path": "block/Sidebar12/page.vue",
"content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n <SidebarTrigger class=\"-ml-1\" />\n <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbPage>October 2024</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n </div>\n </div>\n </SidebarInset>\n </SidebarProvider>\n</template>\n",
"type": "registry:page",
"target": "pages/dashboard/index.vue"
},
{
"path": "block/Sidebar12/components/AppSidebar.vue",
"content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n type SidebarProps,\n SidebarRail,\n SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n user: {\n name: 'shadcn',\n email: 'm@example.com',\n avatar: '/avatars/shadcn.jpg',\n },\n calendars: [\n {\n name: 'My Calendars',\n items: ['Personal', 'Work', 'Family'],\n },\n {\n name: 'Favorites',\n items: ['Holidays', 'Birthdays'],\n },\n {\n name: 'Other',\n items: ['Travel', 'Reminders', 'Deadlines'],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n <NavUser :user=\"data.user\" />\n </SidebarHeader>\n <SidebarContent>\n <DatePicker />\n <SidebarSeparator class=\"mx-0\" />\n <Calendars :calendars=\"data.calendars\" />\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton>\n <Plus />\n <span>New Calendar</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"type": "registry:component",
"target": ""
},
{
"path": "block/Sidebar12/components/Calendars.vue",
"content": "<script setup lang=\"ts\">\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n calendars: {\n name: string\n items: string[]\n }[]\n}>()\n</script>\n\n<template>\n <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n <SidebarGroup class=\"py-0\">\n <Collapsible\n :default-open=\"index === 0\"\n class=\"group/collapsible\"\n >\n <SidebarGroupLabel\n as-child\n class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n >\n <CollapsibleTrigger>\n {{ calendar.name }}\n <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n </CollapsibleTrigger>\n </SidebarGroupLabel>\n <CollapsibleContent>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n <SidebarMenuButton>\n <div\n :data-active=\"index < 2\"\n class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n >\n <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n </div>\n {{ item }}\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </CollapsibleContent>\n </Collapsible>\n </SidebarGroup>\n <SidebarSeparator class=\"mx-0\" />\n </template>\n</template>\n",
"type": "registry:component",
"target": ""
},
{
"path": "block/Sidebar12/components/DatePicker.vue",
"content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n SidebarGroup,\n SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n <SidebarGroup class=\"px-0\">\n <SidebarGroupContent>\n <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n </SidebarGroupContent>\n </SidebarGroup>\n</template>\n",
"type": "registry:component",
"target": ""
},
{
"path": "block/Sidebar12/components/NavUser.vue",
"content": "<script setup lang=\"ts\">\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n user: {\n name: string\n email: string\n avatar: string\n }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton\n size=\"lg\"\n class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n >\n <Avatar class=\"h-8 w-8 rounded-lg\">\n <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n <AvatarFallback class=\"rounded-lg\">\n CN\n </AvatarFallback>\n </Avatar>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">{{ user.name }}</span>\n <span class=\"truncate text-xs\">{{ user.email }}</span>\n </div>\n <ChevronsUpDown class=\"ml-auto size-4\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n align=\"start\"\n :side-offset=\"4\"\n >\n <DropdownMenuLabel class=\"p-0 font-normal\">\n <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <Avatar class=\"h-8 w-8 rounded-lg\">\n <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n <AvatarFallback class=\"rounded-lg\">\n CN\n </AvatarFallback>\n </Avatar>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">{{ user.name }}</span>\n <span class=\"truncate text-xs\">{{ user.email }}</span>\n </div>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <Sparkles />\n Upgrade to Pro\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <BadgeCheck />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CreditCard />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <Bell />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <LogOut />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n</template>\n",
"type": "registry:component",
"target": ""
}
]
}

26
apps/www/src/public/r/styles/default/Sidebar13.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "Sidebar13",
"type": "registry:block",
"dependencies": [],
"registryDependencies": [
"SettingsDialog.vue",
"breadcrumb",
"button",
"dialog",
"sidebar"
],
"files": [
{
"path": "block/Sidebar13/page.vue",
"content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n <div className=\"flex h-svh items-center justify-center\">\n <SettingsDialog />\n </div>\n</template>\n",
"type": "registry:page",
"target": "pages/dashboard/index.vue"
},
{
"path": "block/Sidebar13/components/SettingsDialog.vue",
"content": "<script setup lang=\"ts\">\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogTitle,\n DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n Bell,\n Check,\n Globe,\n Home,\n Keyboard,\n Link,\n Lock,\n Menu,\n MessageCircle,\n Paintbrush,\n Settings,\n Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n nav: [\n { name: 'Notifications', icon: Bell },\n { name: 'Navigation', icon: Menu },\n { name: 'Home', icon: Home },\n { name: 'Appearance', icon: Paintbrush },\n { name: 'Messages & media', icon: MessageCircle },\n { name: 'Language & region', icon: Globe },\n { name: 'Accessibility', icon: Keyboard },\n { name: 'Mark as read', icon: Check },\n { name: 'Audio & video', icon: Video },\n { name: 'Connected accounts', icon: Link },\n { name: 'Privacy & visibility', icon: Lock },\n { name: 'Advanced', icon: Settings },\n ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n <Dialog v-model:open=\"open\">\n <DialogTrigger as-child>\n <Button size=\"sm\">\n Open Dialog\n </Button>\n </DialogTrigger>\n <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n <DialogTitle class=\"sr-only\">\n Settings\n </DialogTitle>\n <DialogDescription class=\"sr-only\">\n Customize your settings here.\n </DialogDescription>\n <SidebarProvider class=\"items-start\">\n <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n <SidebarMenuButton\n as-child\n :is-active=\"item.name === 'Messages & media'\"\n >\n <a href=\"#\">\n <component :is=\"item.icon\" />\n <span>{{ item.name }}</span>\n </a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n </Sidebar>\n <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n <div class=\"flex items-center gap-2 px-4\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n Settings\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Messages & media</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </div>\n </header>\n <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n <div\n v-for=\"i in 10\"\n :key=\"i\"\n class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n />\n </div>\n </main>\n </SidebarProvider>\n </DialogContent>\n </Dialog>\n</template>\n",
"type": "registry:component",
"target": ""
}
]
}

24
apps/www/src/public/r/styles/default/Sidebar14.json Normal file
View File

@ -0,0 +1,24 @@
{
"name": "Sidebar14",
"type": "registry:block",
"dependencies": [],
"registryDependencies": [
"AppSidebar.vue",
"breadcrumb",
"sidebar"
],
"files": [
{
"path": "block/Sidebar14/page.vue",
"content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n <SidebarProvider>\n <SidebarInset>\n <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n Building Your Application\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n </header>\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n </div>\n <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n </div>\n </SidebarInset>\n <AppSidebar side=\"right\" />\n </SidebarProvider>\n</template>\n",
"type": "registry:page",
"target": "pages/dashboard/index.vue"
},
{
"path": "block/Sidebar14/components/AppSidebar.vue",
"content": "<script setup lang=\"ts\">\nimport type {\n SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n navMain: [\n {\n title: 'Getting Started',\n url: '#',\n items: [\n {\n title: 'Installation',\n url: '#',\n },\n {\n title: 'Project Structure',\n url: '#',\n },\n ],\n },\n {\n title: 'Building Your Application',\n url: '#',\n items: [\n {\n title: 'Routing',\n url: '#',\n },\n {\n title: 'Data Fetching',\n url: '#',\n isActive: true,\n },\n {\n title: 'Rendering',\n url: '#',\n },\n {\n title: 'Caching',\n url: '#',\n },\n {\n title: 'Styling',\n url: '#',\n },\n {\n title: 'Optimizing',\n url: '#',\n },\n {\n title: 'Configuring',\n url: '#',\n },\n {\n title: 'Testing',\n url: '#',\n },\n {\n title: 'Authentication',\n url: '#',\n },\n {\n title: 'Deploying',\n url: '#',\n },\n {\n title: 'Upgrading',\n url: '#',\n },\n {\n title: 'Examples',\n url: '#',\n },\n ],\n },\n {\n title: 'API Reference',\n url: '#',\n items: [\n {\n title: 'Components',\n url: '#',\n },\n {\n title: 'File Conventions',\n url: '#',\n },\n {\n title: 'Functions',\n url: '#',\n },\n {\n title: 'next.config.js Options',\n url: '#',\n },\n {\n title: 'CLI',\n url: '#',\n },\n {\n title: 'Edge Runtime',\n url: '#',\n },\n ],\n },\n {\n title: 'Architecture',\n url: '#',\n items: [\n {\n title: 'Accessibility',\n url: '#',\n },\n {\n title: 'Fast Refresh',\n url: '#',\n },\n {\n title: 'Next.js Compiler',\n url: '#',\n },\n {\n title: 'Supported Browsers',\n url: '#',\n },\n {\n title: 'Turbopack',\n url: '#',\n },\n ],\n },\n {\n title: 'Community',\n url: '#',\n items: [\n {\n title: 'Contribution Guide',\n url: '#',\n },\n ],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n <SidebarMenuButton as-child>\n <a :href=\"item.url\" className=\"font-medium\">\n {{ item.title }}\n </a>\n </SidebarMenuButton>\n <SidebarMenuSub v-if=\"item.items.length\">\n <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n <SidebarMenuSubButton\n as-child\n :is-active=\"subItem.isActive\"\n >\n <a :href=\"subItem.url\">{{ subItem.title }}</a>\n </SidebarMenuSubButton>\n </SidebarMenuSubItem>\n </SidebarMenuSub>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"type": "registry:component",
"target": ""
}
]
}

98
apps/www/src/public/r/styles/default/Sidebar15.json Normal file
View File

File diff suppressed because one or more lines are too long

3
apps/www/src/public/r/styles/new-york/Sidebar01.json
View File

@ -9,7 +9,6 @@
"sidebar",
"SearchForm.vue",
"VersionSwitcher.vue",
"collapsible",
"label",
"dropdown-menu"
],
@ -22,7 +21,7 @@
},
{
"path": "block/Sidebar01/components/AppSidebar.vue",
"content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n type SidebarProps,\n SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n navMain: [\n {\n title: 'Getting Started',\n url: '#',\n items: [\n {\n title: 'Installation',\n url: '#',\n },\n {\n title: 'Project Structure',\n url: '#',\n },\n ],\n },\n {\n title: 'Building Your Application',\n url: '#',\n items: [\n {\n title: 'Routing',\n url: '#',\n },\n {\n title: 'Data Fetching',\n url: '#',\n isActive: true,\n },\n {\n title: 'Rendering',\n url: '#',\n },\n {\n title: 'Caching',\n url: '#',\n },\n {\n title: 'Styling',\n url: '#',\n },\n {\n title: 'Optimizing',\n url: '#',\n },\n {\n title: 'Configuring',\n url: '#',\n },\n {\n title: 'Testing',\n url: '#',\n },\n {\n title: 'Authentication',\n url: '#',\n },\n {\n title: 'Deploying',\n url: '#',\n },\n {\n title: 'Upgrading',\n url: '#',\n },\n {\n title: 'Examples',\n url: '#',\n },\n ],\n },\n {\n title: 'API Reference',\n url: '#',\n items: [\n {\n title: 'Components',\n url: '#',\n },\n {\n title: 'File Conventions',\n url: '#',\n },\n {\n title: 'Functions',\n url: '#',\n },\n {\n title: 'next.config.js Options',\n url: '#',\n },\n {\n title: 'CLI',\n url: '#',\n },\n {\n title: 'Edge Runtime',\n url: '#',\n },\n ],\n },\n {\n title: 'Architecture',\n url: '#',\n items: [\n {\n title: 'Accessibility',\n url: '#',\n },\n {\n title: 'Fast Refresh',\n url: '#',\n },\n {\n title: 'Next.js Compiler',\n url: '#',\n },\n {\n title: 'Supported Browsers',\n url: '#',\n },\n {\n title: 'Turbopack',\n url: '#',\n },\n ],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarHeader>\n <VersionSwitcher\n :versions=\"data.versions\"\n :default-version=\"data.versions[0]\"\n />\n <SearchForm />\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n <a :href=\"childItem.url\">{{ childItem.title }}</a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n type SidebarProps,\n SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n navMain: [\n {\n title: 'Getting Started',\n url: '#',\n items: [\n {\n title: 'Installation',\n url: '#',\n },\n {\n title: 'Project Structure',\n url: '#',\n },\n ],\n },\n {\n title: 'Building Your Application',\n url: '#',\n items: [\n {\n title: 'Routing',\n url: '#',\n },\n {\n title: 'Data Fetching',\n url: '#',\n isActive: true,\n },\n {\n title: 'Rendering',\n url: '#',\n },\n {\n title: 'Caching',\n url: '#',\n },\n {\n title: 'Styling',\n url: '#',\n },\n {\n title: 'Optimizing',\n url: '#',\n },\n {\n title: 'Configuring',\n url: '#',\n },\n {\n title: 'Testing',\n url: '#',\n },\n {\n title: 'Authentication',\n url: '#',\n },\n {\n title: 'Deploying',\n url: '#',\n },\n {\n title: 'Upgrading',\n url: '#',\n },\n {\n title: 'Examples',\n url: '#',\n },\n ],\n },\n {\n title: 'API Reference',\n url: '#',\n items: [\n {\n title: 'Components',\n url: '#',\n },\n {\n title: 'File Conventions',\n url: '#',\n },\n {\n title: 'Functions',\n url: '#',\n },\n {\n title: 'next.config.js Options',\n url: '#',\n },\n {\n title: 'CLI',\n url: '#',\n },\n {\n title: 'Edge Runtime',\n url: '#',\n },\n ],\n },\n {\n title: 'Architecture',\n url: '#',\n items: [\n {\n title: 'Accessibility',\n url: '#',\n },\n {\n title: 'Fast Refresh',\n url: '#',\n },\n {\n title: 'Next.js Compiler',\n url: '#',\n },\n {\n title: 'Supported Browsers',\n url: '#',\n },\n {\n title: 'Turbopack',\n url: '#',\n },\n ],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarHeader>\n <VersionSwitcher\n :versions=\"data.versions\"\n :default-version=\"data.versions[0]\"\n />\n <SearchForm />\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n <a :href=\"childItem.url\">{{ childItem.title }}</a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"type": "registry:component",
"target": ""
},

2
apps/www/src/public/r/styles/new-york/Sidebar06.json
View File

@ -30,7 +30,7 @@
},
{
"path": "block/Sidebar06/components/NavMain.vue",
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n SidebarGroup,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n items: {\n title: string\n url: string\n icon?: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n <SidebarGroup>\n <SidebarMenu>\n <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n <SidebarMenuItem>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n v-if=\"item.items?.length\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n :align=\"isMobile ? 'end' : 'start'\"\n class=\"min-w-56 rounded-lg\"\n >\n <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n <a :href=\"childItem.url\">{{ childItem.title }}</a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </SidebarMenuItem>\n </DropdownMenu>\n </SidebarMenu>\n </SidebarGroup>\n</template>\n",
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n SidebarGroup,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { useMediaQuery } from '@vueuse/core'\nimport { type LucideIcon, MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n items: {\n title: string\n url: string\n icon?: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}>()\n\nconst isMobile = useMediaQuery('(max-width: 768px)')\n</script>\n\n<template>\n <SidebarGroup>\n <SidebarMenu>\n <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n <SidebarMenuItem>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n v-if=\"item.items?.length\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n :align=\"isMobile ? 'end' : 'start'\"\n class=\"min-w-56 rounded-lg\"\n >\n <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n <a :href=\"childItem.url\">{{ childItem.title }}</a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </SidebarMenuItem>\n </DropdownMenu>\n </SidebarMenu>\n </SidebarGroup>\n</template>\n",
"type": "registry:component",
"target": ""
},

71
apps/www/src/public/r/styles/new-york/Sidebar10.json Normal file
View File

File diff suppressed because one or more lines are too long

33
apps/www/src/public/r/styles/new-york/Sidebar11.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "Sidebar11",
"type": "registry:block",
"dependencies": [],
"registryDependencies": [
"AppSidebar.vue",
"breadcrumb",
"separator",
"sidebar",
"Tree.vue",
"collapsible"
],
"files": [
{
"path": "block/Sidebar11/page.vue",
"content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a collapsible file tree.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger class=\"-ml-1\" />\n <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n components\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n ui\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>button.tsx</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n </div>\n <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n</template>\n",
"type": "registry:page",
"target": "pages/dashboard/index.vue"
},
{
"path": "block/Sidebar11/components/AppSidebar.vue",
"content": "<script setup lang=\"ts\">\nimport Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n type SidebarProps,\n SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { File } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n changes: [\n {\n file: 'README.md',\n state: 'M',\n },\n {\n file: 'api/hello/route.ts',\n state: 'U',\n },\n {\n file: 'app/layout.tsx',\n state: 'M',\n },\n ],\n tree: [\n [\n 'app',\n [\n 'api',\n ['hello', ['route.ts']],\n 'page.tsx',\n 'layout.tsx',\n ['blog', ['page.tsx']],\n ],\n ],\n [\n 'components',\n ['ui', 'button.tsx', 'card.tsx'],\n 'header.tsx',\n 'footer.tsx',\n ],\n ['lib', ['util.ts']],\n ['public', 'favicon.ico', 'vercel.svg'],\n '.eslintrc.json',\n '.gitignore',\n 'next.config.js',\n 'tailwind.config.js',\n 'package.json',\n 'README.md',\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Changes</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"(item, index) in data.changes\" :key=\"index\">\n <SidebarMenuButton>\n <File />\n {{ item.file }}\n </SidebarMenuButton>\n <SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n <SidebarGroup>\n <SidebarGroupLabel>Files</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <Tree v-for=\"(item, index) in data.tree\" :key=\"index\" :item=\"item\" />\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"type": "registry:component",
"target": ""
},
{
"path": "block/Sidebar11/components/Tree.vue",
"content": "<script setup lang=\"ts\">\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight, File, Folder } from 'lucide-vue-next'\n\nconst props = defineProps<{\n item: string | any[]\n}>()\n\nconst [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]\n</script>\n\n<template>\n <SidebarMenuButton\n v-if=\"!items.length\"\n :is-active=\"name === 'button.tsx'\"\n class=\"data-[active=true]:bg-transparent\"\n >\n <File />\n {{ name }}\n </SidebarMenuButton>\n\n <SidebarMenuItem v-else>\n <Collapsible\n class=\"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\"\n :default-open=\"name === 'components' || name === 'ui'\"\n >\n <CollapsibleTrigger as-child>\n <SidebarMenuButton>\n <ChevronRight class=\"transition-transform\" />\n <Folder />\n {{ name }}\n </SidebarMenuButton>\n </CollapsibleTrigger>\n <CollapsibleContent>\n <SidebarMenuSub>\n <Tree v-for=\"(subItem, index) in items\" :key=\"index\" :item=\"subItem\" />\n </SidebarMenuSub>\n </CollapsibleContent>\n </Collapsible>\n </SidebarMenuItem>\n</template>\n",
"type": "registry:component",
"target": ""
}
]
}

50
apps/www/src/public/r/styles/new-york/Sidebar12.json Normal file
View File

@ -0,0 +1,50 @@
{
"name": "Sidebar12",
"type": "registry:block",
"dependencies": [],
"registryDependencies": [
"AppSidebar.vue",
"breadcrumb",
"separator",
"sidebar",
"Calendars.vue",
"DatePicker.vue",
"NavUser.vue",
"collapsible",
"calendar",
"avatar",
"dropdown-menu"
],
"files": [
{
"path": "block/Sidebar12/page.vue",
"content": "<script lang=\"ts\">\nexport const description = 'A sidebar with a calendar.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header class=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n <SidebarTrigger class=\"-ml-1\" />\n <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbPage>October 2024</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </header>\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n </div>\n </div>\n </SidebarInset>\n </SidebarProvider>\n</template>\n",
"type": "registry:page",
"target": "pages/dashboard/index.vue"
},
{
"path": "block/Sidebar12/components/AppSidebar.vue",
"content": "<script setup lang=\"ts\">\nimport Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'\n\nimport DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'\nimport NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n type SidebarProps,\n SidebarRail,\n SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n// This is sample data.\nconst data = {\n user: {\n name: 'shadcn',\n email: 'm@example.com',\n avatar: '/avatars/shadcn.jpg',\n },\n calendars: [\n {\n name: 'My Calendars',\n items: ['Personal', 'Work', 'Family'],\n },\n {\n name: 'Favorites',\n items: ['Holidays', 'Birthdays'],\n },\n {\n name: 'Other',\n items: ['Travel', 'Reminders', 'Deadlines'],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n <NavUser :user=\"data.user\" />\n </SidebarHeader>\n <SidebarContent>\n <DatePicker />\n <SidebarSeparator class=\"mx-0\" />\n <Calendars :calendars=\"data.calendars\" />\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton>\n <Plus />\n <span>New Calendar</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"type": "registry:component",
"target": ""
},
{
"path": "block/Sidebar12/components/Calendars.vue",
"content": "<script setup lang=\"ts\">\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarSeparator,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<{\n calendars: {\n name: string\n items: string[]\n }[]\n}>()\n</script>\n\n<template>\n <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n <SidebarGroup class=\"py-0\">\n <Collapsible\n :default-open=\"index === 0\"\n class=\"group/collapsible\"\n >\n <SidebarGroupLabel\n as-child\n class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n >\n <CollapsibleTrigger>\n {{ calendar.name }}\n <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n </CollapsibleTrigger>\n </SidebarGroupLabel>\n <CollapsibleContent>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n <SidebarMenuButton>\n <div\n :data-active=\"index < 2\"\n class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n >\n <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n </div>\n {{ item }}\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </CollapsibleContent>\n </Collapsible>\n </SidebarGroup>\n <SidebarSeparator class=\"mx-0\" />\n </template>\n</template>\n",
"type": "registry:component",
"target": ""
},
{
"path": "block/Sidebar12/components/DatePicker.vue",
"content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n SidebarGroup,\n SidebarGroupContent,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n <SidebarGroup class=\"px-0\">\n <SidebarGroupContent>\n <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n </SidebarGroupContent>\n </SidebarGroup>\n</template>\n",
"type": "registry:component",
"target": ""
},
{
"path": "block/Sidebar12/components/NavUser.vue",
"content": "<script setup lang=\"ts\">\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n user: {\n name: string\n email: string\n avatar: string\n }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton\n size=\"lg\"\n class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n >\n <Avatar class=\"h-8 w-8 rounded-lg\">\n <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n <AvatarFallback class=\"rounded-lg\">\n CN\n </AvatarFallback>\n </Avatar>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">{{ user.name }}</span>\n <span class=\"truncate text-xs\">{{ user.email }}</span>\n </div>\n <ChevronsUpDown class=\"ml-auto size-4\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n class=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n align=\"start\"\n :side-offset=\"4\"\n >\n <DropdownMenuLabel class=\"p-0 font-normal\">\n <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <Avatar class=\"h-8 w-8 rounded-lg\">\n <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n <AvatarFallback class=\"rounded-lg\">\n CN\n </AvatarFallback>\n </Avatar>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">{{ user.name }}</span>\n <span class=\"truncate text-xs\">{{ user.email }}</span>\n </div>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <Sparkles />\n Upgrade to Pro\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <BadgeCheck />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CreditCard />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <Bell />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <LogOut />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n</template>\n",
"type": "registry:component",
"target": ""
}
]
}

26
apps/www/src/public/r/styles/new-york/Sidebar13.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "Sidebar13",
"type": "registry:block",
"dependencies": [],
"registryDependencies": [
"SettingsDialog.vue",
"breadcrumb",
"button",
"dialog",
"sidebar"
],
"files": [
{
"path": "block/Sidebar13/page.vue",
"content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a dialog.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'\n</script>\n\n<template>\n <div className=\"flex h-svh items-center justify-center\">\n <SettingsDialog />\n </div>\n</template>\n",
"type": "registry:page",
"target": "pages/dashboard/index.vue"
},
{
"path": "block/Sidebar13/components/SettingsDialog.vue",
"content": "<script setup lang=\"ts\">\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogTitle,\n DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarProvider,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n Bell,\n Check,\n Globe,\n Home,\n Keyboard,\n Link,\n Lock,\n Menu,\n MessageCircle,\n Paintbrush,\n Settings,\n Video,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = {\n nav: [\n { name: 'Notifications', icon: Bell },\n { name: 'Navigation', icon: Menu },\n { name: 'Home', icon: Home },\n { name: 'Appearance', icon: Paintbrush },\n { name: 'Messages & media', icon: MessageCircle },\n { name: 'Language & region', icon: Globe },\n { name: 'Accessibility', icon: Keyboard },\n { name: 'Mark as read', icon: Check },\n { name: 'Audio & video', icon: Video },\n { name: 'Connected accounts', icon: Link },\n { name: 'Privacy & visibility', icon: Lock },\n { name: 'Advanced', icon: Settings },\n ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n <Dialog v-model:open=\"open\">\n <DialogTrigger as-child>\n <Button size=\"sm\">\n Open Dialog\n </Button>\n </DialogTrigger>\n <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n <DialogTitle class=\"sr-only\">\n Settings\n </DialogTitle>\n <DialogDescription class=\"sr-only\">\n Customize your settings here.\n </DialogDescription>\n <SidebarProvider class=\"items-start\">\n <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n <SidebarMenuButton\n as-child\n :is-active=\"item.name === 'Messages & media'\"\n >\n <a href=\"#\">\n <component :is=\"item.icon\" />\n <span>{{ item.name }}</span>\n </a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n </Sidebar>\n <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n <div class=\"flex items-center gap-2 px-4\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n Settings\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Messages & media</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </div>\n </header>\n <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n <div\n v-for=\"i in 10\"\n :key=\"i\"\n class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n />\n </div>\n </main>\n </SidebarProvider>\n </DialogContent>\n </Dialog>\n</template>\n",
"type": "registry:component",
"target": ""
}
]
}

24
apps/www/src/public/r/styles/new-york/Sidebar14.json Normal file
View File

@ -0,0 +1,24 @@
{
"name": "Sidebar14",
"type": "registry:block",
"dependencies": [],
"registryDependencies": [
"AppSidebar.vue",
"breadcrumb",
"sidebar"
],
"files": [
{
"path": "block/Sidebar14/page.vue",
"content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar on the right.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n <SidebarProvider>\n <SidebarInset>\n <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n Building Your Application\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n <SidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n </header>\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n </div>\n <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n </div>\n </SidebarInset>\n <AppSidebar side=\"right\" />\n </SidebarProvider>\n</template>\n",
"type": "registry:page",
"target": "pages/dashboard/index.vue"
},
{
"path": "block/Sidebar14/components/AppSidebar.vue",
"content": "<script setup lang=\"ts\">\nimport type {\n SidebarProps,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n navMain: [\n {\n title: 'Getting Started',\n url: '#',\n items: [\n {\n title: 'Installation',\n url: '#',\n },\n {\n title: 'Project Structure',\n url: '#',\n },\n ],\n },\n {\n title: 'Building Your Application',\n url: '#',\n items: [\n {\n title: 'Routing',\n url: '#',\n },\n {\n title: 'Data Fetching',\n url: '#',\n isActive: true,\n },\n {\n title: 'Rendering',\n url: '#',\n },\n {\n title: 'Caching',\n url: '#',\n },\n {\n title: 'Styling',\n url: '#',\n },\n {\n title: 'Optimizing',\n url: '#',\n },\n {\n title: 'Configuring',\n url: '#',\n },\n {\n title: 'Testing',\n url: '#',\n },\n {\n title: 'Authentication',\n url: '#',\n },\n {\n title: 'Deploying',\n url: '#',\n },\n {\n title: 'Upgrading',\n url: '#',\n },\n {\n title: 'Examples',\n url: '#',\n },\n ],\n },\n {\n title: 'API Reference',\n url: '#',\n items: [\n {\n title: 'Components',\n url: '#',\n },\n {\n title: 'File Conventions',\n url: '#',\n },\n {\n title: 'Functions',\n url: '#',\n },\n {\n title: 'next.config.js Options',\n url: '#',\n },\n {\n title: 'CLI',\n url: '#',\n },\n {\n title: 'Edge Runtime',\n url: '#',\n },\n ],\n },\n {\n title: 'Architecture',\n url: '#',\n items: [\n {\n title: 'Accessibility',\n url: '#',\n },\n {\n title: 'Fast Refresh',\n url: '#',\n },\n {\n title: 'Next.js Compiler',\n url: '#',\n },\n {\n title: 'Supported Browsers',\n url: '#',\n },\n {\n title: 'Turbopack',\n url: '#',\n },\n ],\n },\n {\n title: 'Community',\n url: '#',\n items: [\n {\n title: 'Contribution Guide',\n url: '#',\n },\n ],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n <SidebarMenuButton as-child>\n <a :href=\"item.url\" className=\"font-medium\">\n {{ item.title }}\n </a>\n </SidebarMenuButton>\n <SidebarMenuSub v-if=\"item.items.length\">\n <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n <SidebarMenuSubButton\n as-child\n :is-active=\"subItem.isActive\"\n >\n <a :href=\"subItem.url\">{{ subItem.title }}</a>\n </SidebarMenuSubButton>\n </SidebarMenuSubItem>\n </SidebarMenuSub>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
"type": "registry:component",
"target": ""
}
]
}

98
apps/www/src/public/r/styles/new-york/Sidebar15.json Normal file
View File

File diff suppressed because one or more lines are too long

614
apps/www/src/public/r/temp.json
View File

File diff suppressed because one or more lines are too long

2
apps/www/src/registry/default/block/Sidebar01/components/VersionSwitcher.vue
View File

@ -43,7 +43,7 @@ const selectedVersion = ref(props.defaultVersion)
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width]"
class="w-[--reka-dropdown-menu-trigger-width]"
align="start"
>
<DropdownMenuItem

2
apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
View File

@ -42,7 +42,7 @@ const selectedVersion = ref(props.defaultVersion)
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width]"
class="w-[--reka-dropdown-menu-trigger-width]"
align="start"
>
<DropdownMenuItem

2
apps/www/src/registry/default/block/Sidebar07/components/NavUser.vue
View File

@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
:side-offset="4"

2
apps/www/src/registry/default/block/Sidebar07/components/TeamSwitcher.vue
View File

@ -53,7 +53,7 @@ const activeTeam = ref(props.teams[0])
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
align="start"
:side="isMobile ? 'bottom' : 'right'"
:side-offset="4"

2
apps/www/src/registry/default/block/Sidebar08/components/NavUser.vue
View File

@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
:side-offset="4"

2
apps/www/src/registry/default/block/Sidebar09/components/NavUser.vue
View File

@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
:side-offset="4"

276
apps/www/src/registry/default/block/Sidebar10/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,276 @@
<script setup lang="ts">
import NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'
import NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'
import NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'
import NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'
import TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'
import {
Sidebar,
SidebarContent,
SidebarHeader,
type SidebarProps,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
import {
AudioWaveform,
Blocks,
Calendar,
Command,
Home,
Inbox,
MessageCircleQuestion,
Search,
Settings2,
Sparkles,
Trash2,
} from 'lucide-vue-next'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
teams: [
{
name: 'Acme Inc',
logo: Command,
plan: 'Enterprise',
},
{
name: 'Acme Corp.',
logo: AudioWaveform,
plan: 'Startup',
},
{
name: 'Evil Corp.',
logo: Command,
plan: 'Free',
},
],
navMain: [
{
title: 'Search',
url: '#',
icon: Search,
},
{
title: 'Ask AI',
url: '#',
icon: Sparkles,
},
{
title: 'Home',
url: '#',
icon: Home,
isActive: true,
},
{
title: 'Inbox',
url: '#',
icon: Inbox,
badge: '10',
},
],
navSecondary: [
{
title: 'Calendar',
url: '#',
icon: Calendar,
},
{
title: 'Settings',
url: '#',
icon: Settings2,
},
{
title: 'Templates',
url: '#',
icon: Blocks,
},
{
title: 'Trash',
url: '#',
icon: Trash2,
},
{
title: 'Help',
url: '#',
icon: MessageCircleQuestion,
},
],
favorites: [
{
name: 'Project Management & Task Tracking',
url: '#',
emoji: '📊',
},
{
name: 'Family Recipe Collection & Meal Planning',
url: '#',
emoji: '🍳',
},
{
name: 'Fitness Tracker & Workout Routines',
url: '#',
emoji: '💪',
},
{
name: 'Book Notes & Reading List',
url: '#',
emoji: '📚',
},
{
name: 'Sustainable Gardening Tips & Plant Care',
url: '#',
emoji: '🌱',
},
{
name: 'Language Learning Progress & Resources',
url: '#',
emoji: '🗣️',
},
{
name: 'Home Renovation Ideas & Budget Tracker',
url: '#',
emoji: '🏠',
},
{
name: 'Personal Finance & Investment Portfolio',
url: '#',
emoji: '💰',
},
{
name: 'Movie & TV Show Watchlist with Reviews',
url: '#',
emoji: '🎬',
},
{
name: 'Daily Habit Tracker & Goal Setting',
url: '#',
emoji: '✅',
},
],
workspaces: [
{
name: 'Personal Life Management',
emoji: '🏠',
pages: [
{
name: 'Daily Journal & Reflection',
url: '#',
emoji: '📔',
},
{
name: 'Health & Wellness Tracker',
url: '#',
emoji: '🍏',
},
{
name: 'Personal Growth & Learning Goals',
url: '#',
emoji: '🌟',
},
],
},
{
name: 'Professional Development',
emoji: '💼',
pages: [
{
name: 'Career Objectives & Milestones',
url: '#',
emoji: '🎯',
},
{
name: 'Skill Acquisition & Training Log',
url: '#',
emoji: '🧠',
},
{
name: 'Networking Contacts & Events',
url: '#',
emoji: '🤝',
},
],
},
{
name: 'Creative Projects',
emoji: '🎨',
pages: [
{
name: 'Writing Ideas & Story Outlines',
url: '#',
emoji: '✍️',
},
{
name: 'Art & Design Portfolio',
url: '#',
emoji: '🖼️',
},
{
name: 'Music Composition & Practice Log',
url: '#',
emoji: '🎵',
},
],
},
{
name: 'Home Management',
emoji: '🏡',
pages: [
{
name: 'Household Budget & Expense Tracking',
url: '#',
emoji: '💰',
},
{
name: 'Home Maintenance Schedule & Tasks',
url: '#',
emoji: '🔧',
},
{
name: 'Family Calendar & Event Planning',
url: '#',
emoji: '📅',
},
],
},
{
name: 'Travel & Adventure',
emoji: '🧳',
pages: [
{
name: 'Trip Planning & Itineraries',
url: '#',
emoji: '🗺️',
},
{
name: 'Travel Bucket List & Inspiration',
url: '#',
emoji: '🌎',
},
{
name: 'Travel Journal & Photo Gallery',
url: '#',
emoji: '📸',
},
],
},
],
}
</script>
<template>
<Sidebar class="border-r-0" v-bind="props">
<SidebarHeader>
<TeamSwitcher :teams="data.teams" />
<NavMain :items="data.navMain" />
</SidebarHeader>
<SidebarContent>
<NavFavorites :favorites="data.favorites" />
<NavWorkspaces :workspaces="data.workspaces" />
<NavSecondary :items="data.navSecondary" class="mt-auto" />
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

143
apps/www/src/registry/default/block/Sidebar10/components/NavActions.vue Normal file
View File

@ -0,0 +1,143 @@
<script setup lang="ts">
import { Button } from '@/registry/new-york/ui/button'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/registry/new-york/ui/popover'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
import {
ArrowDown,
ArrowUp,
Bell,
Copy,
CornerUpLeft,
CornerUpRight,
FileText,
GalleryVerticalEnd,
LineChart,
Link,
MoreHorizontal,
Settings2,
Star,
Trash,
Trash2,
} from 'lucide-vue-next'
import { ref } from 'vue'
const data = [
[
{
label: 'Customize Page',
icon: Settings2,
},
{
label: 'Turn into wiki',
icon: FileText,
},
],
[
{
label: 'Copy Link',
icon: Link,
},
{
label: 'Duplicate',
icon: Copy,
},
{
label: 'Move to',
icon: CornerUpRight,
},
{
label: 'Move to Trash',
icon: Trash2,
},
],
[
{
label: 'Undo',
icon: CornerUpLeft,
},
{
label: 'View analytics',
icon: LineChart,
},
{
label: 'Version History',
icon: GalleryVerticalEnd,
},
{
label: 'Show delete pages',
icon: Trash,
},
{
label: 'Notifications',
icon: Bell,
},
],
[
{
label: 'Import',
icon: ArrowUp,
},
{
label: 'Export',
icon: ArrowDown,
},
],
]
const isOpen = ref(false)
</script>
<template>
<div class="flex items-center gap-2 text-sm">
<div class="hidden font-medium text-muted-foreground md:inline-block">
Edit Oct 08
</div>
<Button variant="ghost" size="icon" class="h-7 w-7">
<Star />
</Button>
<Popover v-model:open="isOpen">
<PopoverTrigger as-child>
<Button
variant="ghost"
size="icon"
class="h-7 w-7 data-[state=open]:bg-accent"
>
<MoreHorizontal />
</Button>
</PopoverTrigger>
<PopoverContent
class="w-56 overflow-hidden rounded-lg p-0"
align="end"
>
<Sidebar collapsible="none" class="bg-transparent">
<SidebarContent>
<SidebarGroup v-for="(group, index) in data" :key="index" class="border-b last:border-none">
<SidebarGroupContent class="gap-0">
<SidebarMenu>
<SidebarMenuItem v-for="(item, index) in group" :key="index">
<SidebarMenuButton>
<component :is="item.icon" /> <span>{{ item.label }}</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
</PopoverContent>
</Popover>
</div>
</template>

91
apps/www/src/registry/default/block/Sidebar10/components/NavFavorites.vue Normal file
View File

@ -0,0 +1,91 @@
<script setup lang="ts">
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@/registry/new-york/ui/sidebar'
import {
ArrowUpRight,
Link,
MoreHorizontal,
StarOff,
Trash2,
} from 'lucide-vue-next'
defineProps<{
favorites: {
name: string
url: string
emoji: string
}[]
}>()
const { isMobile } = useSidebar()
</script>
<template>
<SidebarGroup class="group-data-[collapsible=icon]:hidden">
<SidebarGroupLabel>Favorites</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem v-for="item in favorites" :key="item.name">
<SidebarMenuButton as-child>
<a :href="item.url" :title="item.name">
<span>{{ item.emoji }}</span>
<span>{{ item.name }}</span>
</a>
</SidebarMenuButton>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuAction show-on-hover>
<MoreHorizontal />
<span class="sr-only">More</span>
</SidebarMenuAction>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
:align="isMobile ? 'end' : 'start'"
>
<DropdownMenuItem>
<StarOff class="text-muted-foreground" />
<span>Remove from Favorites</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Link class="text-muted-foreground" />
<span>Copy Link</span>
</DropdownMenuItem>
<DropdownMenuItem>
<ArrowUpRight class="text-muted-foreground" />
<span>Open in New Tab</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Trash2 class="text-muted-foreground" />
<span>Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</template>

31
apps/www/src/registry/default/block/Sidebar10/components/NavMain.vue Normal file
View File

@ -0,0 +1,31 @@
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
defineProps<{
items: {
title: string
url: string
icon: LucideIcon
isActive?: boolean
}[]
}>()
</script>
<template>
<SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton as-child :is-active="item.isActive">
<a :href="item.url">
<component :is="item.icon" />
<span>{{ item.title }}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</template>

42
apps/www/src/registry/default/block/Sidebar10/components/NavSecondary.vue Normal file
View File

@ -0,0 +1,42 @@
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import type { Component } from 'vue'
import {
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
defineProps<{
items: {
title: string
url: string
icon: LucideIcon
badge?: Component
}[]
}>()
</script>
<template>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton as-child>
<a :href="item.url">
<component :is="item.icon" />
<span>{{ item.title }}</span>
</a>
</SidebarMenuButton>
<SidebarMenuBadge v-if="item.badge">
<component :is="item.badge" />
</SidebarMenuBadge>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</template>

82
apps/www/src/registry/default/block/Sidebar10/components/NavWorkspaces.vue Normal file
View File

@ -0,0 +1,82 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from '@/registry/new-york/ui/sidebar'
import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
defineProps<{
workspaces: {
name: string
emoji: string
pages: {
name: string
emoji: string
}[]
}[]
}>()
</script>
<template>
<SidebarGroup>
<SidebarGroupLabel>Workspaces</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<Collapsible v-for="workspace in workspaces" :key="workspace.name">
<SidebarMenuItem>
<SidebarMenuButton as-child>
<a href="#">
<span>{{ workspace.emoji }}</span>
<span>{{ workspace.name }}</span>
</a>
</SidebarMenuButton>
<CollapsibleTrigger as-child>
<SidebarMenuAction
class="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
show-on-hover
>
<ChevronRight />
</SidebarMenuAction>
</CollapsibleTrigger>
<SidebarMenuAction show-on-hover>
<Plus />
</SidebarMenuAction>
<CollapsibleContent>
<SidebarMenuSub>
<SidebarMenuSubItem v-for="page in workspace.pages" :key="page.name">
<SidebarMenuSubButton as-child>
<a href="#">
<span>{{ page.emoji }}</span>
<span>{{ page.name }}</span>
</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</template>

78
apps/www/src/registry/default/block/Sidebar10/components/TeamSwitcher.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup lang="ts">
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
import { ChevronDown, Plus } from 'lucide-vue-next'
import { type Component, ref } from 'vue'
const props = defineProps<{
teams: {
name: string
logo: Component
plan: string
}[]
}>()
const activeTeam = ref(props.teams[0])
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton class="w-fit px-1.5">
<div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
<component :is="activeTeam.logo" class="size-3" />
</div>
<span class="truncate font-semibold">{{ activeTeam.name }}</span>
<ChevronDown class="opacity-50" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-64 rounded-lg"
align="start"
side="bottom"
:side-offset="4"
>
<DropdownMenuLabel class="text-xs text-muted-foreground">
Teams
</DropdownMenuLabel>
<DropdownMenuItem
v-for="(team, index) in teams"
:key="team.name"
class="gap-2 p-2"
@click="activeTeam = team"
>
<div class="flex size-6 items-center justify-center rounded-sm border">
<component :is="team.logo" class="size-4 shrink-0" />
</div>
{{ team.name }}
<DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem class="gap-2 p-2">
<div class="flex size-6 items-center justify-center rounded-md border bg-background">
<Plus class="size-4" />
</div>
<div class="font-medium text-muted-foreground">
Add team
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template>

51
apps/www/src/registry/default/block/Sidebar10/page.vue Normal file
View File

@ -0,0 +1,51 @@
<script lang="ts">
export const description = 'A sidebar in a popover.'
export const iframeHeight = '800px'
</script>
<script setup lang="ts">
import AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'
import NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from '@/registry/new-york/ui/breadcrumb'
import { Separator } from '@/registry/new-york/ui/separator'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header class="flex h-14 shrink-0 items-center gap-2">
<div class="flex flex-1 items-center gap-2 px-3">
<SidebarTrigger />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage class="line-clamp-1">
Project Management & Task Tracking
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div class="ml-auto px-3">
<NavActions />
</div>
</header>
<div class="flex flex-1 flex-col gap-4 px-4 py-10">
<div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
<div class="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
</div>
</SidebarInset>
</SidebarProvider>
</template>

93
apps/www/src/registry/default/block/Sidebar11/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,93 @@
<script setup lang="ts">
import Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
type SidebarProps,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
import { File } from 'lucide-vue-next'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
changes: [
{
file: 'README.md',
state: 'M',
},
{
file: 'api/hello/route.ts',
state: 'U',
},
{
file: 'app/layout.tsx',
state: 'M',
},
],
tree: [
[
'app',
[
'api',
['hello', ['route.ts']],
'page.tsx',
'layout.tsx',
['blog', ['page.tsx']],
],
],
[
'components',
['ui', 'button.tsx', 'card.tsx'],
'header.tsx',
'footer.tsx',
],
['lib', ['util.ts']],
['public', 'favicon.ico', 'vercel.svg'],
'.eslintrc.json',
'.gitignore',
'next.config.js',
'tailwind.config.js',
'package.json',
'README.md',
],
}
</script>
<template>
<Sidebar v-bind="props">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Changes</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="(item, index) in data.changes" :key="index">
<SidebarMenuButton>
<File />
{{ item.file }}
</SidebarMenuButton>
<SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>Files</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<Tree v-for="(item, index) in data.tree" :key="index" :item="item" />
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

51
apps/www/src/registry/default/block/Sidebar11/components/Tree.vue Normal file
View File

@ -0,0 +1,51 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
} from '@/registry/new-york/ui/sidebar'
import { ChevronRight, File, Folder } from 'lucide-vue-next'
const props = defineProps<{
item: string | any[]
}>()
const [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]
</script>
<template>
<SidebarMenuButton
v-if="!items.length"
:is-active="name === 'button.tsx'"
class="data-[active=true]:bg-transparent"
>
<File />
{{ name }}
</SidebarMenuButton>
<SidebarMenuItem v-else>
<Collapsible
class="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
:default-open="name === 'components' || name === 'ui'"
>
<CollapsibleTrigger as-child>
<SidebarMenuButton>
<ChevronRight class="transition-transform" />
<Folder />
{{ name }}
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
<Tree v-for="(subItem, index) in items" :key="index" :item="subItem" />
</SidebarMenuSub>
</CollapsibleContent>
</Collapsible>
</SidebarMenuItem>
</template>

61
apps/www/src/registry/default/block/Sidebar11/page.vue Normal file
View File

@ -0,0 +1,61 @@
<script lang="ts">
export const description = 'A sidebar with a collapsible file tree.'
export const iframeHeight = '800px'
</script>
<script setup lang="ts">
import AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/registry/new-york/ui/breadcrumb'
import { Separator } from '@/registry/new-york/ui/separator'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<SidebarTrigger class="-ml-1" />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
components
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
ui
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>button.tsx</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
</div>
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
</div>
</SidebarInset>
</SidebarProvider>
</template>

67
apps/www/src/registry/default/block/Sidebar12/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,67 @@
<script setup lang="ts">
import Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'
import DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'
import NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
type SidebarProps,
SidebarRail,
SidebarSeparator,
} from '@/registry/new-york/ui/sidebar'
import { Plus } from 'lucide-vue-next'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
user: {
name: 'shadcn',
email: 'm@example.com',
avatar: '/avatars/shadcn.jpg',
},
calendars: [
{
name: 'My Calendars',
items: ['Personal', 'Work', 'Family'],
},
{
name: 'Favorites',
items: ['Holidays', 'Birthdays'],
},
{
name: 'Other',
items: ['Travel', 'Reminders', 'Deadlines'],
},
],
}
</script>
<template>
<Sidebar v-bind="props">
<SidebarHeader class="h-16 border-b border-sidebar-border">
<NavUser :user="data.user" />
</SidebarHeader>
<SidebarContent>
<DatePicker />
<SidebarSeparator class="mx-0" />
<Calendars :calendars="data.calendars" />
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>
<Plus />
<span>New Calendar</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
<SidebarRail />
</Sidebar>
</template>

64
apps/www/src/registry/default/block/Sidebar12/components/Calendars.vue Normal file
View File

@ -0,0 +1,64 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarSeparator,
} from '@/registry/new-york/ui/sidebar'
import { Check, ChevronRight } from 'lucide-vue-next'
const props = defineProps<{
calendars: {
name: string
items: string[]
}[]
}>()
</script>
<template>
<template v-for="(calendar, index) in calendars" :key="calendar.name">
<SidebarGroup class="py-0">
<Collapsible
:default-open="index === 0"
class="group/collapsible"
>
<SidebarGroupLabel
as-child
class="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
>
<CollapsibleTrigger>
{{ calendar.name }}
<ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="(item, index) in calendar.items" :key="item">
<SidebarMenuButton>
<div
:data-active="index < 2"
class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
>
<Check class="hidden size-3 group-data-[active=true]/calendar-item:block" />
</div>
{{ item }}
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</CollapsibleContent>
</Collapsible>
</SidebarGroup>
<SidebarSeparator class="mx-0" />
</template>
</template>

15
apps/www/src/registry/default/block/Sidebar12/components/DatePicker.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import { Calendar } from '@/registry/new-york/ui/calendar'
import {
SidebarGroup,
SidebarGroupContent,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarGroup class="px-0">
<SidebarGroupContent>
<Calendar class="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
</SidebarGroupContent>
</SidebarGroup>
</template>

116
apps/www/src/registry/default/block/Sidebar12/components/NavUser.vue Normal file
View File

@ -0,0 +1,116 @@
<script setup lang="ts">
import {
Avatar,
AvatarFallback,
AvatarImage,
} from '@/registry/new-york/ui/avatar'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@/registry/new-york/ui/sidebar'
import {
BadgeCheck,
Bell,
ChevronsUpDown,
CreditCard,
LogOut,
Sparkles,
} from 'lucide-vue-next'
const props = defineProps<{
user: {
name: string
email: string
avatar: string
}
}>()
const { isMobile } = useSidebar()
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user.avatar" :alt="user.name" />
<AvatarFallback class="rounded-lg">
CN
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ user.name }}</span>
<span class="truncate text-xs">{{ user.email }}</span>
</div>
<ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="start"
:side-offset="4"
>
<DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user.avatar" :alt="user.name" />
<AvatarFallback class="rounded-lg">
CN
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ user.name }}</span>
<span class="truncate text-xs">{{ user.email }}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Sparkles />
Upgrade to Pro
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<BadgeCheck />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<Bell />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOut />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template>

44
apps/www/src/registry/default/block/Sidebar12/page.vue Normal file
View File

@ -0,0 +1,44 @@
<script lang="ts">
export const description = 'A sidebar with a calendar.'
export const iframeHeight = '800px'
</script>
<script setup lang="ts">
import AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from '@/registry/new-york/ui/breadcrumb'
import { Separator } from '@/registry/new-york/ui/separator'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header class="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
<SidebarTrigger class="-ml-1" />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage>October 2024</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-5">
<div v-for="i in 20" :key="i" class="aspect-square rounded-xl bg-muted/50" />
</div>
</div>
</SidebarInset>
</SidebarProvider>
</template>

130
apps/www/src/registry/default/block/Sidebar13/components/SettingsDialog.vue Normal file
View File

@ -0,0 +1,130 @@
<script setup lang="ts">
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/registry/new-york/ui/breadcrumb'
import { Button } from '@/registry/new-york/ui/button'
import {
Dialog,
DialogContent,
DialogDescription,
DialogTitle,
DialogTrigger,
} from '@/registry/new-york/ui/dialog'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
} from '@/registry/new-york/ui/sidebar'
import {
Bell,
Check,
Globe,
Home,
Keyboard,
Link,
Lock,
Menu,
MessageCircle,
Paintbrush,
Settings,
Video,
} from 'lucide-vue-next'
import { ref } from 'vue'
const data = {
nav: [
{ name: 'Notifications', icon: Bell },
{ name: 'Navigation', icon: Menu },
{ name: 'Home', icon: Home },
{ name: 'Appearance', icon: Paintbrush },
{ name: 'Messages & media', icon: MessageCircle },
{ name: 'Language & region', icon: Globe },
{ name: 'Accessibility', icon: Keyboard },
{ name: 'Mark as read', icon: Check },
{ name: 'Audio & video', icon: Video },
{ name: 'Connected accounts', icon: Link },
{ name: 'Privacy & visibility', icon: Lock },
{ name: 'Advanced', icon: Settings },
],
}
const open = ref(true)
</script>
<template>
<Dialog v-model:open="open">
<DialogTrigger as-child>
<Button size="sm">
Open Dialog
</Button>
</DialogTrigger>
<DialogContent class="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
<DialogTitle class="sr-only">
Settings
</DialogTitle>
<DialogDescription class="sr-only">
Customize your settings here.
</DialogDescription>
<SidebarProvider class="items-start">
<Sidebar collapsible="none" class="hidden md:flex">
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in data.nav" :key="item.name">
<SidebarMenuButton
as-child
:is-active="item.name === 'Messages & media'"
>
<a href="#">
<component :is="item.icon" />
<span>{{ item.name }}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<main class="flex h-[480px] flex-1 flex-col overflow-hidden">
<header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
<div class="flex items-center gap-2 px-4">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
Settings
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>Messages & media</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
<div
v-for="i in 10"
:key="i"
class="aspect-video max-w-3xl rounded-xl bg-muted/50"
/>
</div>
</main>
</SidebarProvider>
</DialogContent>
</Dialog>
</template>

14
apps/www/src/registry/default/block/Sidebar13/page.vue Normal file
View File

@ -0,0 +1,14 @@
<script lang="ts">
export const description = 'A sidebar in a dialog.'
export const iframeHeight = '800px'
</script>
<script setup lang="ts">
import SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'
</script>
<template>
<div class="flex h-svh items-center justify-center">
<SettingsDialog />
</div>
</template>

194
apps/www/src/registry/default/block/Sidebar14/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,194 @@
<script setup lang="ts">
import type {
SidebarProps,
} from '@/registry/new-york/ui/sidebar'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
navMain: [
{
title: 'Getting Started',
url: '#',
items: [
{
title: 'Installation',
url: '#',
},
{
title: 'Project Structure',
url: '#',
},
],
},
{
title: 'Building Your Application',
url: '#',
items: [
{
title: 'Routing',
url: '#',
},
{
title: 'Data Fetching',
url: '#',
isActive: true,
},
{
title: 'Rendering',
url: '#',
},
{
title: 'Caching',
url: '#',
},
{
title: 'Styling',
url: '#',
},
{
title: 'Optimizing',
url: '#',
},
{
title: 'Configuring',
url: '#',
},
{
title: 'Testing',
url: '#',
},
{
title: 'Authentication',
url: '#',
},
{
title: 'Deploying',
url: '#',
},
{
title: 'Upgrading',
url: '#',
},
{
title: 'Examples',
url: '#',
},
],
},
{
title: 'API Reference',
url: '#',
items: [
{
title: 'Components',
url: '#',
},
{
title: 'File Conventions',
url: '#',
},
{
title: 'Functions',
url: '#',
},
{
title: 'next.config.js Options',
url: '#',
},
{
title: 'CLI',
url: '#',
},
{
title: 'Edge Runtime',
url: '#',
},
],
},
{
title: 'Architecture',
url: '#',
items: [
{
title: 'Accessibility',
url: '#',
},
{
title: 'Fast Refresh',
url: '#',
},
{
title: 'Next.js Compiler',
url: '#',
},
{
title: 'Supported Browsers',
url: '#',
},
{
title: 'Turbopack',
url: '#',
},
],
},
{
title: 'Community',
url: '#',
items: [
{
title: 'Contribution Guide',
url: '#',
},
],
},
],
}
</script>
<template>
<Sidebar v-bind="props">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in data.navMain" :key="item.title">
<SidebarMenuButton as-child>
<a :href="item.url" class="font-medium">
{{ item.title }}
</a>
</SidebarMenuButton>
<SidebarMenuSub v-if="item.items.length">
<SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
<SidebarMenuSubButton
as-child
:is-active="subItem.isActive"
>
<a :href="subItem.url">{{ subItem.title }}</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

53
apps/www/src/registry/default/block/Sidebar14/page.vue Normal file
View File

@ -0,0 +1,53 @@
<script lang="ts">
export const iframeHeight = '800px'
export const description = 'A sidebar on the right.'
</script>
<script setup lang="ts">
import AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/registry/new-york/ui/breadcrumb'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<SidebarInset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
Building Your Application
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<SidebarTrigger class="-mr-1 ml-auto rotate-180" />
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
</div>
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
</div>
</SidebarInset>
<AppSidebar side="right" />
</SidebarProvider>
</template>

194
apps/www/src/registry/default/block/Sidebar15/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,194 @@
<script setup lang="ts">
import type {
SidebarProps,
} from '@/registry/new-york/ui/sidebar'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
navMain: [
{
title: 'Getting Started',
url: '#',
items: [
{
title: 'Installation',
url: '#',
},
{
title: 'Project Structure',
url: '#',
},
],
},
{
title: 'Building Your Application',
url: '#',
items: [
{
title: 'Routing',
url: '#',
},
{
title: 'Data Fetching',
url: '#',
isActive: true,
},
{
title: 'Rendering',
url: '#',
},
{
title: 'Caching',
url: '#',
},
{
title: 'Styling',
url: '#',
},
{
title: 'Optimizing',
url: '#',
},
{
title: 'Configuring',
url: '#',
},
{
title: 'Testing',
url: '#',
},
{
title: 'Authentication',
url: '#',
},
{
title: 'Deploying',
url: '#',
},
{
title: 'Upgrading',
url: '#',
},
{
title: 'Examples',
url: '#',
},
],
},
{
title: 'API Reference',
url: '#',
items: [
{
title: 'Components',
url: '#',
},
{
title: 'File Conventions',
url: '#',
},
{
title: 'Functions',
url: '#',
},
{
title: 'next.config.js Options',
url: '#',
},
{
title: 'CLI',
url: '#',
},
{
title: 'Edge Runtime',
url: '#',
},
],
},
{
title: 'Architecture',
url: '#',
items: [
{
title: 'Accessibility',
url: '#',
},
{
title: 'Fast Refresh',
url: '#',
},
{
title: 'Next.js Compiler',
url: '#',
},
{
title: 'Supported Browsers',
url: '#',
},
{
title: 'Turbopack',
url: '#',
},
],
},
{
title: 'Community',
url: '#',
items: [
{
title: 'Contribution Guide',
url: '#',
},
],
},
],
}
</script>
<template>
<Sidebar v-bind="props">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in data.navMain" :key="item.title">
<SidebarMenuButton as-child>
<a :href="item.url" class="font-medium">
{{ item.title }}
</a>
</SidebarMenuButton>
<SidebarMenuSub v-if="item.items.length">
<SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
<SidebarMenuSubButton
as-child
:is-active="subItem.isActive"
>
<a :href="subItem.url">{{ subItem.title }}</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

64
apps/www/src/registry/default/block/Sidebar15/components/Calendars.vue Normal file
View File

@ -0,0 +1,64 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarSeparator,
} from '@/registry/new-york/ui/sidebar'
import { Check, ChevronRight } from 'lucide-vue-next'
const props = defineProps<{
calendars: {
name: string
items: string[]
}[]
}>()
</script>
<template>
<template v-for="(calendar, index) in calendars" :key="calendar.name">
<SidebarGroup class="py-0">
<Collapsible
:default-open="index === 0"
class="group/collapsible"
>
<SidebarGroupLabel
as-child
class="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
>
<CollapsibleTrigger>
{{ calendar.name }}
<ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="(item, index) in calendar.items" :key="item">
<SidebarMenuButton>
<div
:data-active="index < 2"
class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
>
<Check class="hidden size-3 group-data-[active=true]/calendar-item:block" />
</div>
{{ item }}
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</CollapsibleContent>
</Collapsible>
</SidebarGroup>
<SidebarSeparator class="mx-0" />
</template>
</template>

15
apps/www/src/registry/default/block/Sidebar15/components/DatePicker.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import { Calendar } from '@/registry/new-york/ui/calendar'
import {
SidebarGroup,
SidebarGroupContent,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarGroup class="px-0">
<SidebarGroupContent>
<Calendar class="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
</SidebarGroupContent>
</SidebarGroup>
</template>

91
apps/www/src/registry/default/block/Sidebar15/components/NavFavorites.vue Normal file
View File

@ -0,0 +1,91 @@
<script setup lang="ts">
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@/registry/new-york/ui/sidebar'
import {
ArrowUpRight,
Link,
MoreHorizontal,
StarOff,
Trash2,
} from 'lucide-vue-next'
defineProps<{
favorites: {
name: string
url: string
emoji: string
}[]
}>()
const { isMobile } = useSidebar()
</script>
<template>
<SidebarGroup class="group-data-[collapsible=icon]:hidden">
<SidebarGroupLabel>Favorites</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem v-for="item in favorites" :key="item.name">
<SidebarMenuButton as-child>
<a :href="item.url" :title="item.name">
<span>{{ item.emoji }}</span>
<span>{{ item.name }}</span>
</a>
</SidebarMenuButton>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuAction show-on-hover>
<MoreHorizontal />
<span class="sr-only">More</span>
</SidebarMenuAction>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
:align="isMobile ? 'end' : 'start'"
>
<DropdownMenuItem>
<StarOff class="text-muted-foreground" />
<span>Remove from Favorites</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Link class="text-muted-foreground" />
<span>Copy Link</span>
</DropdownMenuItem>
<DropdownMenuItem>
<ArrowUpRight class="text-muted-foreground" />
<span>Open in New Tab</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Trash2 class="text-muted-foreground" />
<span>Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</template>

31
apps/www/src/registry/default/block/Sidebar15/components/NavMain.vue Normal file
View File

@ -0,0 +1,31 @@
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
defineProps<{
items: {
title: string
url: string
icon: LucideIcon
isActive?: boolean
}[]
}>()
</script>
<template>
<SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton as-child :is-active="item.isActive">
<a :href="item.url">
<component :is="item.icon" />
<span>{{ item.title }}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</template>

42
apps/www/src/registry/default/block/Sidebar15/components/NavSecondary.vue Normal file
View File

@ -0,0 +1,42 @@
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import type { Component } from 'vue'
import {
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
defineProps<{
items: {
title: string
url: string
icon: LucideIcon
badge?: Component
}[]
}>()
</script>
<template>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton as-child>
<a :href="item.url">
<component :is="item.icon" />
<span>{{ item.title }}</span>
</a>
</SidebarMenuButton>
<SidebarMenuBadge v-if="item.badge">
<component :is="item.badge" />
</SidebarMenuBadge>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</template>

116
apps/www/src/registry/default/block/Sidebar15/components/NavUser.vue Normal file
View File

@ -0,0 +1,116 @@
<script setup lang="ts">
import {
Avatar,
AvatarFallback,
AvatarImage,
} from '@/registry/new-york/ui/avatar'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@/registry/new-york/ui/sidebar'
import {
BadgeCheck,
Bell,
ChevronsUpDown,
CreditCard,
LogOut,
Sparkles,
} from 'lucide-vue-next'
const props = defineProps<{
user: {
name: string
email: string
avatar: string
}
}>()
const { isMobile } = useSidebar()
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user.avatar" :alt="user.name" />
<AvatarFallback class="rounded-lg">
CN
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ user.name }}</span>
<span class="truncate text-xs">{{ user.email }}</span>
</div>
<ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="start"
:side-offset="4"
>
<DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user.avatar" :alt="user.name" />
<AvatarFallback class="rounded-lg">
CN
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ user.name }}</span>
<span class="truncate text-xs">{{ user.email }}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Sparkles />
Upgrade to Pro
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<BadgeCheck />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<Bell />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOut />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template>

82
apps/www/src/registry/default/block/Sidebar15/components/NavWorkspaces.vue Normal file
View File

@ -0,0 +1,82 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from '@/registry/new-york/ui/sidebar'
import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
defineProps<{
workspaces: {
name: string
emoji: string
pages: {
name: string
emoji: string
}[]
}[]
}>()
</script>
<template>
<SidebarGroup>
<SidebarGroupLabel>Workspaces</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<Collapsible v-for="workspace in workspaces" :key="workspace.name">
<SidebarMenuItem>
<SidebarMenuButton as-child>
<a href="#">
<span>{{ workspace.emoji }}</span>
<span>{{ workspace.name }}</span>
</a>
</SidebarMenuButton>
<CollapsibleTrigger as-child>
<SidebarMenuAction
class="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
show-on-hover
>
<ChevronRight />
</SidebarMenuAction>
</CollapsibleTrigger>
<SidebarMenuAction show-on-hover>
<Plus />
</SidebarMenuAction>
<CollapsibleContent>
<SidebarMenuSub>
<SidebarMenuSubItem v-for="page in workspace.pages" :key="page.name">
<SidebarMenuSubButton as-child>
<a href="#">
<span>{{ page.emoji }}</span>
<span>{{ page.name }}</span>
</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</template>

276
apps/www/src/registry/default/block/Sidebar15/components/SidebarLeft.vue Normal file
View File

@ -0,0 +1,276 @@
<script setup lang="ts">
import NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'
import NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'
import NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'
import NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'
import TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'
import {
Sidebar,
SidebarContent,
SidebarHeader,
type SidebarProps,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
import {
AudioWaveform,
Blocks,
Calendar,
Command,
Home,
Inbox,
MessageCircleQuestion,
Search,
Settings2,
Sparkles,
Trash2,
} from 'lucide-vue-next'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
teams: [
{
name: 'Acme Inc',
logo: Command,
plan: 'Enterprise',
},
{
name: 'Acme Corp.',
logo: AudioWaveform,
plan: 'Startup',
},
{
name: 'Evil Corp.',
logo: Command,
plan: 'Free',
},
],
navMain: [
{
title: 'Search',
url: '#',
icon: Search,
},
{
title: 'Ask AI',
url: '#',
icon: Sparkles,
},
{
title: 'Home',
url: '#',
icon: Home,
isActive: true,
},
{
title: 'Inbox',
url: '#',
icon: Inbox,
badge: '10',
},
],
navSecondary: [
{
title: 'Calendar',
url: '#',
icon: Calendar,
},
{
title: 'Settings',
url: '#',
icon: Settings2,
},
{
title: 'Templates',
url: '#',
icon: Blocks,
},
{
title: 'Trash',
url: '#',
icon: Trash2,
},
{
title: 'Help',
url: '#',
icon: MessageCircleQuestion,
},
],
favorites: [
{
name: 'Project Management & Task Tracking',
url: '#',
emoji: '📊',
},
{
name: 'Family Recipe Collection & Meal Planning',
url: '#',
emoji: '🍳',
},
{
name: 'Fitness Tracker & Workout Routines',
url: '#',
emoji: '💪',
},
{
name: 'Book Notes & Reading List',
url: '#',
emoji: '📚',
},
{
name: 'Sustainable Gardening Tips & Plant Care',
url: '#',
emoji: '🌱',
},
{
name: 'Language Learning Progress & Resources',
url: '#',
emoji: '🗣️',
},
{
name: 'Home Renovation Ideas & Budget Tracker',
url: '#',
emoji: '🏠',
},
{
name: 'Personal Finance & Investment Portfolio',
url: '#',
emoji: '💰',
},
{
name: 'Movie & TV Show Watchlist with Reviews',
url: '#',
emoji: '🎬',
},
{
name: 'Daily Habit Tracker & Goal Setting',
url: '#',
emoji: '✅',
},
],
workspaces: [
{
name: 'Personal Life Management',
emoji: '🏠',
pages: [
{
name: 'Daily Journal & Reflection',
url: '#',
emoji: '📔',
},
{
name: 'Health & Wellness Tracker',
url: '#',
emoji: '🍏',
},
{
name: 'Personal Growth & Learning Goals',
url: '#',
emoji: '🌟',
},
],
},
{
name: 'Professional Development',
emoji: '💼',
pages: [
{
name: 'Career Objectives & Milestones',
url: '#',
emoji: '🎯',
},
{
name: 'Skill Acquisition & Training Log',
url: '#',
emoji: '🧠',
},
{
name: 'Networking Contacts & Events',
url: '#',
emoji: '🤝',
},
],
},
{
name: 'Creative Projects',
emoji: '🎨',
pages: [
{
name: 'Writing Ideas & Story Outlines',
url: '#',
emoji: '✍️',
},
{
name: 'Art & Design Portfolio',
url: '#',
emoji: '🖼️',
},
{
name: 'Music Composition & Practice Log',
url: '#',
emoji: '🎵',
},
],
},
{
name: 'Home Management',
emoji: '🏡',
pages: [
{
name: 'Household Budget & Expense Tracking',
url: '#',
emoji: '💰',
},
{
name: 'Home Maintenance Schedule & Tasks',
url: '#',
emoji: '🔧',
},
{
name: 'Family Calendar & Event Planning',
url: '#',
emoji: '📅',
},
],
},
{
name: 'Travel & Adventure',
emoji: '🧳',
pages: [
{
name: 'Trip Planning & Itineraries',
url: '#',
emoji: '🗺️',
},
{
name: 'Travel Bucket List & Inspiration',
url: '#',
emoji: '🌎',
},
{
name: 'Travel Journal & Photo Gallery',
url: '#',
emoji: '📸',
},
],
},
],
}
</script>
<template>
<Sidebar class="border-r-0" v-bind="props">
<SidebarHeader>
<TeamSwitcher :teams="data.teams" />
<NavMain :items="data.navMain" />
</SidebarHeader>
<SidebarContent>
<NavFavorites :favorites="data.favorites" />
<NavWorkspaces :workspaces="data.workspaces" />
<NavSecondary :items="data.navSecondary" class="mt-auto" />
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

71
apps/www/src/registry/default/block/Sidebar15/components/SidebarRight.vue Normal file
View File

@ -0,0 +1,71 @@
<script setup lang="ts">
import Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'
import DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'
import NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
type SidebarProps,
SidebarSeparator,
} from '@/registry/new-york/ui/sidebar'
import { Plus } from 'lucide-vue-next'
const props = withDefaults(defineProps<SidebarProps>(), {
collapsible: 'none',
})
// This is sample data.
const data = {
user: {
name: 'shadcn',
email: 'm@example.com',
avatar: '/avatars/shadcn.jpg',
},
calendars: [
{
name: 'My Calendars',
items: ['Personal', 'Work', 'Family'],
},
{
name: 'Favorites',
items: ['Holidays', 'Birthdays'],
},
{
name: 'Other',
items: ['Travel', 'Reminders', 'Deadlines'],
},
],
}
</script>
<template>
<Sidebar
class="sticky hidden lg:flex top-0 h-svh border-l"
v-bind="props"
>
<SidebarHeader class="h-16 border-b border-sidebar-border">
<NavUser :user="data.user" />
</SidebarHeader>
<SidebarContent>
<DatePicker />
<SidebarSeparator class="mx-0" />
<Calendars :calendars="data.calendars" />
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>
<Plus />
<span>New Calendar</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</Sidebar>
</template>

81
apps/www/src/registry/default/block/Sidebar15/components/TeamSwitcher.vue Normal file
View File

@ -0,0 +1,81 @@
<script setup lang="ts">
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
import { ChevronDown, Plus } from 'lucide-vue-next'
import { type Component, ref } from 'vue'
const props = defineProps<{
teams: {
name: string
logo: Component
plan: string
}[]
}>()
const activeTeam = ref(props.teams[0])
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton class="w-fit px-1.5">
<div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
<component :is="activeTeam.logo" class="size-3" />
</div>
<span class="truncate font-semibold">{{ activeTeam.name }}</span>
<ChevronDown class="opacity-50" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-64 rounded-lg"
align="start"
side="bottom"
:side-offset="4"
>
<DropdownMenuLabel class="text-xs text-muted-foreground">
Teams
</DropdownMenuLabel>
<DropdownMenuItem
v-for="(team, index) in teams"
:key="team.name"
class="gap-2 p-2"
@click="activeTeam = team"
>
<div class="flex size-6 items-center justify-center rounded-sm border">
<component :is="team.logo" class="size-4 shrink-0" />
</div>
{{ team.name }}
<DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem class="gap-2 p-2">
<div class="flex size-6 items-center justify-center rounded-md border bg-background">
<Plus class="size-4" />
</div>
<div class="font-medium text-muted-foreground">
Add team
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template>

49
apps/www/src/registry/default/block/Sidebar15/page.vue Normal file
View File

@ -0,0 +1,49 @@
<script lang="ts">
export const iframeHeight = '800px'
export const description = 'A left and right sidebar.'
</script>
<script setup lang="ts">
import SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'
import SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from '@/registry/new-york/ui/breadcrumb'
import { Separator } from '@/registry/new-york/ui/separator'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<SidebarLeft />
<SidebarInset>
<header class="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
<div class="flex flex-1 items-center gap-2 px-3">
<SidebarTrigger />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage class="line-clamp-1">
Project Management & Task Tracking
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
<div class="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
</div>
</SidebarInset>
<SidebarRight />
</SidebarProvider>
</template>

2
apps/www/src/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue
View File

@ -43,7 +43,7 @@ const selectedVersion = ref(props.defaultVersion)
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width]"
class="w-[--reka-dropdown-menu-trigger-width]"
align="start"
>
<DropdownMenuItem

2
apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
View File

@ -42,7 +42,7 @@ const selectedVersion = ref(props.defaultVersion)
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width]"
class="w-[--reka-dropdown-menu-trigger-width]"
align="start"
>
<DropdownMenuItem

2
apps/www/src/registry/new-york/block/Sidebar07/components/NavUser.vue
View File

@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
:side-offset="4"

2
apps/www/src/registry/new-york/block/Sidebar07/components/TeamSwitcher.vue
View File

@ -53,7 +53,7 @@ const activeTeam = ref(props.teams[0])
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
align="start"
:side="isMobile ? 'bottom' : 'right'"
:side-offset="4"

2
apps/www/src/registry/new-york/block/Sidebar08/components/NavUser.vue
View File

@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
:side-offset="4"

2
apps/www/src/registry/new-york/block/Sidebar09/components/NavUser.vue
View File

@ -63,7 +63,7 @@ const { isMobile } = useSidebar()
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
:side-offset="4"

276
apps/www/src/registry/new-york/block/Sidebar10/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,276 @@
<script setup lang="ts">
import NavFavorites from '@/registry/new-york/block/Sidebar10/components/NavFavorites.vue'
import NavMain from '@/registry/new-york/block/Sidebar10/components/NavMain.vue'
import NavSecondary from '@/registry/new-york/block/Sidebar10/components/NavSecondary.vue'
import NavWorkspaces from '@/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue'
import TeamSwitcher from '@/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue'
import {
Sidebar,
SidebarContent,
SidebarHeader,
type SidebarProps,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
import {
AudioWaveform,
Blocks,
Calendar,
Command,
Home,
Inbox,
MessageCircleQuestion,
Search,
Settings2,
Sparkles,
Trash2,
} from 'lucide-vue-next'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
teams: [
{
name: 'Acme Inc',
logo: Command,
plan: 'Enterprise',
},
{
name: 'Acme Corp.',
logo: AudioWaveform,
plan: 'Startup',
},
{
name: 'Evil Corp.',
logo: Command,
plan: 'Free',
},
],
navMain: [
{
title: 'Search',
url: '#',
icon: Search,
},
{
title: 'Ask AI',
url: '#',
icon: Sparkles,
},
{
title: 'Home',
url: '#',
icon: Home,
isActive: true,
},
{
title: 'Inbox',
url: '#',
icon: Inbox,
badge: '10',
},
],
navSecondary: [
{
title: 'Calendar',
url: '#',
icon: Calendar,
},
{
title: 'Settings',
url: '#',
icon: Settings2,
},
{
title: 'Templates',
url: '#',
icon: Blocks,
},
{
title: 'Trash',
url: '#',
icon: Trash2,
},
{
title: 'Help',
url: '#',
icon: MessageCircleQuestion,
},
],
favorites: [
{
name: 'Project Management & Task Tracking',
url: '#',
emoji: '📊',
},
{
name: 'Family Recipe Collection & Meal Planning',
url: '#',
emoji: '🍳',
},
{
name: 'Fitness Tracker & Workout Routines',
url: '#',
emoji: '💪',
},
{
name: 'Book Notes & Reading List',
url: '#',
emoji: '📚',
},
{
name: 'Sustainable Gardening Tips & Plant Care',
url: '#',
emoji: '🌱',
},
{
name: 'Language Learning Progress & Resources',
url: '#',
emoji: '🗣️',
},
{
name: 'Home Renovation Ideas & Budget Tracker',
url: '#',
emoji: '🏠',
},
{
name: 'Personal Finance & Investment Portfolio',
url: '#',
emoji: '💰',
},
{
name: 'Movie & TV Show Watchlist with Reviews',
url: '#',
emoji: '🎬',
},
{
name: 'Daily Habit Tracker & Goal Setting',
url: '#',
emoji: '✅',
},
],
workspaces: [
{
name: 'Personal Life Management',
emoji: '🏠',
pages: [
{
name: 'Daily Journal & Reflection',
url: '#',
emoji: '📔',
},
{
name: 'Health & Wellness Tracker',
url: '#',
emoji: '🍏',
},
{
name: 'Personal Growth & Learning Goals',
url: '#',
emoji: '🌟',
},
],
},
{
name: 'Professional Development',
emoji: '💼',
pages: [
{
name: 'Career Objectives & Milestones',
url: '#',
emoji: '🎯',
},
{
name: 'Skill Acquisition & Training Log',
url: '#',
emoji: '🧠',
},
{
name: 'Networking Contacts & Events',
url: '#',
emoji: '🤝',
},
],
},
{
name: 'Creative Projects',
emoji: '🎨',
pages: [
{
name: 'Writing Ideas & Story Outlines',
url: '#',
emoji: '✍️',
},
{
name: 'Art & Design Portfolio',
url: '#',
emoji: '🖼️',
},
{
name: 'Music Composition & Practice Log',
url: '#',
emoji: '🎵',
},
],
},
{
name: 'Home Management',
emoji: '🏡',
pages: [
{
name: 'Household Budget & Expense Tracking',
url: '#',
emoji: '💰',
},
{
name: 'Home Maintenance Schedule & Tasks',
url: '#',
emoji: '🔧',
},
{
name: 'Family Calendar & Event Planning',
url: '#',
emoji: '📅',
},
],
},
{
name: 'Travel & Adventure',
emoji: '🧳',
pages: [
{
name: 'Trip Planning & Itineraries',
url: '#',
emoji: '🗺️',
},
{
name: 'Travel Bucket List & Inspiration',
url: '#',
emoji: '🌎',
},
{
name: 'Travel Journal & Photo Gallery',
url: '#',
emoji: '📸',
},
],
},
],
}
</script>
<template>
<Sidebar class="border-r-0" v-bind="props">
<SidebarHeader>
<TeamSwitcher :teams="data.teams" />
<NavMain :items="data.navMain" />
</SidebarHeader>
<SidebarContent>
<NavFavorites :favorites="data.favorites" />
<NavWorkspaces :workspaces="data.workspaces" />
<NavSecondary :items="data.navSecondary" class="mt-auto" />
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

143
apps/www/src/registry/new-york/block/Sidebar10/components/NavActions.vue Normal file
View File

@ -0,0 +1,143 @@
<script setup lang="ts">
import { Button } from '@/registry/new-york/ui/button'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/registry/new-york/ui/popover'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
import {
ArrowDown,
ArrowUp,
Bell,
Copy,
CornerUpLeft,
CornerUpRight,
FileText,
GalleryVerticalEnd,
LineChart,
Link,
MoreHorizontal,
Settings2,
Star,
Trash,
Trash2,
} from 'lucide-vue-next'
import { ref } from 'vue'
const data = [
[
{
label: 'Customize Page',
icon: Settings2,
},
{
label: 'Turn into wiki',
icon: FileText,
},
],
[
{
label: 'Copy Link',
icon: Link,
},
{
label: 'Duplicate',
icon: Copy,
},
{
label: 'Move to',
icon: CornerUpRight,
},
{
label: 'Move to Trash',
icon: Trash2,
},
],
[
{
label: 'Undo',
icon: CornerUpLeft,
},
{
label: 'View analytics',
icon: LineChart,
},
{
label: 'Version History',
icon: GalleryVerticalEnd,
},
{
label: 'Show delete pages',
icon: Trash,
},
{
label: 'Notifications',
icon: Bell,
},
],
[
{
label: 'Import',
icon: ArrowUp,
},
{
label: 'Export',
icon: ArrowDown,
},
],
]
const isOpen = ref(false)
</script>
<template>
<div class="flex items-center gap-2 text-sm">
<div class="hidden font-medium text-muted-foreground md:inline-block">
Edit Oct 08
</div>
<Button variant="ghost" size="icon" class="h-7 w-7">
<Star />
</Button>
<Popover v-model:open="isOpen">
<PopoverTrigger as-child>
<Button
variant="ghost"
size="icon"
class="h-7 w-7 data-[state=open]:bg-accent"
>
<MoreHorizontal />
</Button>
</PopoverTrigger>
<PopoverContent
class="w-56 overflow-hidden rounded-lg p-0"
align="end"
>
<Sidebar collapsible="none" class="bg-transparent">
<SidebarContent>
<SidebarGroup v-for="(group, index) in data" :key="index" class="border-b last:border-none">
<SidebarGroupContent class="gap-0">
<SidebarMenu>
<SidebarMenuItem v-for="(item, index) in group" :key="index">
<SidebarMenuButton>
<component :is="item.icon" /> <span>{{ item.label }}</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
</PopoverContent>
</Popover>
</div>
</template>

91
apps/www/src/registry/new-york/block/Sidebar10/components/NavFavorites.vue Normal file
View File

@ -0,0 +1,91 @@
<script setup lang="ts">
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@/registry/new-york/ui/sidebar'
import {
ArrowUpRight,
Link,
MoreHorizontal,
StarOff,
Trash2,
} from 'lucide-vue-next'
defineProps<{
favorites: {
name: string
url: string
emoji: string
}[]
}>()
const { isMobile } = useSidebar()
</script>
<template>
<SidebarGroup class="group-data-[collapsible=icon]:hidden">
<SidebarGroupLabel>Favorites</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem v-for="item in favorites" :key="item.name">
<SidebarMenuButton as-child>
<a :href="item.url" :title="item.name">
<span>{{ item.emoji }}</span>
<span>{{ item.name }}</span>
</a>
</SidebarMenuButton>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuAction show-on-hover>
<MoreHorizontal />
<span class="sr-only">More</span>
</SidebarMenuAction>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
:align="isMobile ? 'end' : 'start'"
>
<DropdownMenuItem>
<StarOff class="text-muted-foreground" />
<span>Remove from Favorites</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Link class="text-muted-foreground" />
<span>Copy Link</span>
</DropdownMenuItem>
<DropdownMenuItem>
<ArrowUpRight class="text-muted-foreground" />
<span>Open in New Tab</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Trash2 class="text-muted-foreground" />
<span>Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</template>

31
apps/www/src/registry/new-york/block/Sidebar10/components/NavMain.vue Normal file
View File

@ -0,0 +1,31 @@
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
defineProps<{
items: {
title: string
url: string
icon: LucideIcon
isActive?: boolean
}[]
}>()
</script>
<template>
<SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton as-child :is-active="item.isActive">
<a :href="item.url">
<component :is="item.icon" />
<span>{{ item.title }}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</template>

42
apps/www/src/registry/new-york/block/Sidebar10/components/NavSecondary.vue Normal file
View File

@ -0,0 +1,42 @@
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import type { Component } from 'vue'
import {
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
defineProps<{
items: {
title: string
url: string
icon: LucideIcon
badge?: Component
}[]
}>()
</script>
<template>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton as-child>
<a :href="item.url">
<component :is="item.icon" />
<span>{{ item.title }}</span>
</a>
</SidebarMenuButton>
<SidebarMenuBadge v-if="item.badge">
<component :is="item.badge" />
</SidebarMenuBadge>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</template>

82
apps/www/src/registry/new-york/block/Sidebar10/components/NavWorkspaces.vue Normal file
View File

@ -0,0 +1,82 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from '@/registry/new-york/ui/sidebar'
import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
defineProps<{
workspaces: {
name: string
emoji: string
pages: {
name: string
emoji: string
}[]
}[]
}>()
</script>
<template>
<SidebarGroup>
<SidebarGroupLabel>Workspaces</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<Collapsible v-for="workspace in workspaces" :key="workspace.name">
<SidebarMenuItem>
<SidebarMenuButton as-child>
<a href="#">
<span>{{ workspace.emoji }}</span>
<span>{{ workspace.name }}</span>
</a>
</SidebarMenuButton>
<CollapsibleTrigger as-child>
<SidebarMenuAction
class="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
show-on-hover
>
<ChevronRight />
</SidebarMenuAction>
</CollapsibleTrigger>
<SidebarMenuAction show-on-hover>
<Plus />
</SidebarMenuAction>
<CollapsibleContent>
<SidebarMenuSub>
<SidebarMenuSubItem v-for="page in workspace.pages" :key="page.name">
<SidebarMenuSubButton as-child>
<a href="#">
<span>{{ page.emoji }}</span>
<span>{{ page.name }}</span>
</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</template>

78
apps/www/src/registry/new-york/block/Sidebar10/components/TeamSwitcher.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup lang="ts">
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
import { ChevronDown, Plus } from 'lucide-vue-next'
import { type Component, ref } from 'vue'
const props = defineProps<{
teams: {
name: string
logo: Component
plan: string
}[]
}>()
const activeTeam = ref(props.teams[0])
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton class="w-fit px-1.5">
<div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
<component :is="activeTeam.logo" class="size-3" />
</div>
<span class="truncate font-semibold">{{ activeTeam.name }}</span>
<ChevronDown class="opacity-50" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-64 rounded-lg"
align="start"
side="bottom"
:side-offset="4"
>
<DropdownMenuLabel class="text-xs text-muted-foreground">
Teams
</DropdownMenuLabel>
<DropdownMenuItem
v-for="(team, index) in teams"
:key="team.name"
class="gap-2 p-2"
@click="activeTeam = team"
>
<div class="flex size-6 items-center justify-center rounded-sm border">
<component :is="team.logo" class="size-4 shrink-0" />
</div>
{{ team.name }}
<DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem class="gap-2 p-2">
<div class="flex size-6 items-center justify-center rounded-md border bg-background">
<Plus class="size-4" />
</div>
<div class="font-medium text-muted-foreground">
Add team
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template>

51
apps/www/src/registry/new-york/block/Sidebar10/page.vue Normal file
View File

@ -0,0 +1,51 @@
<script lang="ts">
export const description = 'A sidebar in a popover.'
export const iframeHeight = '800px'
</script>
<script setup lang="ts">
import AppSidebar from '@/registry/new-york/block/Sidebar10/components/AppSidebar.vue'
import NavActions from '@/registry/new-york/block/Sidebar10/components/NavActions.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from '@/registry/new-york/ui/breadcrumb'
import { Separator } from '@/registry/new-york/ui/separator'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header class="flex h-14 shrink-0 items-center gap-2">
<div class="flex flex-1 items-center gap-2 px-3">
<SidebarTrigger />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage class="line-clamp-1">
Project Management & Task Tracking
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div class="ml-auto px-3">
<NavActions />
</div>
</header>
<div class="flex flex-1 flex-col gap-4 px-4 py-10">
<div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
<div class="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
</div>
</SidebarInset>
</SidebarProvider>
</template>

93
apps/www/src/registry/new-york/block/Sidebar11/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,93 @@
<script setup lang="ts">
import Tree from '@/registry/new-york/block/Sidebar11/components/Tree.vue'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
type SidebarProps,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
import { File } from 'lucide-vue-next'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
changes: [
{
file: 'README.md',
state: 'M',
},
{
file: 'api/hello/route.ts',
state: 'U',
},
{
file: 'app/layout.tsx',
state: 'M',
},
],
tree: [
[
'app',
[
'api',
['hello', ['route.ts']],
'page.tsx',
'layout.tsx',
['blog', ['page.tsx']],
],
],
[
'components',
['ui', 'button.tsx', 'card.tsx'],
'header.tsx',
'footer.tsx',
],
['lib', ['util.ts']],
['public', 'favicon.ico', 'vercel.svg'],
'.eslintrc.json',
'.gitignore',
'next.config.js',
'tailwind.config.js',
'package.json',
'README.md',
],
}
</script>
<template>
<Sidebar v-bind="props">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Changes</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="(item, index) in data.changes" :key="index">
<SidebarMenuButton>
<File />
{{ item.file }}
</SidebarMenuButton>
<SidebarMenuBadge>{{ item.state }}</SidebarMenuBadge>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>Files</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<Tree v-for="(item, index) in data.tree" :key="index" :item="item" />
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

51
apps/www/src/registry/new-york/block/Sidebar11/components/Tree.vue Normal file
View File

@ -0,0 +1,51 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
} from '@/registry/new-york/ui/sidebar'
import { ChevronRight, File, Folder } from 'lucide-vue-next'
const props = defineProps<{
item: string | any[]
}>()
const [name, ...items] = Array.isArray(props.item) ? props.item : [props.item]
</script>
<template>
<SidebarMenuButton
v-if="!items.length"
:is-active="name === 'button.tsx'"
class="data-[active=true]:bg-transparent"
>
<File />
{{ name }}
</SidebarMenuButton>
<SidebarMenuItem v-else>
<Collapsible
class="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
:default-open="name === 'components' || name === 'ui'"
>
<CollapsibleTrigger as-child>
<SidebarMenuButton>
<ChevronRight class="transition-transform" />
<Folder />
{{ name }}
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
<Tree v-for="(subItem, index) in items" :key="index" :item="subItem" />
</SidebarMenuSub>
</CollapsibleContent>
</Collapsible>
</SidebarMenuItem>
</template>

61
apps/www/src/registry/new-york/block/Sidebar11/page.vue Normal file
View File

@ -0,0 +1,61 @@
<script lang="ts">
export const description = 'A sidebar with a collapsible file tree.'
export const iframeHeight = '800px'
</script>
<script setup lang="ts">
import AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/registry/new-york/ui/breadcrumb'
import { Separator } from '@/registry/new-york/ui/separator'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<SidebarTrigger class="-ml-1" />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
components
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
ui
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>button.tsx</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
</div>
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
</div>
</SidebarInset>
</SidebarProvider>
</template>

67
apps/www/src/registry/new-york/block/Sidebar12/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,67 @@
<script setup lang="ts">
import Calendars from '@/registry/new-york/block/Sidebar12/components/Calendars.vue'
import DatePicker from '@/registry/new-york/block/Sidebar12/components/DatePicker.vue'
import NavUser from '@/registry/new-york/block/Sidebar12/components/NavUser.vue'
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
type SidebarProps,
SidebarRail,
SidebarSeparator,
} from '@/registry/new-york/ui/sidebar'
import { Plus } from 'lucide-vue-next'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
user: {
name: 'shadcn',
email: 'm@example.com',
avatar: '/avatars/shadcn.jpg',
},
calendars: [
{
name: 'My Calendars',
items: ['Personal', 'Work', 'Family'],
},
{
name: 'Favorites',
items: ['Holidays', 'Birthdays'],
},
{
name: 'Other',
items: ['Travel', 'Reminders', 'Deadlines'],
},
],
}
</script>
<template>
<Sidebar v-bind="props">
<SidebarHeader class="h-16 border-b border-sidebar-border">
<NavUser :user="data.user" />
</SidebarHeader>
<SidebarContent>
<DatePicker />
<SidebarSeparator class="mx-0" />
<Calendars :calendars="data.calendars" />
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>
<Plus />
<span>New Calendar</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
<SidebarRail />
</Sidebar>
</template>

64
apps/www/src/registry/new-york/block/Sidebar12/components/Calendars.vue Normal file
View File

@ -0,0 +1,64 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarSeparator,
} from '@/registry/new-york/ui/sidebar'
import { Check, ChevronRight } from 'lucide-vue-next'
const props = defineProps<{
calendars: {
name: string
items: string[]
}[]
}>()
</script>
<template>
<template v-for="(calendar, index) in calendars" :key="calendar.name">
<SidebarGroup class="py-0">
<Collapsible
:default-open="index === 0"
class="group/collapsible"
>
<SidebarGroupLabel
as-child
class="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
>
<CollapsibleTrigger>
{{ calendar.name }}
<ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="(item, index) in calendar.items" :key="item">
<SidebarMenuButton>
<div
:data-active="index < 2"
class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
>
<Check class="hidden size-3 group-data-[active=true]/calendar-item:block" />
</div>
{{ item }}
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</CollapsibleContent>
</Collapsible>
</SidebarGroup>
<SidebarSeparator class="mx-0" />
</template>
</template>

15
apps/www/src/registry/new-york/block/Sidebar12/components/DatePicker.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import { Calendar } from '@/registry/new-york/ui/calendar'
import {
SidebarGroup,
SidebarGroupContent,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarGroup class="px-0">
<SidebarGroupContent>
<Calendar class="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
</SidebarGroupContent>
</SidebarGroup>
</template>

116
apps/www/src/registry/new-york/block/Sidebar12/components/NavUser.vue Normal file
View File

@ -0,0 +1,116 @@
<script setup lang="ts">
import {
Avatar,
AvatarFallback,
AvatarImage,
} from '@/registry/new-york/ui/avatar'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@/registry/new-york/ui/sidebar'
import {
BadgeCheck,
Bell,
ChevronsUpDown,
CreditCard,
LogOut,
Sparkles,
} from 'lucide-vue-next'
const props = defineProps<{
user: {
name: string
email: string
avatar: string
}
}>()
const { isMobile } = useSidebar()
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user.avatar" :alt="user.name" />
<AvatarFallback class="rounded-lg">
CN
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ user.name }}</span>
<span class="truncate text-xs">{{ user.email }}</span>
</div>
<ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="start"
:side-offset="4"
>
<DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user.avatar" :alt="user.name" />
<AvatarFallback class="rounded-lg">
CN
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ user.name }}</span>
<span class="truncate text-xs">{{ user.email }}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Sparkles />
Upgrade to Pro
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<BadgeCheck />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<Bell />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOut />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template>

44
apps/www/src/registry/new-york/block/Sidebar12/page.vue Normal file
View File

@ -0,0 +1,44 @@
<script lang="ts">
export const description = 'A sidebar with a calendar.'
export const iframeHeight = '800px'
</script>
<script setup lang="ts">
import AppSidebar from '@/registry/new-york/block/Sidebar12/components/AppSidebar.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from '@/registry/new-york/ui/breadcrumb'
import { Separator } from '@/registry/new-york/ui/separator'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header class="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
<SidebarTrigger class="-ml-1" />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage>October 2024</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-5">
<div v-for="i in 20" :key="i" class="aspect-square rounded-xl bg-muted/50" />
</div>
</div>
</SidebarInset>
</SidebarProvider>
</template>

130
apps/www/src/registry/new-york/block/Sidebar13/components/SettingsDialog.vue Normal file
View File

@ -0,0 +1,130 @@
<script setup lang="ts">
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/registry/new-york/ui/breadcrumb'
import { Button } from '@/registry/new-york/ui/button'
import {
Dialog,
DialogContent,
DialogDescription,
DialogTitle,
DialogTrigger,
} from '@/registry/new-york/ui/dialog'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
} from '@/registry/new-york/ui/sidebar'
import {
Bell,
Check,
Globe,
Home,
Keyboard,
Link,
Lock,
Menu,
MessageCircle,
Paintbrush,
Settings,
Video,
} from 'lucide-vue-next'
import { ref } from 'vue'
const data = {
nav: [
{ name: 'Notifications', icon: Bell },
{ name: 'Navigation', icon: Menu },
{ name: 'Home', icon: Home },
{ name: 'Appearance', icon: Paintbrush },
{ name: 'Messages & media', icon: MessageCircle },
{ name: 'Language & region', icon: Globe },
{ name: 'Accessibility', icon: Keyboard },
{ name: 'Mark as read', icon: Check },
{ name: 'Audio & video', icon: Video },
{ name: 'Connected accounts', icon: Link },
{ name: 'Privacy & visibility', icon: Lock },
{ name: 'Advanced', icon: Settings },
],
}
const open = ref(true)
</script>
<template>
<Dialog v-model:open="open">
<DialogTrigger as-child>
<Button size="sm">
Open Dialog
</Button>
</DialogTrigger>
<DialogContent class="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
<DialogTitle class="sr-only">
Settings
</DialogTitle>
<DialogDescription class="sr-only">
Customize your settings here.
</DialogDescription>
<SidebarProvider class="items-start">
<Sidebar collapsible="none" class="hidden md:flex">
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in data.nav" :key="item.name">
<SidebarMenuButton
as-child
:is-active="item.name === 'Messages & media'"
>
<a href="#">
<component :is="item.icon" />
<span>{{ item.name }}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<main class="flex h-[480px] flex-1 flex-col overflow-hidden">
<header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
<div class="flex items-center gap-2 px-4">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
Settings
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>Messages & media</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
<div
v-for="i in 10"
:key="i"
class="aspect-video max-w-3xl rounded-xl bg-muted/50"
/>
</div>
</main>
</SidebarProvider>
</DialogContent>
</Dialog>
</template>

14
apps/www/src/registry/new-york/block/Sidebar13/page.vue Normal file
View File

@ -0,0 +1,14 @@
<script lang="ts">
export const description = 'A sidebar in a dialog.'
export const iframeHeight = '800px'
</script>
<script setup lang="ts">
import SettingsDialog from '@/registry/new-york/block/Sidebar13/components/SettingsDialog.vue'
</script>
<template>
<div class="flex h-svh items-center justify-center">
<SettingsDialog />
</div>
</template>

194
apps/www/src/registry/new-york/block/Sidebar14/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,194 @@
<script setup lang="ts">
import type {
SidebarProps,
} from '@/registry/new-york/ui/sidebar'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
navMain: [
{
title: 'Getting Started',
url: '#',
items: [
{
title: 'Installation',
url: '#',
},
{
title: 'Project Structure',
url: '#',
},
],
},
{
title: 'Building Your Application',
url: '#',
items: [
{
title: 'Routing',
url: '#',
},
{
title: 'Data Fetching',
url: '#',
isActive: true,
},
{
title: 'Rendering',
url: '#',
},
{
title: 'Caching',
url: '#',
},
{
title: 'Styling',
url: '#',
},
{
title: 'Optimizing',
url: '#',
},
{
title: 'Configuring',
url: '#',
},
{
title: 'Testing',
url: '#',
},
{
title: 'Authentication',
url: '#',
},
{
title: 'Deploying',
url: '#',
},
{
title: 'Upgrading',
url: '#',
},
{
title: 'Examples',
url: '#',
},
],
},
{
title: 'API Reference',
url: '#',
items: [
{
title: 'Components',
url: '#',
},
{
title: 'File Conventions',
url: '#',
},
{
title: 'Functions',
url: '#',
},
{
title: 'next.config.js Options',
url: '#',
},
{
title: 'CLI',
url: '#',
},
{
title: 'Edge Runtime',
url: '#',
},
],
},
{
title: 'Architecture',
url: '#',
items: [
{
title: 'Accessibility',
url: '#',
},
{
title: 'Fast Refresh',
url: '#',
},
{
title: 'Next.js Compiler',
url: '#',
},
{
title: 'Supported Browsers',
url: '#',
},
{
title: 'Turbopack',
url: '#',
},
],
},
{
title: 'Community',
url: '#',
items: [
{
title: 'Contribution Guide',
url: '#',
},
],
},
],
}
</script>
<template>
<Sidebar v-bind="props">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in data.navMain" :key="item.title">
<SidebarMenuButton as-child>
<a :href="item.url" class="font-medium">
{{ item.title }}
</a>
</SidebarMenuButton>
<SidebarMenuSub v-if="item.items.length">
<SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
<SidebarMenuSubButton
as-child
:is-active="subItem.isActive"
>
<a :href="subItem.url">{{ subItem.title }}</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

53
apps/www/src/registry/new-york/block/Sidebar14/page.vue Normal file
View File

@ -0,0 +1,53 @@
<script lang="ts">
export const iframeHeight = '800px'
export const description = 'A sidebar on the right.'
</script>
<script setup lang="ts">
import AppSidebar from '@/registry/new-york/block/Sidebar14/components/AppSidebar.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/registry/new-york/ui/breadcrumb'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<SidebarInset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
Building Your Application
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<SidebarTrigger class="-mr-1 ml-auto rotate-180" />
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
</div>
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
</div>
</SidebarInset>
<AppSidebar side="right" />
</SidebarProvider>
</template>

194
apps/www/src/registry/new-york/block/Sidebar15/components/AppSidebar.vue Normal file
View File

@ -0,0 +1,194 @@
<script setup lang="ts">
import type {
SidebarProps,
} from '@/registry/new-york/ui/sidebar'
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
navMain: [
{
title: 'Getting Started',
url: '#',
items: [
{
title: 'Installation',
url: '#',
},
{
title: 'Project Structure',
url: '#',
},
],
},
{
title: 'Building Your Application',
url: '#',
items: [
{
title: 'Routing',
url: '#',
},
{
title: 'Data Fetching',
url: '#',
isActive: true,
},
{
title: 'Rendering',
url: '#',
},
{
title: 'Caching',
url: '#',
},
{
title: 'Styling',
url: '#',
},
{
title: 'Optimizing',
url: '#',
},
{
title: 'Configuring',
url: '#',
},
{
title: 'Testing',
url: '#',
},
{
title: 'Authentication',
url: '#',
},
{
title: 'Deploying',
url: '#',
},
{
title: 'Upgrading',
url: '#',
},
{
title: 'Examples',
url: '#',
},
],
},
{
title: 'API Reference',
url: '#',
items: [
{
title: 'Components',
url: '#',
},
{
title: 'File Conventions',
url: '#',
},
{
title: 'Functions',
url: '#',
},
{
title: 'next.config.js Options',
url: '#',
},
{
title: 'CLI',
url: '#',
},
{
title: 'Edge Runtime',
url: '#',
},
],
},
{
title: 'Architecture',
url: '#',
items: [
{
title: 'Accessibility',
url: '#',
},
{
title: 'Fast Refresh',
url: '#',
},
{
title: 'Next.js Compiler',
url: '#',
},
{
title: 'Supported Browsers',
url: '#',
},
{
title: 'Turbopack',
url: '#',
},
],
},
{
title: 'Community',
url: '#',
items: [
{
title: 'Contribution Guide',
url: '#',
},
],
},
],
}
</script>
<template>
<Sidebar v-bind="props">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in data.navMain" :key="item.title">
<SidebarMenuButton as-child>
<a :href="item.url" class="font-medium">
{{ item.title }}
</a>
</SidebarMenuButton>
<SidebarMenuSub v-if="item.items.length">
<SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
<SidebarMenuSubButton
as-child
:is-active="subItem.isActive"
>
<a :href="subItem.url">{{ subItem.title }}</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

64
apps/www/src/registry/new-york/block/Sidebar15/components/Calendars.vue Normal file
View File

@ -0,0 +1,64 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarSeparator,
} from '@/registry/new-york/ui/sidebar'
import { Check, ChevronRight } from 'lucide-vue-next'
const props = defineProps<{
calendars: {
name: string
items: string[]
}[]
}>()
</script>
<template>
<template v-for="(calendar, index) in calendars" :key="calendar.name">
<SidebarGroup class="py-0">
<Collapsible
:default-open="index === 0"
class="group/collapsible"
>
<SidebarGroupLabel
as-child
class="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
>
<CollapsibleTrigger>
{{ calendar.name }}
<ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="(item, index) in calendar.items" :key="item">
<SidebarMenuButton>
<div
:data-active="index < 2"
class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
>
<Check class="hidden size-3 group-data-[active=true]/calendar-item:block" />
</div>
{{ item }}
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</CollapsibleContent>
</Collapsible>
</SidebarGroup>
<SidebarSeparator class="mx-0" />
</template>
</template>

15
apps/www/src/registry/new-york/block/Sidebar15/components/DatePicker.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import { Calendar } from '@/registry/new-york/ui/calendar'
import {
SidebarGroup,
SidebarGroupContent,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarGroup class="px-0">
<SidebarGroupContent>
<Calendar class="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
</SidebarGroupContent>
</SidebarGroup>
</template>

91
apps/www/src/registry/new-york/block/Sidebar15/components/NavFavorites.vue Normal file
View File

@ -0,0 +1,91 @@
<script setup lang="ts">
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@/registry/new-york/ui/sidebar'
import {
ArrowUpRight,
Link,
MoreHorizontal,
StarOff,
Trash2,
} from 'lucide-vue-next'
defineProps<{
favorites: {
name: string
url: string
emoji: string
}[]
}>()
const { isMobile } = useSidebar()
</script>
<template>
<SidebarGroup class="group-data-[collapsible=icon]:hidden">
<SidebarGroupLabel>Favorites</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem v-for="item in favorites" :key="item.name">
<SidebarMenuButton as-child>
<a :href="item.url" :title="item.name">
<span>{{ item.emoji }}</span>
<span>{{ item.name }}</span>
</a>
</SidebarMenuButton>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuAction show-on-hover>
<MoreHorizontal />
<span class="sr-only">More</span>
</SidebarMenuAction>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
:align="isMobile ? 'end' : 'start'"
>
<DropdownMenuItem>
<StarOff class="text-muted-foreground" />
<span>Remove from Favorites</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Link class="text-muted-foreground" />
<span>Copy Link</span>
</DropdownMenuItem>
<DropdownMenuItem>
<ArrowUpRight class="text-muted-foreground" />
<span>Open in New Tab</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Trash2 class="text-muted-foreground" />
<span>Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</template>

31
apps/www/src/registry/new-york/block/Sidebar15/components/NavMain.vue Normal file
View File

@ -0,0 +1,31 @@
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
defineProps<{
items: {
title: string
url: string
icon: LucideIcon
isActive?: boolean
}[]
}>()
</script>
<template>
<SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton as-child :is-active="item.isActive">
<a :href="item.url">
<component :is="item.icon" />
<span>{{ item.title }}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</template>

42
apps/www/src/registry/new-york/block/Sidebar15/components/NavSecondary.vue Normal file
View File

@ -0,0 +1,42 @@
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import type { Component } from 'vue'
import {
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
defineProps<{
items: {
title: string
url: string
icon: LucideIcon
badge?: Component
}[]
}>()
</script>
<template>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton as-child>
<a :href="item.url">
<component :is="item.icon" />
<span>{{ item.title }}</span>
</a>
</SidebarMenuButton>
<SidebarMenuBadge v-if="item.badge">
<component :is="item.badge" />
</SidebarMenuBadge>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</template>

116
apps/www/src/registry/new-york/block/Sidebar15/components/NavUser.vue Normal file
View File

@ -0,0 +1,116 @@
<script setup lang="ts">
import {
Avatar,
AvatarFallback,
AvatarImage,
} from '@/registry/new-york/ui/avatar'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@/registry/new-york/ui/sidebar'
import {
BadgeCheck,
Bell,
ChevronsUpDown,
CreditCard,
LogOut,
Sparkles,
} from 'lucide-vue-next'
const props = defineProps<{
user: {
name: string
email: string
avatar: string
}
}>()
const { isMobile } = useSidebar()
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user.avatar" :alt="user.name" />
<AvatarFallback class="rounded-lg">
CN
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ user.name }}</span>
<span class="truncate text-xs">{{ user.email }}</span>
</div>
<ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="start"
:side-offset="4"
>
<DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user.avatar" :alt="user.name" />
<AvatarFallback class="rounded-lg">
CN
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ user.name }}</span>
<span class="truncate text-xs">{{ user.email }}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Sparkles />
Upgrade to Pro
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<BadgeCheck />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<Bell />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOut />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template>

82
apps/www/src/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue Normal file
View File

@ -0,0 +1,82 @@
<script setup lang="ts">
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/registry/new-york/ui/collapsible'
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from '@/registry/new-york/ui/sidebar'
import { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'
defineProps<{
workspaces: {
name: string
emoji: string
pages: {
name: string
emoji: string
}[]
}[]
}>()
</script>
<template>
<SidebarGroup>
<SidebarGroupLabel>Workspaces</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<Collapsible v-for="workspace in workspaces" :key="workspace.name">
<SidebarMenuItem>
<SidebarMenuButton as-child>
<a href="#">
<span>{{ workspace.emoji }}</span>
<span>{{ workspace.name }}</span>
</a>
</SidebarMenuButton>
<CollapsibleTrigger as-child>
<SidebarMenuAction
class="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
show-on-hover
>
<ChevronRight />
</SidebarMenuAction>
</CollapsibleTrigger>
<SidebarMenuAction show-on-hover>
<Plus />
</SidebarMenuAction>
<CollapsibleContent>
<SidebarMenuSub>
<SidebarMenuSubItem v-for="page in workspace.pages" :key="page.name">
<SidebarMenuSubButton as-child>
<a href="#">
<span>{{ page.emoji }}</span>
<span>{{ page.name }}</span>
</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</template>

276
apps/www/src/registry/new-york/block/Sidebar15/components/SidebarLeft.vue Normal file
View File

@ -0,0 +1,276 @@
<script setup lang="ts">
import NavFavorites from '@/registry/new-york/block/Sidebar15/components/NavFavorites.vue'
import NavMain from '@/registry/new-york/block/Sidebar15/components/NavMain.vue'
import NavSecondary from '@/registry/new-york/block/Sidebar15/components/NavSecondary.vue'
import NavWorkspaces from '@/registry/new-york/block/Sidebar15/components/NavWorkspaces.vue'
import TeamSwitcher from '@/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue'
import {
Sidebar,
SidebarContent,
SidebarHeader,
type SidebarProps,
SidebarRail,
} from '@/registry/new-york/ui/sidebar'
import {
AudioWaveform,
Blocks,
Calendar,
Command,
Home,
Inbox,
MessageCircleQuestion,
Search,
Settings2,
Sparkles,
Trash2,
} from 'lucide-vue-next'
const props = defineProps<SidebarProps>()
// This is sample data.
const data = {
teams: [
{
name: 'Acme Inc',
logo: Command,
plan: 'Enterprise',
},
{
name: 'Acme Corp.',
logo: AudioWaveform,
plan: 'Startup',
},
{
name: 'Evil Corp.',
logo: Command,
plan: 'Free',
},
],
navMain: [
{
title: 'Search',
url: '#',
icon: Search,
},
{
title: 'Ask AI',
url: '#',
icon: Sparkles,
},
{
title: 'Home',
url: '#',
icon: Home,
isActive: true,
},
{
title: 'Inbox',
url: '#',
icon: Inbox,
badge: '10',
},
],
navSecondary: [
{
title: 'Calendar',
url: '#',
icon: Calendar,
},
{
title: 'Settings',
url: '#',
icon: Settings2,
},
{
title: 'Templates',
url: '#',
icon: Blocks,
},
{
title: 'Trash',
url: '#',
icon: Trash2,
},
{
title: 'Help',
url: '#',
icon: MessageCircleQuestion,
},
],
favorites: [
{
name: 'Project Management & Task Tracking',
url: '#',
emoji: '📊',
},
{
name: 'Family Recipe Collection & Meal Planning',
url: '#',
emoji: '🍳',
},
{
name: 'Fitness Tracker & Workout Routines',
url: '#',
emoji: '💪',
},
{
name: 'Book Notes & Reading List',
url: '#',
emoji: '📚',
},
{
name: 'Sustainable Gardening Tips & Plant Care',
url: '#',
emoji: '🌱',
},
{
name: 'Language Learning Progress & Resources',
url: '#',
emoji: '🗣️',
},
{
name: 'Home Renovation Ideas & Budget Tracker',
url: '#',
emoji: '🏠',
},
{
name: 'Personal Finance & Investment Portfolio',
url: '#',
emoji: '💰',
},
{
name: 'Movie & TV Show Watchlist with Reviews',
url: '#',
emoji: '🎬',
},
{
name: 'Daily Habit Tracker & Goal Setting',
url: '#',
emoji: '✅',
},
],
workspaces: [
{
name: 'Personal Life Management',
emoji: '🏠',
pages: [
{
name: 'Daily Journal & Reflection',
url: '#',
emoji: '📔',
},
{
name: 'Health & Wellness Tracker',
url: '#',
emoji: '🍏',
},
{
name: 'Personal Growth & Learning Goals',
url: '#',
emoji: '🌟',
},
],
},
{
name: 'Professional Development',
emoji: '💼',
pages: [
{
name: 'Career Objectives & Milestones',
url: '#',
emoji: '🎯',
},
{
name: 'Skill Acquisition & Training Log',
url: '#',
emoji: '🧠',
},
{
name: 'Networking Contacts & Events',
url: '#',
emoji: '🤝',
},
],
},
{
name: 'Creative Projects',
emoji: '🎨',
pages: [
{
name: 'Writing Ideas & Story Outlines',
url: '#',
emoji: '✍️',
},
{
name: 'Art & Design Portfolio',
url: '#',
emoji: '🖼️',
},
{
name: 'Music Composition & Practice Log',
url: '#',
emoji: '🎵',
},
],
},
{
name: 'Home Management',
emoji: '🏡',
pages: [
{
name: 'Household Budget & Expense Tracking',
url: '#',
emoji: '💰',
},
{
name: 'Home Maintenance Schedule & Tasks',
url: '#',
emoji: '🔧',
},
{
name: 'Family Calendar & Event Planning',
url: '#',
emoji: '📅',
},
],
},
{
name: 'Travel & Adventure',
emoji: '🧳',
pages: [
{
name: 'Trip Planning & Itineraries',
url: '#',
emoji: '🗺️',
},
{
name: 'Travel Bucket List & Inspiration',
url: '#',
emoji: '🌎',
},
{
name: 'Travel Journal & Photo Gallery',
url: '#',
emoji: '📸',
},
],
},
],
}
</script>
<template>
<Sidebar class="border-r-0" v-bind="props">
<SidebarHeader>
<TeamSwitcher :teams="data.teams" />
<NavMain :items="data.navMain" />
</SidebarHeader>
<SidebarContent>
<NavFavorites :favorites="data.favorites" />
<NavWorkspaces :workspaces="data.workspaces" />
<NavSecondary :items="data.navSecondary" class="mt-auto" />
</SidebarContent>
<SidebarRail />
</Sidebar>
</template>

71
apps/www/src/registry/new-york/block/Sidebar15/components/SidebarRight.vue Normal file
View File

@ -0,0 +1,71 @@
<script setup lang="ts">
import Calendars from '@/registry/new-york/block/Sidebar15/components/Calendars.vue'
import DatePicker from '@/registry/new-york/block/Sidebar15/components/DatePicker.vue'
import NavUser from '@/registry/new-york/block/Sidebar15/components/NavUser.vue'
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
type SidebarProps,
SidebarSeparator,
} from '@/registry/new-york/ui/sidebar'
import { Plus } from 'lucide-vue-next'
const props = withDefaults(defineProps<SidebarProps>(), {
collapsible: 'none',
})
// This is sample data.
const data = {
user: {
name: 'shadcn',
email: 'm@example.com',
avatar: '/avatars/shadcn.jpg',
},
calendars: [
{
name: 'My Calendars',
items: ['Personal', 'Work', 'Family'],
},
{
name: 'Favorites',
items: ['Holidays', 'Birthdays'],
},
{
name: 'Other',
items: ['Travel', 'Reminders', 'Deadlines'],
},
],
}
</script>
<template>
<Sidebar
class="sticky hidden lg:flex top-0 h-svh border-l"
v-bind="props"
>
<SidebarHeader class="h-16 border-b border-sidebar-border">
<NavUser :user="data.user" />
</SidebarHeader>
<SidebarContent>
<DatePicker />
<SidebarSeparator class="mx-0" />
<Calendars :calendars="data.calendars" />
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>
<Plus />
<span>New Calendar</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</Sidebar>
</template>

81
apps/www/src/registry/new-york/block/Sidebar15/components/TeamSwitcher.vue Normal file
View File

@ -0,0 +1,81 @@
<script setup lang="ts">
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/registry/new-york/ui/dropdown-menu'
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/registry/new-york/ui/sidebar'
import { ChevronDown, Plus } from 'lucide-vue-next'
import { type Component, ref } from 'vue'
const props = defineProps<{
teams: {
name: string
logo: Component
plan: string
}[]
}>()
const activeTeam = ref(props.teams[0])
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton class="w-fit px-1.5">
<div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
<component :is="activeTeam.logo" class="size-3" />
</div>
<span class="truncate font-semibold">{{ activeTeam.name }}</span>
<ChevronDown class="opacity-50" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-64 rounded-lg"
align="start"
side="bottom"
:side-offset="4"
>
<DropdownMenuLabel class="text-xs text-muted-foreground">
Teams
</DropdownMenuLabel>
<DropdownMenuItem
v-for="(team, index) in teams"
:key="team.name"
class="gap-2 p-2"
@click="activeTeam = team"
>
<div class="flex size-6 items-center justify-center rounded-sm border">
<component :is="team.logo" class="size-4 shrink-0" />
</div>
{{ team.name }}
<DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem class="gap-2 p-2">
<div class="flex size-6 items-center justify-center rounded-md border bg-background">
<Plus class="size-4" />
</div>
<div class="font-medium text-muted-foreground">
Add team
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template>

49
apps/www/src/registry/new-york/block/Sidebar15/page.vue Normal file
View File

@ -0,0 +1,49 @@
<script lang="ts">
export const iframeHeight = '800px'
export const description = 'A left and right sidebar.'
</script>
<script setup lang="ts">
import SidebarLeft from '@/registry/new-york/block/Sidebar15/components/SidebarLeft.vue'
import SidebarRight from '@/registry/new-york/block/Sidebar15/components/SidebarRight.vue'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from '@/registry/new-york/ui/breadcrumb'
import { Separator } from '@/registry/new-york/ui/separator'
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/registry/new-york/ui/sidebar'
</script>
<template>
<SidebarProvider>
<SidebarLeft />
<SidebarInset>
<header class="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
<div class="flex flex-1 items-center gap-2 px-3">
<SidebarTrigger />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage class="line-clamp-1">
Project Management & Task Tracking
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
<div class="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
</div>
</SidebarInset>
<SidebarRight />
</SidebarProvider>
</template>