shadcn ui sidebar

shadcn/uiサイドバー

デスクトップとモバイルの応答性を備えたShadCN/UIの上に構築されたnext.js用の見事で機能的な格納式サイドバー。

特徴

• 格納式ミニと広いサイドバー
• スクロール可能なサイドバーメニュー
• モバイル用のシートメニュー
• ラベル付きのグループ化されたメニュー
• 折りたたみ可能なサブメニュー
• 抽出されたメニュー項目リスト

使用される技術/フレームワーク

• next.js 14
• shadcn/ui
• Tailwind 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

スクリーンショット

ライトモード

ダークモード

ミニサイドバー

シートメニュー