import { SidebarIcon } from '../icons.tsx'
import { useSidebar } from '../useSidebar.ts'
import { IconButton } from './Button.tsx'

interface Props {
  className?: string
}

/**
 * Show or hide the sidebar: the column on a wide screen, the drawer on a narrow one. A quiet square
 * that tints on hover like a row.
 */
export function SidebarToggle(props: Props) {
  const sidebar = useSidebar()
  return (
    <IconButton
      aria-label="Toggle sidebar"
      tone="row"
      size="lg"
      onClick={sidebar.toggle}
      className={props.className}
    >
      <SidebarIcon />
    </IconButton>
  )
}