collapsable sidebar shadcn

Labib Amir Salimi answered on March 7, 2024 Popularity 6/10 Helpfulness 6/10

answer collapsable sidebar shadcn

collapsable sidebar shadcn

Comment

import { useRef } from "react";
import { ImperativePanelHandle } from "react-resizable-panels";
import { ResizablePanel, ResizablePanelGroup } from "./ui/resizable";

const CollapsibleSidebar = () => {
  const sidebarRef = useRef<ImperativePanelHandle>(null);

  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel
        collapsible
        maxSize={15}
        defaultSize={15}
        collapsedSize={3}
        ref={sidebarRef}
        className="h-screen bg-blue-300 transition-all"
      >
        <button
          onClick={() => {
            if (sidebarRef.current?.isCollapsed()) sidebarRef.current?.expand();
            else sidebarRef.current?.collapse();
          }}
        >
          Toggle
        </button>
        {/* sidebar content */}
      </ResizablePanel>
      <ResizablePanel className="bg-green-300" defaultSize={85}>
        {/* main content */}
      </ResizablePanel>
    </ResizablePanelGroup>
  );
};

export default CollapsibleSidebar;

Popularity 6/10 Helpfulness 6/10 Language typescript

Source: Grepper

Tags: collapsable sidebar typescript

Link to this answer
Share Copy Link

Contributed on Mar 07 2024

Labib Amir Salimi

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

collapsable sidebar shadcn

Contents

More Related Answers

collapsable sidebar shadcn

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.