Bifrost Design System

useNav()

import useNav from "@intility/bifrost-react/hooks/useNav";

The useNav hook returns an object with state accessors for the side and mobile menus. It has to be used from a descendant of the <Nav> component.

bool sideCollapsed is true when sidebar is collapsed (even if hidden for small screens)
function setSideCollapsed(bool) provides your own mechanism for persisting collapse/expand sidebar state
- NOTE: function will be undefined if not provided
bool mobileOpen is true when mobile nav is open (even if hidden for large screens)
function setMobileOpen(bool) shows/hides the mobile nav (will still be hidden for large screens)
bool isMobile is true when mobile hamburger menu button is displayed and sidebar is hidden avoid for SSR/SSG/Unit testing (depends on window.matchMedia)

Try resizing your window to test the mobile part of the demo.

Open Sandbox

import { useState } from "react";
import Nav from "@intility/bifrost-react/Nav";
import Button from "@intility/bifrost-react/Button";
import useNav from "@intility/bifrost-react/hooks/useNav";

function MyComponent() {
  const {
    sideCollapsed,
    setSideCollapsed,
    // isMobile, // won't work for SSR, here I'n using 'from-xl' and 'to-xl' classNames instead
    mobileOpen,
    setMobileOpen,
  } = useNav();

  return (
    <>
      <div className="to-xl bfl-inline">
        <Button onClick={() => setMobileOpen(true)}>Open mobile menu</Button>
        <span>Mobile menu is {mobileOpen ? "open" : "closed"}</span>
      </div>
      <Button
        className="from-xl"
        onClick={() => setSideCollapsed(!sideCollapsed)}
      >
        {sideCollapsed ? "Expand sidebar" : "Collapse sidebar"}
      </Button>
    </>
  );
}

function CloseButton() {
  const { setMobileOpen } = useNav();
  return (
    <button type="button" onClick={() => setMobileOpen(false)}>
      <Nav.Item>Close mobile menu</Nav.Item>
    </button>
  );
}

// MyComponent is a descendant of <Nav>, therefore it can use the useNav hook.
// It is recommended that Nav is the topmost view-component
// Meaning that auth/redux/router providers should wrap Nav

export default function NavDemo() {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Nav
      logo="Demo App"
      side={<></>}
      mobile={<CloseButton />}
      sideProps={{ collapsed, onCollapsedChange: setCollapsed }}
    >
      <MyComponent />
    </Nav>
  );
}