BottomBar

Floating bottom bar

• Fixed positioning (will float on top of other content)
• Responsive vertical padding like .bf-page-padding (remove all padding with noPadding prop)
• Automatically makes space for sidebar/collapsed sidebar/no sidebar with transition
• Height will adjust to its content

<BottomBar>
  <Button>A button</Button>
</BottomBar>
<BottomBar>
  <Button>A button</Button>
</BottomBar>

Demo with Nav sidebar

import {
  faHome,
  faInfoCircle,
  faUser,
  faCog,
} from "@fortawesome/free-solid-svg-icons";
import BottomBar from "@intility/bifrost-react/BottomBar";
import Nav from "@intility/bifrost-react/Nav";
export default function () {
  return (
    <Nav
      logo="App Name"
      top={
        <>
          <a href="#path" title="Profile">
            <Nav.Item icon={faUser} />
          </a>
          <a href="#path">
            <Nav.Item>About</Nav.Item>
          </a>
        </>
      }
      side={
        <>
          <a href="#path">
            <Nav.Item icon={faHome}>Home</Nav.Item>
          </a>
          <a href="#path">
            <Nav.Item icon={faCog}>Settings</Nav.Item>
          </a>
        </>
      }
    >
      App content goes here
      <BottomBar>Bottom bar content</BottomBar>
    </Nav>
  );
}

Inline layout

See <Inline> for an easy way to place buttons and other inline content.

<BottomBar>
  <Inline align="center">
    <Button>Cancel</Button>
    <Inline.Separator />
    <span>Some text</span>
    <Button variant="filled">Done</Button>
  </Inline>
</BottomBar>
<BottomBar>
  <Inline align="center">
    <Button>Cancel</Button>
    <Inline.Separator />
    <span>Some text</span>
    <Button variant="filled">Done</Button>
  </Inline>
</BottomBar>