SidebarToggleButton

A standalone button that opens or closes the main sidebar.

Installation

pnpm dlx shadcn@latest add @shadmin/sidebar-toggle-button

Usage

The default <Layout> already includes a sidebar toggle in its header. <SidebarToggleButton> is meant for custom layouts where you need to place the toggle outside of that header slot:

import { SidebarProvider } from "@/components/ui/sidebar";
import { SidebarToggleButton } from "@/components/admin";
 
const CustomLayout = ({ children }: { children: React.ReactNode }) => (
  <SidebarProvider>
    <aside>
      <SidebarToggleButton />
    </aside>
    <main>{children}</main>
  </SidebarProvider>
);

It is a thin wrapper around the shadcn/ui <SidebarTrigger> and therefore requires being rendered inside a <SidebarProvider>.

Props

Prop	Required	Type	Default	Description
`className`	Optional	`string`	`scale-125 sm:scale-100`	Extra Tailwind classes appended to the trigger
`ref`	Optional	`Ref<HTMLButtonElement>`	-	Forwarded to the underlying `<Button>`

`ref`

Forwards a ref to the underlying <Button> element.

import { useRef } from "react";
import { SidebarToggleButton } from "@/components/admin";
 
const CustomHeader = () => {
  const ref = useRef<HTMLButtonElement>(null);
  return <SidebarToggleButton ref={ref} />;
};