shapla-react-dashboard-layout v1.0.0

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