@shapla/react-dashboard-layout

React Sidenav

A simple dashboard layout to build your app dashboard for React.

Table of contents

• Installation
• Usage

Installation

npm install --save @shapla/react-dashboard-layout

Usage

Styles

with Sass:

import '@shapla/react-dashboard-layout/src/index.scss';

with CSS:

import '@shapla/react-dashboard-layout/dist/dashboard-layout.css';

Javascript Instantiation

import React from 'react';
import DashboardLayout from '@shapla/react-dashboard-layout';

class MyApp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeSideNav: false,
    }
  }

  render() {
    let menuItems = Array.from({length: 50}, (x, i) => i + 1);
    let sidenavMenu = menuItems.map(item => {
      return (
        <li className="sidenav-list__item" key={item}>
          <a className="sidenav-list__link" href="#">Menu item {item}</a>
        </li>
      );
    });
    let pageContent = menuItems.map(item => <p key={item}>{item}. Dashboard Content will go here</p>);

    return (
      <div className="example-dashboard-layout">
        <DashboardLayout
          title='Dashboard'
          userDisplayName='Sayful Islam'
          avatarUrl='https://s.gravatar.com/avatar/5ba82fcf5f7f8b24097ff9f7ad4b3d5b?s=80'
          activateSideNav={this.state.activateSideNav}
          onShowSidenav={() => this.setState({activateSideNav: true})}
          onHideSidenav={() => this.setState({activateSideNav: false})}
          sidenavMenu={<ul className="sidenav-list">{sidenavMenu}</ul>}
          children={pageContent}
          navbarEnd={<a href='#'>Log Out</a>}
        />
      </div>
    )
  }
}

Props

Property	Type	Required	Default	Description
title	String	no	``	Dashboard title
userDisplayName	String	no	``	User display name
avatarUrl	String	no	``	User avatar url
greeting	String	no	Hello,	Greeting text
headerHeight	String	no	56px	Height of header
headerTheme	String	no	primary	Value can be default or primary or secondary
activateSideNav	Boolean	no	false	Boolean value hide/show sidenav
navWidth	String	no	300px	Width of side navigation
sideNavType	String	no	overlay	Value can be overlay or off-canvas. off-canvas is experimental
showOverlay	Boolean	no	true	Should show overlay color when side navigation active.
sidenavContent	String	no	``	Side navigation content.
navbarBrand	String	no	``	Navbar brand content.
navbarStart	String	no	``	Content after navbarBrand
navbarEnd	String	no	``	Content at right side
onShowSidenav	Func	no	``	Function run when click to open sidebar.
onHideSidenav	Func	no	``	Function run when click to hide sidebar.