📄Usage

This page demonstrates the installation and usage of package.

Getting Started ​

Installation

Using NPM

$ npm install side-navigation-react

Before installing please have a look at its peerDependencies.

Once you're ready please go through the component usage.

import React from 'react';
import { BrowserRouter as Router } from  'react-router-dom';
import {
  Container,
  Content,
  SideNavigation
} from 'react-side-navigation';

export default () => (
  <Router>
    <Container>
      <SideNavigation navItems={navItems} />

      <Content>
        {/* put your content here. */}
        <Route path="/interface/buttons" component={interfaceButttons} />
        <Route
          path="/interface/typography"
          component={interfaceTypography}
        />
      </Content>
    </Container>
  </Router>
);

Architecture of navItems.

const navItems = [
  {
    title: 'Item 1',
    children: [
      {
        title: 'Item 1.1',
        route: '/foo',
      },
      {
        title: 'Item 1.2',
        route: '/bar',
      }
    ],
  },
  {
    title: 'Item 2',
    children: [
      {
        title: 'Item 2.1',
        children: [
          {
            title: 'Item 2.1.1',
            route: '/baz',
          }
        ],
      },
    ],
  }
];

<SideNavigation> can be customised by passing following properties.

<SideNavigation
  heading={{
    title: 'Home',
    route: '/home',
  }}
  navItems={navItems}
  navBackground=""
  theme={{
    homeLinkColor: '',
    listItemHeadingColor: '',
    listItemHeadingArrowColor: '',
    subListItemTextColor: '',
    subListItemHeadingColor: '',
    subListItemHeadingArrowColor: '',
    hover: {
      subListItemBackgroundOnHover: '',
      subListItemColorOnHover: '',
    },
  }}
/>

All props are optional and acquire default values except navItems.

Fonts used in the <SideNavigation> can also be customised by passing fontFace property.

<Container
  fontFace={{
    name: `'Open Sans', sans-serif`,
    url: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap',
  }}
>
</Container>