shadcn ui sidebar

shadcn/ui側邊欄·

Next.js構建的令人驚嘆且功能性的可伸縮側欄。 JS在ShadCN/UI之上，配有台式機和移動響應能力。

特徵

• 可伸縮的小型側邊欄
• 可滾動的側欄菜單
• 手機的表菜單
• 標籤的分組菜單
• 可折疊子菜單
• 提取的菜單項列表

使用的技術/框架

• Next.js 14
• shadcn/ui
• 尾風CSS
• 打字稿
• Zustand

安裝

自定義註冊表

如果使用 @shadcn/ui 2.0.0或更高版本，則可以直接從註冊表中安裝組件。

npx shadcn@latest add https://raw.githubusercontent.com/salimi-my/shadcn-ui-sidebar/refs/heads/master/public/registry/shadcn-sidebar.json

or

npx shadcn@latest add https://shadcn-ui-sidebar.salimi.my/registry/shadcn-sidebar.json

nextjs的用法示例

 //layout.tsx
import AdminPanelLayout from "@/components/admin-panel/admin-panel-layout" ;

export default async function Layout ( {
  children ,
} : Readonly < {
  children : React . ReactNode ;
} > ) {
  return < AdminPanelLayout > { children } </ AdminPanelLayout > ;
}

//page.tsx
import { ContentLayout } from "@/components/admin-panel/content-layout" ;

export default function Page ( ) {
  return (
    < ContentLayout title = "Test" >
      < div > Test </ div >
    </ ContentLayout >
  ) ;
} 

在本地開始該項目

1. 克隆存儲庫

   git clone https://github.com/salimi-my/shadcn-ui-sidebar

2. 安裝依賴項

    cd shadcn-ui-sidebar
   npm install

3. 運行開發服務器

   npm run dev

演示

該應用程序託管在Vercel上。單擊此處訪問。
直接演示鏈接： https://shadcn-ui-sidebar.salimi.my

屏幕截圖

光模式

黑暗模式

迷你側邊欄

表菜單