SidePanel

Basic example

tsx

import React from 'react';
import Button from 'intergalactic/button';
import { List } from 'intergalactic/typography';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} mt={20}>
        <List size={300} marker={null}>
          {['Features', 'Pricing', 'Resources', 'Company', 'Extra tools'].map((name, i, arr) => (
            <React.Fragment key={i}>
              <List.Item>{name}</List.Item>
              {i < arr.length - 1}
            </React.Fragment>
          ))}
        </List>
      </SidePanel>
    </React.Fragment>
  );
};

export default Demo;

import React from 'react';
import Button from 'intergalactic/button';
import { List } from 'intergalactic/typography';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} mt={20}>
        <List size={300} marker={null}>
          {['Features', 'Pricing', 'Resources', 'Company', 'Extra tools'].map((name, i, arr) => (
            <React.Fragment key={i}>
              <List.Item>{name}</List.Item>
              {i < arr.length - 1}
            </React.Fragment>
          ))}
        </List>
      </SidePanel>
    </React.Fragment>
  );
};

export default Demo;

Advanced example

tsx

import React from 'react';
import Button from 'intergalactic/button';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} mt={20}>
        <SidePanel.Close />
        <SidePanel.Header>
          <SidePanel.Back>Go to Tool Name</SidePanel.Back>
          <SidePanel.Title>Heading 6, 16px</SidePanel.Title>
        </SidePanel.Header>
        <SidePanel.Body>Content</SidePanel.Body>
        <SidePanel.Footer justifyContent='center' pt={2}>
          <Button use='primary'>Primary</Button>
          <Button ml={2}>Cancel</Button>
        </SidePanel.Footer>
      </SidePanel>
    </>
  );
};

export default Demo;

import React from 'react';
import Button from 'intergalactic/button';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} mt={20}>
        <SidePanel.Close />
        <SidePanel.Header>
          <SidePanel.Back>Go to Tool Name</SidePanel.Back>
          <SidePanel.Title>Heading 6, 16px</SidePanel.Title>
        </SidePanel.Header>
        <SidePanel.Body>Content</SidePanel.Body>
        <SidePanel.Footer justifyContent='center' pt={2}>
          <Button use='primary'>Primary</Button>
          <Button ml={2}>Cancel</Button>
        </SidePanel.Footer>
      </SidePanel>
    </>
  );
};

export default Demo;

Access to internal components

You can access the internal components by expanding SidePanel for SidePanel.Overlay, SidePanel.Panel or SidePanel.Close.

tsx

import React from 'react';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel closable={false} visible={visible} onClose={() => setVisible(false)}>
        <SidePanel.Overlay>
          <SidePanel.Panel mt={20}>
            <SidePanel.Close />
            <Text size={300} tag='p'>
              Waba-laba-dub-dub!
              <Button mt={3}>I'm just a button</Button>
            </Text>
          </SidePanel.Panel>
        </SidePanel.Overlay>
      </SidePanel>
    </React.Fragment>
  );
};

export default Demo;

import React from 'react';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel closable={false} visible={visible} onClose={() => setVisible(false)}>
        <SidePanel.Overlay>
          <SidePanel.Panel mt={20}>
            <SidePanel.Close />
            <Text size={300} tag='p'>
              Waba-laba-dub-dub!
              <Button mt={3}>I'm just a button</Button>
            </Text>
          </SidePanel.Panel>
        </SidePanel.Overlay>
      </SidePanel>
    </React.Fragment>
  );
};

export default Demo;

Placement

The component is supplied with three positioning options.

tsx

import React from 'react';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import Select from 'intergalactic/select';
import SidePanel, { SidePanelPlacement } from 'intergalactic/side-panel';

const placements: SidePanelPlacement[] = ['left', 'right', 'bottom'];

const Demo = () => {
  const [visible, setVisible] = React.useState(false);
  const [placement, setPlacement] = React.useState(placements[1]);

  return (
    <React.Fragment>
      <Text size={300} tag='div' mb={2}>
        Placement:
      </Text>
      <Select
        value={placement}
        options={arrToOptions(placements)}
        onChange={setPlacement}
        size='l'
      />
      <Button onClick={() => setVisible(true)} use='primary' theme='success' size='l' ml={3}>
        Show SidePanel
      </Button>
      <SidePanel
        visible={visible}
        onClose={() => setVisible(false)}
        placement={placement}
        mt={placement === 'bottom' ? 0 : 20}
      >
        <Text size={300} tag='p'>
          Waba-laba-dub-dub!
        </Text>
        <Button mt={3}>I'm just a button</Button>
      </SidePanel>
    </React.Fragment>
  );
};

function arrToOptions(arr) {
  return arr.map((i) => ({ value: i, label: i, children: i }));
}

export default Demo;

import React from 'react';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import Select from 'intergalactic/select';
import SidePanel, { SidePanelPlacement } from 'intergalactic/side-panel';

const placements: SidePanelPlacement[] = ['left', 'right', 'bottom'];

const Demo = () => {
  const [visible, setVisible] = React.useState(false);
  const [placement, setPlacement] = React.useState(placements[1]);

  return (
    <React.Fragment>
      <Text size={300} tag='div' mb={2}>
        Placement:
      </Text>
      <Select
        value={placement}
        options={arrToOptions(placements)}
        onChange={setPlacement}
        size='l'
      />
      <Button onClick={() => setVisible(true)} use='primary' theme='success' size='l' ml={3}>
        Show SidePanel
      </Button>
      <SidePanel
        visible={visible}
        onClose={() => setVisible(false)}
        placement={placement}
        mt={placement === 'bottom' ? 0 : 20}
      >
        <Text size={300} tag='p'>
          Waba-laba-dub-dub!
        </Text>
        <Button mt={3}>I'm just a button</Button>
      </SidePanel>
    </React.Fragment>
  );
};

function arrToOptions(arr) {
  return arr.map((i) => ({ value: i, label: i, children: i }));
}

export default Demo;

Disabling overlay

By default, the component is rendered with an overlay, but you can change this by not passing it.

tsx

import React from 'react';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)}>
        <SidePanel.Panel mt={20}>
          <Text size={300} tag='p'>
            Waba-laba-dub-dub!
            <Button mt={3}>I'm just a button</Button>
          </Text>
        </SidePanel.Panel>
      </SidePanel>
    </React.Fragment>
  );
};

export default Demo;

import React from 'react';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)}>
        <SidePanel.Panel mt={20}>
          <Text size={300} tag='p'>
            Waba-laba-dub-dub!
            <Button mt={3}>I'm just a button</Button>
          </Text>
        </SidePanel.Panel>
      </SidePanel>
    </React.Fragment>
  );
};

export default Demo;

Portals

By default, the component is rendered to the portal, at the bottom of the body. You can redefine this behavior with PortalProvider and disable it with disablePortal.

tsx

import React from 'react';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} disablePortal>
        <SidePanel.Panel mt={20}>
          <Text size={300} tag='p'>
            Waba-laba-dub-dub!
          </Text>
          <Button mt={3}>I'm just a button</Button>
        </SidePanel.Panel>
      </SidePanel>
    </React.Fragment>
  );
};

export default Demo;

import React from 'react';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import SidePanel from 'intergalactic/side-panel';

const Demo = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <React.Fragment>
      <Button onClick={() => setVisible(true)}>Show SidePanel</Button>
      <SidePanel visible={visible} onClose={() => setVisible(false)} disablePortal>
        <SidePanel.Panel mt={20}>
          <Text size={300} tag='p'>
            Waba-laba-dub-dub!
          </Text>
          <Button mt={3}>I'm just a button</Button>
        </SidePanel.Panel>
      </SidePanel>
    </React.Fragment>
  );
};

export default Demo;

Iframe

We recommend not using this component inside an iframe. Instead, use modal window or dropdown.

Accessibility

Writing code

CSS Injection

Basic example

Advanced example

Access to internal components

Placement

Disabling overlay

Portals

Iframe

Accessibility

CSS Injection

SidePanel

Basic example ​

Advanced example ​

Access to internal components ​

Placement ​

Disabling overlay ​

Portals ​

Iframe ​

Basic example

Advanced example

Access to internal components

Placement

Disabling overlay

Portals

Iframe