Typescript React

permission-driven multi-level side menu.

Installation

Atomik Sidenav is available as an npm package.

with npm

 npm i atomik-sidenav

with yarn

 yarn add atomik-sidenav

Usage

Here is a quick example to get you started, it's all you need:

Declare Permissions

const permissions = {
	home: true,
	billing: false,
	productsManagement: {
		editProducts: true,
		isAdmin: true,
		viewInsights: true
	},
	shippings: true,
	tools: {
		analyzer: true
	}
};

Declare Routes configuration

import SearchIcon from "../icons/svg/SearchIcon";
import ShippingIcon from "../icons/svg/ShippingIcon";
import ChartIcon from "../icons/svg/ChartIcon";
import AnalyzeIcon from "../icons/svg/Analyze";

const routesConfiguration = permissions => {
	return !permissions
		? []
		: [
				{
					path: "/",
					title: "home",
					label: "home",
					Icon: SearchIcon,
					permissions: permissions.home,
					secondary: [
						{
							path: "/",
							title: "home"
						},
						{
							path: "/section_two",
							title: "section two"
						},
						{
							path: "/section_three",
							title: "section three"
						}
					]
				},
				{
					path: "/shipping",
					title: "shipping",
					label: "shipping",
					Icon: ShippingIcon,
					permissions: permissions.shippings,
					secondary: [
						{
							path: "/",
							title: "shipping"
						}
					]
				},
				{
					path: "/insight",
					title: "insight",
					label: "insight",
					Icon: ChartIcon,
					permissions: permissions.productsManagement.viewInsights,
					secondary: [
						{
							path: "/",
							title: "Content insight"
						}
					]
				},
				{
					path: "/tools",
					title: "tools",
					label: "tools",
					Icon: AnalyzeIcon,
					permissions: permissions.tools.analyzer,
					secondary: [
						{
							path: "/",
							title: "one"
						},
						{
							path: "/two",
							title: "two"
						}
					]
				}
		  ];
};

export default routesConfiguration;

Declare Colors Theme

const Theme = [
	{
		primaryColor: "#fff",
		secondaryColor: "white",
		hoverColor: "#323541",
		accentColor: "#292c35",
		mainColor: "#1c77f2",
		textColor: "black",
		primaryIcon: "green",
		secondaryIcon: "#1e2027",
		accentIcon: "#1c47f1"
	},
	{
		primaryColor: "black",
		secondaryColor: "black",
		hoverColor: "##679f63",
		accentColor: "#3e853d",
		mainColor: "#87c000",
		primaryIcon: "#3e853d",
		secondaryIcon: "#87c000",
		accentIcon: "#1e2027"
	},
	{
		primaryColor: "#fff",
		secondaryColor: "#282c34",
		hoverColor: "#323541",
		accentColor: "#252526",
		mainColor: "#21252b",
		textColor: "black",
		primaryIcon: "green",
		secondaryIcon: "darkgrey",
		accentIcon: "black"
	}
];

export default Theme;

Use Atomik-sidenav

import * as React from "react";
import SideNav from "atomik-sidenav";

import Theme from "./theme";

import routesConfiguration from "./routesConfig";

const Presenter = ({ Theme, currentView }) => {
	const [activeSubMenu, setactiveSubMenu] = React.useState(
		routesConfiguration(permissions)[0].secondary[0].path
	);
	const [actualRoute, setactualRoute] = React.useState(currentView);

	const handleMenuChange = e => {
		if (e !== actualRoute) {
			setactiveSubMenu(routesConfiguration(permissions)[0].secondary[0].path);
		}
		setactualRoute(e);
	};
	const handleSubMenuChange = e => setactiveSubMenu(e);

	return (
		<div style={{ display: "flex" }}>
			<SideNav
				actualRoute={actualRoute}
				subRoute={activeSubMenu}
				onSubRouteChange={handleSubMenuChange}
				onRouteChange={handleMenuChange}
				routesConfiguration={routesConfiguration(permissions)}
				Theme={Theme}
			/>
			<div
				style={{
					width: "150px",
					position: "absolute",
					left: "50%",
					top: "50%"
				}}
			>
				<span>menu</span>: {actualRoute}
				<hr />
				<span>subMenu</span>: {activeSubMenu}
			</div>
		</div>
	);
};

function App() {
	return <Presenter Theme={Theme[0]} />;
}

export default App;

Yes, it's really all you need to get started as you can see in this live and interactive demo: