Create a Sidebar Using ReactJS

By Faraz - September 02, 2024

Learn how to create a sidebar in ReactJS with this detailed guide. Includes setup and step-by-step instructions.

Join us on Telegram

Read Also

How to Create a Liquid Button with HTML, CSS, and JavaScript.jpg

How to Create a Liquid Button with HTML, CSS, and JavaScript (Source Code)

Introduction

Creating a sidebar in ReactJS is a common task when developing modern web applications. A sidebar can help organize your app's navigation and improve user experience. In this guide, we'll walk you through the process of building a responsive sidebar using ReactJS. Whether you're a beginner or an experienced developer, this step-by-step tutorial will provide clear instructions to help you achieve a professional-looking sidebar.

Setup Environment

Before we dive into coding, let's set up our environment. You'll need a few tools to get started:

Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed on your computer. These tools are necessary for managing React packages and running your React application.
Create React App: We'll use Create React App, a tool that sets up a new React project with a single command. If you don't have it installed, you can do so with the following command:
```
npx create-react-app sidebar-component
```
Code Editor: You'll need a code editor like Visual Studio Code (VSCode) to write and manage your code.

Step-by-Step Guide

1. Create a New React Project

First, create a new React project using Create React App:

npx create-react-app sidebar-component
cd sidebar-component

2. Add Font Awesome Icon and Poppins Font

Add Font Awesome and Poppins Font to your public/index.html file by including the following link in the <head> section:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

3. Create Sidebar Component

In your React project, create a new file named Sidebar.js inside the src directory. Add the following code to Sidebar.js:

import React, { useState } from 'react';
import './Sidebar.css'; // Ensure to include your CSS styles

const Sidebar = () => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState(null);

  const toggleSidebar = () => {
    setIsCollapsed(!isCollapsed);
  };

  const toggleDropdown = (index) => {
    setActiveDropdown(activeDropdown === index ? null : index);
  };

  return (
    <div className={`sidebar ${isCollapsed ? 'collapsed' : ''}`}>
      <div className="sidebar-header">
        <h3 className="brand">
          <i className="fas fa-anchor"></i>
          <span>MyApp</span>
        </h3>
        <div className="toggle-btn" onClick={toggleSidebar}>
          <i className={`fas ${isCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'} toggle-icon`}></i>
        </div>
      </div>
      <ul className="nav-links">
        <li>
          <a href="#" className="nav-item">
            <span className="nav-icon"><i className="fas fa-home"></i></span>
            <span>Home</span>
          </a>
        </li>
        <li>
          <a href="#" className="nav-item">
            <span className="nav-icon"><i className="fas fa-user"></i></span>
            <span>Profile</span>
          </a>
        </li>
        <li>
          <a href="#" className="nav-item">
            <span className="nav-icon"><i className="fa-solid fa-chart-line"></i></span>
            <span>Dashboard</span>
          </a>
        </li>
        <li className={`dropdown ${activeDropdown === 0 ? 'active' : ''}`}>
          <a href="#" className="nav-item dropdown-toggle" onClick={() => toggleDropdown(0)}>
            <div>
              <span className="nav-icon"><i className="fas fa-cogs"></i></span>
              <span>Settings</span>
            </div>
            <i className={`fas ${activeDropdown === 0 ? 'fa-chevron-down' : 'fa-chevron-right'} dropdown-icon`}></i>
          </a>
          <ul className="dropdown-menu">
            <li><a href="#" className="dropdown-item">General</a></li>
            <li><a href="#" className="dropdown-item">Privacy</a></li>
            <li><a href="#" className="dropdown-item">Notifications</a></li>
          </ul>
        </li>
      </ul>
    </div>
  );
};

export default Sidebar;

4. Add CSS Styles

Create a file named Sidebar.css in the src directory and add the following styles:

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    display: flex;
    height: 100vh;
    overflow-x: hidden;
    background: #f3f4f6;
  }
  
  /* Sidebar Styling */
  .sidebar {
    width: 250px;
    height: 100%;
    background: linear-gradient(45deg, #3a3a52, #2b2d42);
    padding-top: 20px;
    position: fixed;
    transition: width 0.5s ease, background 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  }
  
  .sidebar-header {
    padding: 0 20px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
  }
  
  .brand {
    display: flex;
    align-items: center;
    color: #fff;
  }
  
  .brand i {
    margin-right: 10px;
    font-size: 28px;
  }
  
  .nav-links {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
  }
  
  .nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s ease, padding-left 0.3s ease;
    position: relative;
  }
  
  .nav-icon{
    font-size: 16px;
    width: 35px;
    min-width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    border-radius: 2px;
    transition: transform 0.3s ease;
  }
  
  .nav-item:hover {
    background: #575b8a;
    padding-left: 30px;
  }
  
  .nav-item:hover i {
    animation: shake 0.5s;
  }
  
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
  }
  
  /* Dropdown Menu Styling */
  .dropdown {
    position: relative;
  }
  
  .dropdown-menu {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #3a3a52;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    transition: opacity 0.3s ease;
  }
  
  .dropdown-menu .dropdown-item {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s ease;
  }
  
  .dropdown-menu .dropdown-item:hover {
    background: #575b8a;
  }
  
  .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .dropdown-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
  }
  
  /* Show dropdown menu when active */
  .dropdown.active .dropdown-menu {
    display: block;
  }
  
  /* Sidebar collapse styles */
  .sidebar.collapsed {
    width: 80px;
    background: linear-gradient(45deg, #2b2d42, #3a3a52);
  }
  
  .sidebar.collapsed .nav-item span,
  .sidebar.collapsed .sidebar-header h3 span,
  .sidebar.collapsed .nav-item .dropdown-icon,
  .sidebar.collapsed .dropdown-menu{
    display: none; 
  }
  
  .sidebar.collapsed .nav-item .nav-icon {
    display: block;
  }
  
  .sidebar.collapsed .sidebar-header h3 {
    justify-content: center;
  }
  
  .main-content {
    margin-left: 250px;
    padding: 40px;
    width: calc(100% - 250px);
    transition: margin-left 0.5s ease;
    background: #f3f4f6;
  }
  
  .sidebar.collapsed ~ .main-content {
    margin-left: 80px;
    width: calc(100% - 80px);
  }
  
  .toggle-btn {
    width: 20px;
    height: 20px;
    background: #6c63ff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: absolute;
    right: -10px;
  }
  
  .toggle-btn .toggle-icon {
    font-size: 10px;
    transition: transform 0.3s ease;
  }
  
  /* Smooth Hover Animation */
  .nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: #6c63ff;
    transition: transform 0.3s ease;
    transform: scaleY(0);
    transform-origin: bottom;
  }
  
  .nav-item:hover::before {
    transform: scaleY(1);
    transform-origin: top;
  }

5. Integrate Sidebar into Main App

Modify the App.js file to include the Sidebar component:

import React from 'react';
import Sidebar from './Sidebar';
import './Sidebar.css';

const App = () => {
  return (
    <div className="app">
      <Sidebar />
      <div className="main-content">
        <h1>Sidebar Components using React</h1>
        <p>Your content goes here...</p>
      </div>
    </div>
  );
};

export default App;

6. Run Your React App

Finally, run your React app to see the sidebar in action:

npm start

Conclusion

In this tutorial, we walked through creating a sidebar in ReactJS. We set up a new React project, added Font Awesome for icons, built the Sidebar component, and styled it using CSS. This sidebar includes a toggle feature for collapsing and expanding, and a dropdown menu for additional options.

By following these steps, you should now have a fully functional and responsive sidebar that enhances your ReactJS application. Customize the sidebar further based on your needs and preferences.

Sidebar Live Demo ⟶

Read Also lorem ipsum generator using html, css, and javascript.jpg

Create Your Own Lorem Ipsum Generator using HTML, CSS, and JavaScript

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a sidebar in reactjs, step-by-step reactjs sidebar tutorial, responsive sidebar design using react, react sidebar, sidebar reactjs, create sidebar react, sidebar navigation menu, sidebar menu react

End of the article

Latest Post

Create Car Registration System Using HTML, CSS, and JavaScript

by Faraz - December 08, 2024

Learn how to create a simple car registration system with HTML, CSS, and JavaScript in this easy step-by-step guide. Build a functional and attractive form with minimal code.