How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6

Hey, guys welcome to another blog How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6 where we will make sidebar designs from scratch. I hope you like the design If you face any problem during the code implementation of this sidebar you can comment in the comment box I will defiantly reply.

React is a JavaScript front-end library that may be used to build interactive user interfaces. Facebook created and keeps it up to date. It can be applied to the creation of mobile and single-page applications.

Demo of this Sidebar

Prerequisite:

IDE of choice (this tutorial uses VS Code, you can download it here for making a react sidebar)
npm
create-react-app
react-router-dom
useState React hooks
sass

Basic Setup: To begin a new project using create-react-app, launch PowerShell or your IDE’s terminal and enter the following command:

The name of your project is “react-sidebar-dropdown,” but you can change it to something different like “my-first-react-website” for the time being.

npx create-react-app my-sidebar-app

Enter the following command in the terminal to navigate to your react-sidebar-dropdown folder:

cd my-sidebar-app

Required module: Install the dependencies required in this project by typing the given command in the terminal.

npm install react-router-dom

For icons, I have used flat icon interface icon

npm i @flaticon/flaticon-uicons

Link : Flaticon interface icon

Folder structure

Once the packages and dependencies are finished downloading, start up your IDE and locate your project folder.

App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/home/Home";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes path="/">
          <Route index element={<Home />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Pages Folder structure

Home.jsx

import React from "react";
import "./home.scss";
import Sidebar from "./../../components/sidebar/Sidebar";
// import Navbar from "./../../components/navbar/Navbar";
const Home = () => {
  return (
    <div className="home">
      <Sidebar />
      <div className="homeContainer"></div>
    </div>
  );
};

export default Home;

home.scss

.home{
    display: flex;
    .homeContainer{
        flex: 6;
    }
}

Lets jump to component folder where we have to design our sidebar using scss and folder structure of sidebar would be like this format.

Lets first talk about sidebar .jsx file and the we will design our sidebar using scss.

Sidebar.jsx

import React from "react";
import "./sidebar.scss";

const Sidebar = () => {
  return (
    <div className="sidebar">
      <div className="top">
        <span className="logo">
          <img src="Dark.png" alt="Katherine Johnson" />
        </span>
      </div>

      <div className="center">
        <ul>
          <li>
            <i className="fi fi-rr-house-blank icon"></i>
            <span>Dashboard</span>
          </li>

          <li>
            <i class="fi fi-rr-apps icon"></i>
            <span>Project</span>
          </li>
          <li>
            <i class="fi fi-rr-list-check icon"></i>
            <span>Task</span>
          </li>
          <li>
            <i class="fi fi-rr-users-alt icon"></i>
            <span>Teams</span>
          </li>
          <li>
            <i class="fi fi-rr-settings icon"></i>
            <span>Setting</span>
          </li>
        </ul>
      </div>

      <div className="middle">
        <div className="middle_card">
          <h1 className="card_text">Upgrade to Pro 🔥</h1>
          <p>Get 1 month free and unlock all pro feature</p>
          <button className="card_button">Upgrade</button>
        </div>
      </div>

      <div className="center">
        <ul>
          <li>
            <i class="fi fi-rr-interrogation icon"></i>
            <span>Help</span>
          </li>

          <li>
            <i class="fi fi-rr-exit icon"></i>
            <span>Logout</span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default Sidebar;

Then Let’s jump to our scss part where we will focus on the design of this sidebar.

sidebar.scss

.sidebar{
    flex:1;
    border-right: 0.5px solid rgb(230, 227, 227);
    min-height: 100vh;
    background-color: #F5F5F5;  
    .top{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        .logo
        {
            font-size: 20px;
            font-weight: bold;
            color: #6439ff;
        }
    }

    .center{
        padding-left: 40px;
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            li{
                display: flex;
                align-items: center;
                margin-top: 30px;
                padding: 5px;
                cursor: pointer;

                &:hover
                {
                    background-color: #eaeaea;
                    border-radius: 0px 30px 30px 0px;
                    
                    
                }

                .icon{
                    font-size: 24px;
                    color: #868686;                   
                }

                span{
                    font-size: 13px;
                    font-weight: 600;
                    color: #888;
                    margin-left: 22px;
                }
            }

            
        }
    }

    .middle
    {
       
        margin: 20px;

        .middle_card
        {
            text-align: center;
            background-color: white;
            padding: 20px;
            border-radius: 14px;
            margin-top: 146px;
            .card_text
            {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
            }
           
                p{
                display: flex;
                align-items: center;
                justify-content: center;
                color: #AA8AC3;
                font-size: 12px;
                padding: 10px;
                }
                .card_button
                {
                    background-color:#BBD8F4 ;
                    border: none;
                    padding: 12px 63px;
                    border-radius: 34px;
                    font-size: 15px;
                    font-weight: 600;
                }
            
        }
    }
}

Output

Conclusion

Hope you like this tutorial on How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6. For more such content please visit to the website.

People are also reading: