shadcn ui sidebar

barra lateral shadcn/ui ·

Una barra lateral retráctil impresionante y funcional para Next.js construidas sobre Shadcn/UI completa con escritorio y capacidad de respuesta móvil.

Características

• Mini retráctil y barra lateral
• Menú de la barra lateral desplazable
• Menú de la hoja para dispositivos móviles
• Menú agrupado con etiquetas
• Submenú plegable
• Lista de elementos del menú extraído

Tecnología/marco utilizado

• Next.js 14
• Shadcn/ui
• CSS de viento de cola
• Mecanografiado
• Zustand

Instalación

Registro personalizado

Si está utilizando @shadcn/ui 2.0.0 o posterior, puede instalar el componente directamente desde el 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

Ejemplo 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 >
  ) ;
} 

Comenzando el proyecto localmente

1. Clonar el repositorio

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

2. Instalar dependencias

    cd shadcn-ui-sidebar
   npm install

3. Ejecutar el servidor de desarrollo

   npm run dev

Manifestación

La aplicación está alojada en Vercel. Haga clic aquí para visitar.
Enlace de demostración directa: https://shadcn-ui-sidebar.salimi.my

Capturas de pantalla

Modo de luz

Modo oscuro

Mini barra lateral

Menú de hojas