shadcn ui sidebar

barra lateral shadcn/ui ·

Uma barra lateral retrátil impressionante e funcional para Next.js construída em cima do Shadcn/UI completa com aktop e capacidade de resposta móvel.

Características

• Mini retrátil e barra lateral larga
• Menu da barra lateral rolável
• Menu da folha para celular
• Menu agrupado com rótulos
• Submenu dobrável
• Lista de itens de menu extraídos

Tecnologia/estrutura usada

• Next.js 14
• Shadcn/ui
• Tailwind CSS
• TypeScript
• Zustand

Instalação

Registro personalizado

Se você estiver usando @shadcn/ui 2.0.0 ou posterior, poderá instalar o componente diretamente no registro.

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

Exemplo de uso para 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 >
  ) ;
} 

Iniciando o projeto localmente

1. Clone o repositório

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

2. Instalar dependências

    cd shadcn-ui-sidebar
   npm install

3. Execute o servidor de desenvolvimento

   npm run dev

Demonstração

O aplicativo está hospedado no Vercel. Clique aqui para visitar.
Link de demonstração direta: https://shadcn-ui-sidebar.salimi.my

Capturas de tela

Modo de luz

Modo escuro

Mini barra lateral

Menu da folha