shadcn ui sidebar

Shadcn/UI 사이드 바 ·

Shadcn/UI 위에 내장 된 Next.js 용 놀랍고 기능적인 개폐식 사이드 바는 데스크탑과 모바일 응답 성이 있습니다.

특징

• 개폐식 미니 및 넓은 사이드 바
• 스크롤 가능한 사이드 바 메뉴
• 모바일 용 시트 메뉴
• 레이블이있는 그룹화 된 메뉴
• 접을 수있는 하위 메뉴
• 추출 된 메뉴 항목 목록

사용 된 기술/프레임 워크

• 다음 .js 14
• shadcn/ui
• 테일 윈드 CSS
• TypeScript
• 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

스크린 샷

라이트 모드

다크 모드

미니 사이드 바

시트 메뉴