About

drawer-navigation is a drawer navigation solution for react web apps.

Getting Started

Install the pacakage :

npm i drawer-navigation

yarn add drawer-navigation

Include in your project

import Drawer from 'drawer-navigation/Drawer

<Drawer
routes={[{url:"/",component:<Home/>,label:"Home"},{url:"/shop",component:<h1>About</h1>,label:"Shop"}]}
mainContainerStyles={{
  display:"flex",
  flexDirection:"column",
  justifyContent:"center",
  alignItems:"center",
  width:"100%",
  height:"100%"
}}
hamburgerIconColor="red"
drawerCloseColor="orange"
drawerBackgroundColor="blue"
drawerLabelsStyle={{border:"2.5px solid orange",width:"auto",color:"orange",fontFamily:"monospace",padding:12,margin:2}}
/>

Props

Props	Details	Example
routes	takes an array of objects:{url:"/your-page",component<YourPage/>,label:"Your Page"}
mainContainerStyles	Styles the containing element that holds the main view takes a styles object : {width:200,height:200}
drawerLabelsStyle	Styles the drawer element that holds the main view takes a styles object : {width:200,height:200}
hamburgerIconColor	color for the hamburger icon that opens teh drawer , takes a string	"red"
drawerCloseColor	color for the close drawer icon that closes the drawer , takes a string	"orange"
drawerBackgroundColor	drawer background color , takes a string	"green"

Examples