shadcn ui sidebar

Shadcn/UI -Seitenleiste ·

Eine atemberaubende und funktionale einziehbare Seitenleiste für Next.js, die auf Shadcn/UI aufgebaut ist, komplett mit Desktop und mobiler Reaktionsfähigkeit.

Merkmale

• Einziehbarer Mini und breiter Seitenleiste
• Scrollierbares Seitenleistenmenü
• Blattmenü für Mobilgeräte
• Gruppiertes Menü mit Etiketten
• Zusammenklappbarer Untermenü
• Aus extrahierte Menüelementliste extrahiert

Tech/Framework verwendet

• Weiter.js 14
• Shadcn/Ui
• Rückenwind -CSS
• Typoskript
• Zustand

Installation

Benutzerdefinierte Registrierung

Wenn Sie @Shadcn/UI 2.0.0 oder höher verwenden, können Sie die Komponente direkt aus der Registrierung installieren.

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

Nutzungsbeispiel für 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 >
  ) ;
} 

Das Projekt vor Ort starten

1. Klonen Sie das Repository

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

2. Abhängigkeiten installieren

    cd shadcn-ui-sidebar
   npm install

3. Führen Sie den Entwicklungsserver aus

   npm run dev

Demo

Die App wird auf Vercel gehostet. Klicken Sie hier, um sie zu besuchen.
Direkter Demo-Link: https://shadcn-ui-sidebar.salimi.my

Screenshots

Lichtmodus

Dunkler Modus

Mini -Seitenleiste

Blattmenü