React-pro-sidebar: A Sidebar Menu

For a recent project, I had to make a Sidebar Navigation. I wanted to try out the react-pro-sidebar library and this seemed like a great opportunity for that. In this post, I will explain how I achieved the required sidenav using the react-pro-sidebar library.

First, I created a new app using create-react-app:

npx create-react-app react-sidenav-demo

Next, I installed the required library for the project:

npm i react-pro-sidebar react-icons

Next, in the src folder of the project, I created a folder called components. Inside the components folder, I created a component called Sidenav. The file structures looked like this:

In the side nav, I have added these codes:

import React, { useState } from "react";
//react pro sidebar components
import {
ProSidebar,
Menu,
MenuItem,
SidebarHeader,
SidebarFooter,
SidebarContent,
} from "react-pro-sidebar";
//icons from react icons
import { FaList, FaRegHeart } from "react-icons/fa";
import { FiHome, FiLogOut, FiArrowLeftCircle, FiArrowRightCircle } from "react-icons/fi";
import { RiPencilLine } from "react-icons/ri";
import { BiCog } from "react-icons/bi";
import { SiApacheairflow } from "react-icons/si";
import { GiAbstract050 } from "react-icons/gi";
//sidebar css from react-pro-sidebar module
import "react-pro-sidebar/dist/css/styles.css";
const Sidenav = () => {
//menuCollapse state using useState hook
const [menuCollapse, setMenuCollapse] = useState(false)
//custom function that will change menucollapse state from false to true and true to false
const menuIconClick = () => {
//condition checking to change state from true to false and vice versa
menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
};
return (
<>
<div id="header">
{/* collapsed props to change menu size using menucollapse state */}
<ProSidebar collapsed={menuCollapse}>
<SidebarHeader>
<div className="logotext">
{/* Icon change using menucollapse state */}
<p>{menuCollapse ? <GiAbstract050 /> : <SiApacheairflow /> }</p>
</div>
<div className="closemenu" onClick={menuIconClick}>
{/* changing menu collapse icon on click */}
{menuCollapse ? (
<FiArrowRightCircle/>
) : (
<FiArrowLeftCircle/>
)}
</div>
</SidebarHeader>
<SidebarContent>
<Menu iconShape="square">
<MenuItem active={true} icon={<FiHome />}>
Home
</MenuItem>
<MenuItem icon={<FaList />}>Category</MenuItem>
<MenuItem icon={<FaRegHeart />}>Favourite</MenuItem>
<MenuItem icon={<RiPencilLine />}>Author</MenuItem>
<MenuItem icon={<BiCog />}>Settings</MenuItem>
</Menu>
</SidebarContent>
<SidebarFooter>
<Menu iconShape="square">
<MenuItem icon={<FiLogOut />}>Logout</MenuItem>
</Menu>
</SidebarFooter>
</ProSidebar>
</div>
</>
);
}
export default Sidenav

In the browser after running npm start :

Now it was time to add a little bit of CSS to make it look a bit prettier. In the app.css I added these styles:

#header {
position: absolute;
width: 220px;
}
#header .closemenu {
color: rgb(161, 161, 161);
position: absolute;
right: 0;
z-index: 9999;
line-height: 20px;
border-radius: 50%;
font-weight: bold;
font-size: 22px;
top: 55px;
cursor: pointer;
}
#header .pro-sidebar {
width: 100%;
min-width: 100%;
height: 100vh;
}
#header .pro-sidebar.collapsed {
width: 80px;
min-width: 80px;
}
#header .pro-sidebar-inner {
background-color: transparent;
box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
}
#header .pro-sidebar-inner .pro-sidebar-layout {
overflow-y: hidden;
height: 100vh;
}
#header .pro-sidebar-inner .pro-sidebar-layout .logotext p {
font-size: 20px;
padding: 0 20px;
color: rgba(252, 252, 252, 0.521);
font-weight: bold;
}
#header .pro-sidebar-inner .pro-sidebar-layout ul {
padding: 0 5px;
}
#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {
color: rgb(212, 212, 212);
margin: 10px 0px;
font-weight: bold;
}
#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {
background-color: #c0c0c0;
color: #000;
border-radius: 3px;
}
#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper .pro-item-content {
color: #000;
}
#header .logo {
padding: 20px;
}
@media only screen and (max-width: 720px) {
html {
overflow: hidden;
}
}

After this, in the browser:

And in collapsed state:

That’s how I quickly managed to churn out a fully functional collapsible sidenav menu. Thanks for reading. Any suggestions and feedback will be appreciated.