How to toggle the sidebar with an icon in React

In this article, we will show you how to toggle the sidebar component using Hooks in React. You may need to create a structure for your React application where you have to toggle the sidebar element by clicking the hamburger button from the header.

So in this example, we will add a sidebar component that will be toggled by clicking on the header button. We will only display Icons in the sidebar when it is in minimized mode.

Demo Application

Output - How to toggle the sidebar with an icon in React - Clue Mediator

How to toggle the sidebar with an icon in React

1. Project structure
2. Package dependencies
3. Create HTML structure
4. Add CSS
5. Output

1. Project structure

Refer to the following project structure to toggle the sidebar component in React application.

• react-toggle-sidebar

  • node_modules

  • public

    • index.html

  • src

    • App.js
    • index.css
    • index.js

  • package-lock.json

  • package.json

  • README.md

2. Package dependencies

In this example, we have to install the bootstrap and bootstrap-icons npm packages. Run the following command to install the npm packages.

npm i bootstrap bootstrap-icons

You will find the version of following packages in React application.

react

^18.1.0

bootstrap

^5.2.3

bootstrap-icons

^1.10.3

3. Create HTML structure

First, let’s create a HTML design with toggle the sidebar functionality. Here, we will use the useState to toggle the sidebar component.

App.js

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import './index.css';

function App() {

  const [showNav, setShowNav] = useState(true)

  return <div class="{`body-area${showNav" ?="" '="" body-pd'="" :="" ''}`}="">
    <header class="{`header${showNav" ?="" '="" body-pd'="" :="" ''}`}="">
      <div class="header_toggle">
        <i class="{`bi" ${shownav="" ?="" 'bi-x'="" :="" 'bi-list'}`}="" onclick="{()" ==""> setShowNav(!showNav)} />
      </i></div><i class="{`bi" ${shownav="" ?="" 'bi-x'="" :="" 'bi-list'}`}="" onclick="{()" =="">
      <div class="header_img">
        <img src="https://reqres.in/img/faces/5-image.jpg" alt="Clue Mediator">
      </div>
    </i></header><i class="{`bi" ${shownav="" ?="" 'bi-x'="" :="" 'bi-list'}`}="" onclick="{()" =="">
    <div class="{`l-navbar${showNav" ?="" '="" show'="" :="" ''}`}="">
      <nav class="nav">
        <div>
          <a href="https://cluemediator.com" target="_blank" class="nav_logo" rel="noopener">
            <i class="bi bi-alexa nav_logo-icon"> <span class="nav_logo-name">Clue Mediator</span>
          </i></a><i class="bi bi-alexa nav_logo-icon">
          <div class="nav_list">
            <a href="https://cluemediator.com" target="_blank" class="nav_link" rel="noopener">
              <i class="bi bi-people nav_icon"><span class="nav_name">Users</span>
            </i></a><i class="bi bi-people nav_icon">
            <a href="https://cluemediator.com" target="_blank" class="nav_link" rel="noopener">
              <i class="bi bi-person-check nav_icon"><span class="nav_name">Role</span>
            </i></a><i class="bi bi-person-check nav_icon">
          </i></i></div><i class="bi bi-people nav_icon"><i class="bi bi-person-check nav_icon">
        </i></i></i></div><i class="bi bi-alexa nav_logo-icon"><i class="bi bi-people nav_icon"><i class="bi bi-person-check nav_icon">
        <a href="https://cluemediator.com" target="_blank" class="nav_link" rel="noopener">
          <i class="bi bi-box-arrow-left nav_icon"><span class="nav_name">SignOut</span>
        </i></a><i class="bi bi-box-arrow-left nav_icon">
      </i></i></i></i></nav><i class="bi bi-alexa nav_logo-icon"><i class="bi bi-people nav_icon"><i class="bi bi-person-check nav_icon"><i class="bi bi-box-arrow-left nav_icon">
    </i></i></i></i></div><i class="bi bi-alexa nav_logo-icon"><i class="bi bi-people nav_icon"><i class="bi bi-person-check nav_icon"><i class="bi bi-box-arrow-left nav_icon">
    <div class="pt-4 pb-4">
      <h4>Main Component</h4>
    </div>
  </i></i></i></i></i></div><i class="{`bi" ${shownav="" ?="" 'bi-x'="" :="" 'bi-list'}`}="" onclick="{()" ==""><i class="bi bi-alexa nav_logo-icon"><i class="bi bi-people nav_icon"><i class="bi bi-person-check nav_icon"><i class="bi bi-box-arrow-left nav_icon">
}

export default App;
</i></i></i></i></i>

_In the above code, you will see that we have imported the `bootstrap` and `bootstrap-icons` to load the CSS._

_4. Add CSS**_**

_Now, we have to add the style in the `index.css` file to design the sidebar component. We will also add the stye for responsive structure.index.css``` @import url("https://fonts.googleapis.com/css2?display=swap&family=Nunito:wght@400;600;700&display=swap");

:root { --header-height: 3rem; --nav-width: 68px; --first-color: #111111; --first-color-light: #AFA5D9; --white-color: #F7F6FB; --body-font: 'Nunito', sans-serif; --normal-font-size: 1rem; --z-fixed: 100 }

.body-area { position: relative; margin: var(--header-height) 0 0 0; padding: 0 1rem; font-family: var(--body-font); font-size: var(--normal-font-size); transition: .5s }

.header { width: 100%; height: var(--header-height); position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; background-color: var(--white-color); z-index: var(--z-fixed); transition: .5s }

.header_toggle { color: var(--first-color); font-size: 1.5rem; cursor: pointer }

.header_img { width: 35px; height: 35px; display: flex; justify-content: center; border-radius: 50%; overflow: hidden }

.header_img img { width: 40px }

.l-navbar { position: fixed; top: 0; left: -30%; width: var(--nav-width); height: 100vh; background-color: var(--first-color); padding: .5rem 1rem 0 0; transition: .5s; z-index: var(--z-fixed) }

.nav { height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden }

.nav_logo, .nav_link { display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: 1rem; padding: .5rem 0 .5rem 1.5rem; text-decoration: none; }

.nav_logo { margin-bottom: 2rem }

.nav_logo-icon { font-size: 1.25rem; color: var(--white-color) }

.nav_logo-name { color: var(--white-color); font-weight: 700 }

.nav_link { position: relative; color: var(--first-color-light); margin-bottom: 1.5rem; transition: .3s }

.nav_link:hover { color: var(--white-color) }

.nav_icon { font-size: 1.25rem }

.show { left: 0 }

.body-pd { transition: .5s; padding-left: calc(var(--nav-width) + 1rem) }

.active { color: var(--white-color) }

.active::before { content: ''; position: absolute; left: 0; width: 2px; height: 32px; background-color: var(--white-color) }

.height-100 { height: 100vh }

@media screen and (min-width: 768px) { .body-area { margin: calc(var(--header-height) + 1rem) 0 0 0; padding-left: calc(var(--nav-width) + 2rem) }

.header { height: calc(var(--header-height) + 1rem); padding: 0 2rem 0 calc(var(--nav-width) + 2rem) }

.header_img { width: 40px; height: 40px }

.header_img img { width: 45px }

.l-navbar { left: 0; padding: 1rem 1rem 0 0 }

.show { width: calc(var(--nav-width) + 156px) }

.body-pd { padding-left: calc(var(--nav-width) + 188px) } }

Thank you for reading. Happy Coding..!! 🙂### Demo & Source Code[GitHub Repository](https://github.com/cluemediator/react-toggle-sidebar) [StackBlitz Project](https://stackblitz.com/edit/react-toggle-sidebar)<!-- /wp:html -->_____