@equinor/eds-core-react/dist/esm/components/SideBar/SideBarToggle.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import { Button } from '../Button/index.js';
import { Icon } from '../Icon/index.js';
import { useSideBar } from './SideBar.context.js';
import { sidebar } from './SideBar.tokens.js';
import { collapse, expand } from '@equinor/eds-icons';
import styled, { css } from 'styled-components';
import { jsx } from 'react/jsx-runtime';
import { Tooltip } from '../Tooltip/Tooltip.js';

const {
  entities: {
    toggleOpen: {
      typography: {
        color: iconColor
      }
    }
  }
} = sidebar;
const ToggleContainer = styled.div.withConfig({
  displayName: "SideBarToggle__ToggleContainer",
  componentId: "sc-1w5e44y-0"
})(({
  theme
}) => {
  const {
    minWidth,
    entities: {
      toggleOpen: {
        spacings: {
          top,
          bottom
        }
      }
    }
  } = theme;
  return css(["width:", ";display:grid;place-items:center;margin-block-start:", ";margin-block-end:", ";"], minWidth, top, bottom);
});
const SideBarToggle = /*#__PURE__*/forwardRef(function SideBarToggle({
  ...rest
}, ref) {
  const props = {
    ...rest,
    ref
  };
  const {
    isOpen,
    setIsOpen
  } = useSideBar();
  return /*#__PURE__*/jsx(ToggleContainer, {
    open: isOpen,
    ...props,
    children: /*#__PURE__*/jsx(Tooltip, {
      title: isOpen ? 'Collapse' : 'Expand',
      placement: "right",
      children: /*#__PURE__*/jsx(Button, {
        variant: "ghost_icon",
        onClick: () => setIsOpen(!isOpen),
        "aria-label": isOpen ? 'Collapse' : 'Expand',
        children: /*#__PURE__*/jsx(Icon, {
          size: 24,
          data: isOpen ? collapse : expand,
          color: iconColor
        })
      })
    })
  });
});

export { SideBarToggle };