Stylish React Sidebar

Stylish Sidebar - start your React project with an elegant super-easy-to-implement sidebar.

Demo

Looking for an example to play around with? Check this out.

Get started

Installation

npm install stylish-sidebar
yarn add stylish-sidebar

Usage

Here is a quick example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import StylishSidebar from 'stylish-sidebar';

function App() {
  return (
    <AppContainer>  // make sure this parent includes 'display: flex' property
      <StylishSidebar />
      <MainView />
    </AppContainer>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'));

Yes, it is that simple.

Documentation

Props:

Name	Type	Default	Description
backgroundImage	object	{ url: 'demo image url', showImage: true }	Background image url.
useImageAsHeader	bool	false	Use image logo as sidebar header.
header	object	{ fullName: 'Your Sidebar', shortName: 'SS' }	Header: full name and two letter short name.
headerImage	object	{ urlExpanded: '', urlCollapsed: '', heightExpanded: '32pt', heightCollapsed: '22pt', align: 'center' }	Two types of image url - for expanded/collapsed sidebar options. Alignment options are left / right / center.
menuItems	array	Example prop* of two menu items, first one without submenus, second one - with submenus: [{ name: 'Item1', to: '/icon1', icon: 'demo SVG icon', subMenuItems: [] }, { name: 'Item2', to: '/icon2', icon: 'demo SVG icon', subMenuItems: [ { name: 'Sub1', to: '/sub1' }, { name: 'Sub2', to: '/sub2' }, { name: 'Sub3', to: '/sub3'}] }]	Each menu item includes a name, icon url and an array of sub-menu items. If submenus array is not empty, a down caret arrow will be displayed next to item name. Page navigation can be done by using indexes of menuItems / subMenus. These indexes are provided by click event callbacks. A potential navigation option is adding an optional [ to ] key to each menu item and using it with via clicking event and useHistory or redirect or another preffered navigation method (see Demo for a good example with useHistory, click on source code button < >). * Once menuItems prop is provided, demo will be ovewritten. Empty menuItems array prop will result in an empty sidebar. † Navigation will not work in the demo because you will have to setup your own preferred navigation.
fonts	object	{ header: 'Poppins', menu: 'Poppins' }	Header and menu fonts.
colorPalette	object	{ bgColor1: '#434343CC', bgColor2: '#000000CC', fontColor: '#a1a1a1', fontColorSelected: '#010101', dividerColor: '#303030', selectedBackgroundCollapsedMode: 'light' }	Default background colors include opacity. For best color experience with background images, set the opacity of your background colors to 80%, by appending 'CC' to hex code ('CC' is 80% opacity) or by adding 0.8 if you are using rgb. Background for collapsed mode is either 'light' or 'dark'.
presetPalette	string		Stylish sidebar comes with a list of 'preset' color palettes. They can be added by providing one of below strings: 'dejaVu' 'swampyGreen' 'pinkAndBlue' 'julyBlue' 'gothicDark' 'ashes' 'beaverBrown' 'oceanBlue' 'saltNPepper' To see these palettes in action, check the demo. If a string from above list is provided, colorPalette prop will be ignored.
widthExpanded	string	'20%'	Width applied to expanded state of the sidebar
widthCollapsed	string	'5%'	Width applied to collapsed state of the sidebar
minWidth	string	'80px'	Minimum sidebar width.
maxWidth	string	'280px'	Maximum sidebar width.
isOpen	bool	true	If true, StylishSidebar is expanded. This prop is optional, it is only needed if you wish to lock the sidebar in expanded/collapsed state. If isOpen is not provided, open/close functionality is done inside the component.
showToggler	bool	true	Show/hide sidebar state toggler (hamburger icon).
onTogglerClick	func		Callback fired when toggler is clicked.
onHeaderClick	func		Callback fired when sidebar header is clicked.
onMenuItemClick	func		Callback fired when a menu item is clicked. Typically onMenuItemClick is used to change url and/or to prompt user to save changes on the page prior to exiting. index parameter can be used for desired manipulations - index refers to position of the menu item in menuItems array. Signature: function(event: object, index: number) => void event: event source of the callback index: menu item index See Demo for an example.
onSubMenuItemClick	func		Callback fired when a sub menu item is clicked. Functionality is similar to that of onMenuItemClick except this callback returns indexes of both menu item and clicked sub menu item. Signature: function(event: object, menuItemIndex: number, subMenuItemIndex: number) => void event: event source of the callback menuItemIndex: menu item index subMenuItemIndex: sub menu item index See Demo for an example.
className	object		Override or extend the styles applied to the component.
ref	object		A ref that points to the first DOM node of the Sidebar.

License

This project is licensed under the terms of the MIT license.

Community

Get help or stay up to date.
If you have questions or are interested in a customized Stylish Sidebar for your project, feel free to reach out.

Created by @EugeCos sometime in 2020