Responsive Partially Collapsed Sidebar in Ractjs using bootstrap

Make partially Collapsed sidebar with a dropdown in it with react using bootstrap

What we are building in this tutorial:

Fig 1. Partially collapsed sidebar in reactjs

Fig 2. Open Sidebar in Ractjs

Requirements:

1. create a react app: npx create-reacte-app app-name
2. install react-bootstrap in it: npm install react-bootstrap bootstrap@4.6.0
3. include this link in public/index.html file:

<script defer src=”https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity=”sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ” crossorigin=”anonymous”></script>
<script defer src=”https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity=”sha384–6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY” crossorigin=”anonymous”></script>

Make a folder sidebar containing two files:

1. Sidebar.jsx
2. sidebar.css

Now let’s make two classes, 1 to toggle the sidebar and the other for dropdown toggling.

const [isNotActive, setNotActive] = useState("true"); 
const [isDropdownActive, setDropdownActive] = useState("false");

Code in Sidebar.jsx

Now, we will be adding some CSS in the sidebar.css

And now we are done with the sidebar.

Thank you for reading!

Please leave comments if you have any suggestion/s or would like to add a point/s or if you noticed any mistakes/typos or any queries!

P.S. If you found this article helpful, clap! 👏👏👏 [feels rewarding and gives the motivation to continue my writing].