@crave/farmblocks-sidenav NPM

Farmblocks logo

Farmblocks SideNav

A React Sidebar Navigation component

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