shadcn ui sidebar

แถบด้านข้าง Shadcn/UI ·

แถบด้านข้างที่ยืดหยุ่นและสามารถใช้งานได้สำหรับ Next.js สร้างขึ้นบน Shadcn/UI พร้อมเดสก์ท็อปและการตอบสนองมือถือ

คุณสมบัติ

• แถบด้านข้างที่พับเก็บได้และแถบด้านข้างกว้าง
• เมนูแถบด้านข้างที่เลื่อนได้
• เมนูแผ่นสำหรับมือถือ
• เมนูจัดกลุ่มพร้อมป้ายกำกับ
• เมนูย่อยที่ยุบได้
• รายการเมนูที่แยกออกมา

ใช้เทคโนโลยี/เฟรมเวิร์ก

• Next.js 14
• Shadcn/ui
• tailwind css
• ตัวพิมพ์ใหญ่
• ซุสและ

การติดตั้ง

รีจิสทรีที่กำหนดเอง

หากคุณใช้ @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

ภาพหน้าจอ

โหมดแสง

โหมดมืด

แถบด้านข้างขนาดเล็ก

เมนูแผ่น