Farmblocks SideNav

A React Sidebar Navigation component

Table of Contents

• Installation
• Usage
• API
  • SideNav
  • NavItem
• Helpers
  • PageWrapper
• License

Installation

npm install @crave/farmblocks-sidenav

or with yarn

yarn add @crave/farmblocks-sidenav

Usage

Basic example

import React from "react";
import { render } from "react-dom";
import SideNav from "@crave/farmblocks-sidenav";

const App = () => <SideNav render={() => <div>Sidebar Content</div>} />;

render(<App />, document.getElementById("root"));

Basic example with NavItem and PageWrapper

import React from "react";
import { render } from "react-dom";
import SideNav, { NavItem, PageWrapper } from "@crave/farmblocks-sidenav";

const App = () => (
  <>
    <SideNav
      render={() => (
        <>
          <NavItem active>Item 1 (active)</NavItem>
          <NavItem>Item 2</NavItem>
          <NavItem>Item 3</NavItem>
        </>
      )}
    />
    <PageWrapper expanded>
      <h1>Page Content</h1>
    </PageWrapper>
  </>
);

render(<App />, document.getElementById("root"));

Complete Example

import React from "react";
import { render } from "react-dom";
import SideNav, { NavItem, PageWrapper } from "@crave/farmblocks-sidenav";

const App = () => {
  const [expanded, { toggle, collapse }] = useToggle(false);
  const [selected, setSelected] = useState(tabs[0]);
  const tabs = ["purveyor", "order", "search", "meat"];
  const icons = {
    purveyor: <MdVendors />,
    order: <MdOrders />,
    search: <MdSearch />,
    meat: <LgMeats />,
  };

  return (
    <>
      <SideNav
        expanded={expanded}
        onToggle={toggle}
        onClose={collapse}
        render={props => (
          <>
            <NavHeader />
            {tabs.map(tab => (
              <NavItem
                key={tab}
                onClick={() => setSelected(tab)}
                active={tab === selected}
                icon={icons[tab]}
                {...props}
              >
                {tab}
              </NavItem>
            ))}
          </>
        )}
      />

      <PageWrapper expanded={expanded}>
        <LoremIpsumBlock />
      </PageWrapper>
    </>
  );
};

render(<App />, document.getElementById("root"));

To see these and more examples running, visit our storybook

API

SideNav

• expanded (Boolean) = true

  Whether the sidebar is expanded or collapsed.

• variant ("push" | "fullScreen" | "overlay") = "push"

  Style variant.

• expandedWidth (String) = "270px"

  Width on expanded false state. (only applied on "push" || "overlay" variant)

• collapsedWidth (String) = "56px"

  Width on expanded true state. (only applied on "push" variant)

• onToggle (Function)

  Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.

• onClose (Function)

  Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on "fullScreen" || "overlay" variant)

• render (Function)

  Render the sidebar content, passing as args the following props: highlightColor, variant.

• highlightColor (String) = farmblocks.theme.colors.RED_ORANGE

  Color used to highlight active/hover nav item and close button.

• backgroundColor (String) = farmblocks.theme.colors.SUGAR

  Sidebar background color.

• offsetTop (String) = "0"

  Top spacing gap.

• zIndex (Number ) = 100

  The sidebar z-index

NavItem

• active (Boolean)

  Whether the item is with active style or not.

• variant ("push" | "fullScreen" | "overlay") = "push"

  On "fullScreen" variant set rounded style, the other ones don't affect this component.

• children (Node)

  Text content.

• highlightColor (String) = farmblocks.theme.colors.RED_ORANGE

  Color used to highlight active/hover items.

• backgroundColor (String)

  NavItem background color.

• icon (Node)

  Icon node (don't use icon prop along with image prop)

• iconSize (String | Number)

  Font size for the icon

• image (String)

  Image src url (don't use image prop along with icon prop)

• imageProps (Object)

  Props for image component, accept any farmblocks-image prop

• textProps (Object)

  Props for children(text) component, accept any farmblocks-text prop

Helpers

PageWrapper

Wrapper to help your page follow sidenav variants.

import React from "react";
import { render } from "react-dom";
import SideNav, {
  NavItem,
  PageWrapper,
  variants,
} from "@crave/farmblocks-sidenav";

const App = () => (
  <>
    <SideNav variant={variants.OVERLAY} expanded />
    <PageWrapper variant={variants.OVERLAY} expanded>
      <h1>Page Content</h1>
    </PageWrapper>
  </>
);

render(<App />, document.getElementById("root"));

API

• expanded (Boolean) = false

  Whether the sidebar is expanded or collapsed.

• variant ("push" | "fullScreen" | "overlay") = "push"

  Sidebar variant style.

• expandedWidth (String) = "270px"

  Width on expanded false state. (only applied on "push" || "overlay" variant)

• collapsedWidth (String) = "56px"

  Width on expanded true state. (only applied on "push" variant)

• offsetTop (String) = "0"

  Top spacing gap.

• overlayProps (Object)

  Props passed to overlay component

License

MIT