shadcn ui sidebar

barre latérale shadcn / ui ·

Une barre latérale rétractable étonnante et fonctionnelle pour Next.js construite sur le dessus de Shadcn / UI avec un bureau et une réactivité mobile.

Caractéristiques

• Mini rétractable et barre latérale large
• Menu de barre latérale défile
• Menu de feuille pour mobile
• Menu groupé avec des étiquettes
• Sous-menu pliable
• Liste des éléments de menu extraits

Tech / Framework utilisé

• Suivant.js 14
• Shadcn / ui
• CSS du vent arrière
• Manuscrit
• Zustand

Installation

Registre personnalisé

Si vous utilisez @ shadcn / ui 2.0.0 ou version ultérieure, vous pouvez installer le composant directement à partir du registre.

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

Exemple d'utilisation pour 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 >
  ) ;
} 

Démarrer le projet localement

1. Cloner le référentiel

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

2. Installer des dépendances

    cd shadcn-ui-sidebar
   npm install

3. Exécutez le serveur de développement

   npm run dev

Démo

L'application est hébergée sur Vercel. Cliquez ici pour visiter.
Lien de démonstration directe: https://shadcn-ui-sidebar.salimi.my

Captures d'écran

Mode léger

Mode sombre

Mini barre latérale

Menu de feuille