Developing a responsive sidebar in ReactJS usually requires a blend of CSS for styling and React components for handling state and rendering. Additionally, external libraries such as Tailwind CSS can be employed to facilitate CSS, as demonstrated in this project.
Getting started:
Initially, establish a new directory for the sidebar application. Subsequently, in the terminal, input the command npm create vite@latest. Finally, execute npm run dev to launch the web application.
Here is a sample
npx create-vite@latest sidebar - template react
cd sidebar
npm install
npm run dev
Let's proceed with the installation of Tailwind CSS. Initially, we need to install Tailwind and its dependencies by executing the following command:
npm install -D tailwindcss postcss autoprefixer
Afterward, generate the Tailwind CSS configuration files by using the following command. This will create the default configuration files, namely tailwind.config.js and postcss.config.js, in the root directory of your project
npx tailwindcss init -p
Configure the postcss.config.js file by opening the generated file and ensuring that it resembles the following:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Set up index.css to incorporate Tailwind CSS: Access the src/index.css file (or establish it if not present) and import Tailwind CSS.
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* Your additional styles here */
Start or restart your Vite development server:
npm run dev
Let's begin developing our component in App.jsx.
The import statement includes a particular function, useState, from the "react" library. useState is a React hook utilized for state management in functional components.
import { useState } from "react";
Sidebar Component: This defines a functional component named "Sidebar." In React, components are reusable code blocks that encapsulate specific portions of the user interface.
const Sidebar = () => {
State Management: This code line initializes a state variable named "open" along with a function "setOpen" to handle the state. By using useState(true), the initial value of "open" is set to true. This state is employed to govern whether the sidebar is in an open or closed state.
const [open, setOpen] = useState(true);
Menu Items: A array named "Menus" is introduced, comprising objects that represent distinct menu items. Each object possesses properties such as "title" (denoting the menu item name) and "src" (indicating the icon source).
const Menus = [
{ title: "Overview", src: "Overview" },
{ title: "Transactions", src: "Transactions" },
{ title: "Loyalty Cards", src: "Card", gap: true },
{ title: "Subscriptions ", src: "Calendar" },
{ title: "Debts", src: "Debt" },
{ title: "Legal information", src: "Legal" },
{ title: "Notifications ", src: "Notifications", gap: true },
{ title: "Setting", src: "Settings" },
];
Return Statement (JSX): Within the return statement, you'll find the JSX (JavaScript XML) code outlining the structure of the sidebar component. JSX is a JavaScript syntax extension frequently employed with React to define the desired appearance of the user interface.
return (
<div className="flex">
{/* … (code for sidebar structure) */}
</div>
);
Sidebar Structure: The primary structure of the sidebar is established by this div element. The className attribute incorporates a collection of CSS classes influencing the sidebar's appearance and functionality. The "open" variable dynamically adjusts the sidebar's width, contingent on whether it is open or closed.
<div className={` ${open ? "w-72" : "w-20 "} bg-black h-screen p-5 pt-8 relative duration-300`}>
Event Handling: A control button utilizes an image. When this button is clicked, it activates the setOpen function, toggling the value of "open" between true and false. This action produces the effect of opening and closing the sidebar.
<img
src="/assets/control.png"
onClick={() => setOpen(!open)}
/>
Rendering Menu Items: This section of the code iterates through the "Menus" array, rendering each menu item as a list item (
{Menus.map((Menu, index) => (
// … (code for rendering each menu item)
))}
In essence, this code constructs a responsive sidebar featuring a set of menu items. The sidebar's open and closed states are controlled by clicking a control button, enhancing the user's navigation experience in a web application.
Here is the complete code:
import { useState } from "react";
const Sidebar = () => {
const [open, setOpen] = useState(true);
const Menus = [
{ title: "Overview", src: "Overview" },
{ title: "Transactions", src: "Transactions" },
{ title: "Loyalty Cards", src: "Card", gap: true },
{ title: "Subscriptions ", src: "Calendar" },
{ title: "Debts", src: "Debt" },
{ title: "Legal information", src: "Legal" },
{ title: "Notifications ", src: "Notifications", gap: true },
{ title: "Setting", src: "Settings" },
];
return (
<div className="flex">
<div
className={` ${
open ? "w-72" : "w-20 "
} bg-black h-screen p-5 pt-8 relative duration-300`}
>
<img
src="/assets/control.png"
className={`absolute cursor-pointer -right-3 top-9 w-7 border-dark-purple
border-2 rounded-full ${!open && "rotate-180"}`}
onClick={() => setOpen(!open)}
/>
<div className="flex gap-x-4 items-center">
<img
src="/assets/smiley.svg"
className={`cursor-pointer duration-500 ${
open && "rotate-[360deg]"
}`}
/>
<h1
className={`text-white origin-left font-medium text-xl duration-200 ${
!open && "scale-0"
}`}
>
AdeCodes
</h1>
</div>
<ul className="pt-6">
{Menus.map((Menu, index) => (
<li
key={index}
className={`flex rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4
${Menu.gap ? "mt-9" : "mt-2"} ${
index === 0 && "bg-light-white"
} `}
>
<img src={`/assets/${Menu.src}.svg`} />
<span className={`${!open && "hidden"} origin-left duration-200`}>
{Menu.title}
</span>
</li>
))}
</ul>
</div>
</div>
)
}
export default Sidebar
GitHub Link: https://github.com/adewale-codes/responsive-sidebar
Top comments (0)