shadcn ui sidebar

الشريط الجانبي Shadcn/UI ·

الشريط الجانبي المذهل والوظيفي القابل للسحب لـ Next.js تم تصميمه فوق Shadcn/UI مع استجابة سطح المكتب والهاتف المحمول.

سمات

• ميني ميني قابلة للسحب وشريط جانبي واسع
• قائمة الشريط الجانبي القابل للتمرير
• قائمة ورقة للجوال
• قائمة مجمعة مع الملصقات
• قائمة فرعية قابلة للطي
• قائمة عناصر القائمة المستخرجة

التكنولوجيا/الإطار المستخدمة

• Next.js 14
• Shadcn/UI
• Tailwind CSS
• TypeScript
• زوساند

تثبيت

سجل مخصص

إذا كنت تستخدم @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

لقطات الشاشة

وضع الضوء

الوضع المظلم

الشريط الجانبي الصغير

قائمة ورقة