How to use sidebar inside a div or another component

[TSSwork]

I use the shadcn ui sidebar 3 block in my web app, but it always take screen as as the option to stick in to but what i want it have side bar inside the div or another component basically i want the side bar in the blue colored area how do i do that ?

Here's sidebar layout code (AppSidebar component is still the same component used in shadcn ui sidebar 3 block didn't changed it)

import Authenticated from "./AuthenticatedLayout";
import { Separator } from "@/Components/ui/separator";
import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
} from "@/Components/ui/sidebar";
import { BreadcrumbBox } from "@/Components/Core/breadcrumb-box";
import { AppSidebar } from "@/Components/Core/app-sidebar";

export default function SideBarLayout({
    children,
    className,
    breadcrumbs,
    backgroundClassName,
}: PropsWithChildren<{
    className?: string;
    backgroundClassName?: string;
    breadcrumbs?: Array<{
        label: string;
        href: string | null;
    }>;
}>) {
    return (
        <Authenticated>
            <div className="w-full bg-white rounded-lg shadow">
                <SidebarProvider>
                    <div className="relative min-h-[600px] flex">
                        {/* Sidebar container */}
                        <div className="relative">
                            <SidebarTrigger className="absolute z-20 top-4 left-4" />
                            <SidebarInset
                                className="w-64 h-full border-r"
                                style={{
                                    position: "relative",
                                    height: "100%",
                                    maxHeight: "100%",
                                }}
                            >
                                <div className="pt-14">
                                    <AppSidebar />
                                </div>
                            </SidebarInset>
                        </div>

                        {/* Main content area */}
                        <div className={`flex-1 ${backgroundClassName}`}>
                            {breadcrumbs && (
                                <div className="px-6 py-4 border-b">
                                    <BreadcrumbBox nav={breadcrumbs} />
                                </div>
                            )}
                            <main className={`p-6 ${className}`}>
                                {children}
                            </main>
                        </div>
                    </div>
                </SidebarProvider>
            </div>
        </Authenticated>
    );
}

[Sakitha]

<div class="h-full relative">
    ...
    <Sidebar.Provider class = "absolute left-0 top-0 h-full min-h-full">
        <AppSidebar />
        <Sidebar.Trigger />
    </Sidebar.Provider>
</div>

and
<Sidebar.Root variant="floating" class="absolute h-full">

[dnbastos]

You can try using the prop collapsible="none". This way, the sidebar maintains its original position within the div, using a flex display.

To keep it collapsible on mobile, you can use the useIsMobile hook to apply this prop conditionally.

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const isMobile = useIsMobile();

  return (
    <Sidebar collapsible={isMobile ? "offcanvas" : "none"} {...props}>
      {/* ... */}
    </Sidebar>
  );
}

[brunobely]

What if I want to keep it inside the div but collapsible="icon"?

[dnbastos]

Unfortunately, that won’t work today.

I think you will need the solution with the absolute style.

[bgajsler]

Hi, is there any posibility to convert the sidebar to a simple component which can be embedet into any panel?