zksailor534 / React Adminlte Dash

react-adminlte-dash

React.js components for AdminLTE themed dashboard.

Based off of AdminLTE. Static hosted demo on GitHub Pages.

Todo (Path to 1.0.0)

• [ ] Universal/Isomorphic component
• [ ] Right sidebar
• [x] Footer
• [x] Content formatting
• [ ] Generic Navbar dropdowns
• [ ] Messaging Navbar dropdown
• [ ] Notifications Navbar dropdown
• [ ] Tasks Navbar dropdown
• [ ] Top-nav formatting option
• [ ] Boxed formatting option

Installation

npm install --save react-adminlte-dash

Usage

This module is in development, usage is subject to change. Not all components are fully functional.

This module uses Styled Components, so all CSS styling is included when the module is called. However, in order for the dashboard to use the entire available screen height, the parent container components must be set to height: 100%. This component sets the html & body styles, the user must set the app container.

In CSS:

#app {
  min-height: 100vh;
}

In ES6:

import { Dashboard, Header, Sidebar } from 'react-adminlte-dash';

const nav = () => ([
  <Header.Item href="/some/link" key="1" />
]);

const sb = () => ([
  <Sidebar.Menu header="NAVIGATION" key="1">
    <Sidebar.Menu.Item title="Home" href="/" />
  </Sidebar.Menu>
]);

const App = ({ children }) => (
  <Dashboard
    navbarChildren={nav()}
    sidebarChildren={sb()}
    theme="skin-blue"
  >
    {children}
  </Dashboard>
);

In order to create themed child components (not wrapped in navbarChildren, sidebarChildren, or footerChildren), use the withTheme wrapper provided by styled-components. This will provide the theme object to the child component. See src/styles/variables.js for the available variables. Documentation for these variables is TBD.

Included Components

Dashboard

Main component for theme. Handles theming, layout options, and tracks state. Provides a default empty header and sidebar.

Header

Header component which can be used independently of Dashboard (TBD). Wrapper for any top-based navigation components. Provides the following subcomponents:

• Header.Item
• Header.User

Header.Item

Header navbar menu item component. Renders links with images in header.

Header.UserMenu

Header user menu component. Renders user menu dropdown component in header bar.

Sidebar

Sidebar component which can be used independently of Dashboard (TBD). Wrapper for any sidebar navigation components. Provides the following subcomponents:

• Sidebar.Menu
• Sidebar.UserPanel
• Sidebar.Search

Sidebar.Menu

Sidebar navigation menu component. Wrapper for SidebarMenuItem components, which are provided as subcomponent:

• Sidebar.Menu.Item

Sidebar.Menu.Item

Sidebar navigation menu item component. Renders as link or dropdown menu. Can be nested in itself to provided nested dropdown menus.

<Sidebar.Menu.Item title="Level 1">
  <Sidebar.Menu.Item title="Level 2">
    <Sidebar.Menu.Item title="Level 3" />
  </Sidebar.Menu.Item>
</Sidebar.Menu.Item>

Sidebar.Search

Sidebar search component.

Sidebar.UserPanel

Sidebar user component.

License

react-adminlte-dash is available under MIT. See LICENSE for more details.