Stylish Sidebar - start your React project with an elegant super-easy-to-implement sidebar.
Looking for an example to play around with? Check this out.
npm install stylish-sidebar
yarn add stylish-sidebarHere 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.
| 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) => voidevent: 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) => voidevent: 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. |
This project is licensed under the terms of the MIT license.
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent