docmost/apps/client/src/components/ui/sidebar-toggle-button.tsx

import React from "react";
import {
  IconLayoutSidebarRightCollapse,
  IconLayoutSidebarRightExpand
} from "@tabler/icons-react";
import { ActionIcon, BoxProps, ElementProps, MantineColor, MantineSize } from "@mantine/core";

export interface SidebarToggleProps extends BoxProps, ElementProps<"button"> {
  size?: MantineSize | `compact-${MantineSize}` | (string & {});
  color?: MantineColor;
  opened?: boolean;
}

const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
  ({ opened, size = "sm", ...others }, ref) => {
    return (
      <ActionIcon
        size={size}
        aria-expanded={opened}
        {...others}
        variant="subtle"
        color="gray"
        ref={ref}
      >
        {opened ? (
          <IconLayoutSidebarRightExpand />
        ) : (
          <IconLayoutSidebarRightCollapse />
        )}
      </ActionIcon>
    );
  }
);

export default SidebarToggle;