React Sidebar Header SidebarTrigger Icon | SidebarTrigger

<header className="flex h-16 shrink-0 items-center gap-2 border-b

border-sidebar-border/50 px-6 transition-[width,height] ease-linear

group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">

            <div className="flex items-center gap-2">

                <SidebarTrigger className="-ml-1" />

                {/* <Breadcrumbs breadcrumbs={breadcrumbs} /> */}

            </div>

        </header>

এখানে কী হচ্ছে?

• flex → Header এর ভেতরের আইটেমগুলো row আকারে থাকবে

• h-16 → ডিফল্ট height = 64px

• shrink-0 → ছোট হলে header সাইজ কমবে না

• gap-2 → ভেতরের আইটেমগুলোর মাঝে 8px gap

• border-b → নিচে border

• transition-[width,height] → width/height smooth transition

• group-has-data-[collapsible=icon]/sidebar-wrapper:h-12
  → Sidebar যদি icon mode হয়ে যায়, তখন header height কমে h-12 (48px) হবে

• md:px-4 → medium screen এ padding কম হবে

---

ভিতরের অংশ

<div className="flex items-center gap-2">
    <SidebarTrigger className="-ml-1" />
    {/* <Breadcrumbs breadcrumbs={breadcrumbs} /> */}
</div>

• flex items-center → Sidebar trigger center aligned

• -ml-1 → SidebarTrigger একটু বাম দিকে টানা হয়েছে

• Breadcrumbs তুমি পরে চাইলে enable করতে পারবে।