@crave/farmblocks-sidenav

A React Sidebar Navigation component

Usage no npm install needed!

<script type="module">
  import craveFarmblocksSidenav from 'https://cdn.skypack.dev/@crave/farmblocks-sidenav';
</script>

README

Farmblocks logo

Farmblocks SideNav

A React Sidebar Navigation component

Table of Contents

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