How to toggle the sidebar with an icon in React

by Clue Mediator · December 29, 2022

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

How to toggle the sidebar with an icon in React

Project structure
Package dependencies
Create HTML structure
Add CSS
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

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

export default App;

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 className={`body-area${showNav ? ' body-pd' : ''}`}>

className={`bi ${showNav ? 'bi-x' : 'bi-list'}`}

onClick={() => setShowNav(!showNav)} />

</div>

<img

src="https://reqres.in/img/faces/5-image.jpg"

alt="Clue Mediator" />

</div>

</header>

<div>

<i className='bi bi-alexa nav_logo-icon' /> <span className="nav_logo-name">Clue Mediator</span>

</a>

<i className='bi bi-people nav_icon' /><span className="nav_name">Users</span>

</a>

</a>

</div>

<i className='bi bi-box-arrow-left nav_icon' /><span className="nav_name">SignOut</span>

</a>

</nav>

</div>

<h4>Main Component</h4>

</div>

}

export default App;

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)
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

@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)

}

5. Output

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

How to toggle the sidebar with an icon in React

Demo Application

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

Demo & Source Code

You may also like...

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

How to toggle the sidebar with an icon in React

Demo Application

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

Demo & Source Code

You may also like...

React Interview Questions and Answers – Part 1

React multi select listbox component

Add Routing for Shopping Cart in React Application – Part 4

Responsive login form using Tailwind CSS in React

Get datasource from React AG Grid

Validate a form in React using react-hook-form

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us