SwashDocs

Nav

A nav anchored to left side of the screen.

import {
    Nav, NavBody, NavHeader,NavFooter, NavItem
  } from "swash/Nav";
  import { IoNotificationsOutline, IoOptionsOutline } from "swash/Icon";

  export const Example = () => {
    return (
      <div className="relative flex h-[500px] gap-4 bg-grey-bg-light">
        <Nav aria-label="My nav">
            <NavHeader>
                Mon Compte
            </NavHeader>
            <NavBody>
              <NavItem aria-current="page" ><IoOptionsOutline /> Personnalisation</NavItem>
              <NavItem><IoNotificationsOutline /> Notifications</NavItem>
            </NavBody>
            <NavFooter>
                Mentions légales
            </NavFooter>
        </Nav>
      </div>
    );
  };

Basic usage

One prop is required on the Nav component:

  • name: used to store the open navs in the localStorage and for accessibility concerns.

Three sections can be composed:

  • NavHeader: at the top, always displayed
  • NavBody: at the top, scrollable
  • NavFooter: at the bottom, always displayed

Component to use in the NavBody

NavItem: to create a nav item

props:

  • name: used to store the open navs in the localStorage and for search.
  • open: used to open the nav item.
  • hasSubNav: used to display a chevron.
  • isSubNav: used to display item as a subNav.

The state active is automatically when your component is accessible. aria-current="page" trigger the active state.

NavGroup: to create a group of nav items

This component needs to be composed with :

  • NavGroupHeader: to create a header for the group
  • NavGroupBody: to create a body for the group

Then NavGroupBody can be composed with NavItem.

Advanced usage

You can use, NavSearch implement a search.

import {
  Nav,
  NavBody,
  NavFooter,
  NavGroup,
  NavHeader,
  NavItem,
  NavSearch,
  } from "swash/Nav";
  import { IoNotificationsOutline, IoOptionsOutline } from "swash/Icon";

  export const Example = () => {
    return (
      <div className="relative flex h-[500px] gap-4 bg-grey-bg-light">
      <Nav name="My nav">
        <NavHeader>
          Mon Compte <NavSearch />{" "}
        </NavHeader>
        <NavBody>
          <NavItem slug="my-account">
            <IoOptionsOutline /> Mon compte
            <NavGroup>
              <NavItem slug="custom" aria-current="page">
                Personnalisation un peu trop longue
              </NavItem>
              <NavItem slug="params">Paramètres</NavItem>
            </NavGroup>
          </NavItem>
          <NavItem slug="profil">
            <IoOptionsOutline /> Profil
          </NavItem>
        </NavBody>
        <NavFooter>Mentions légales</NavFooter>
      </Nav>
    </div>
  );
  };