Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "How To Make A SideBar Menu With TailwindCSS In React JS | FULL Beginner Tutorial", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Setting Up the Project
Before building the "Sidebar Menu" with React.js and CSS, ensure Node.js is installed on your computer. If not, download and install it from the official Node.js website.
Create a Project Folder:
- Make a new folder, for instance, “sidebar-menu”.
- Open this folder in your VS Code editor.
Initialize the Project:
Open your terminal by pressing Ctrl + J and then use Vite to create a new React app with this command:
npm create vite@latest ./ -- --template react
Install necessary dependencies:
npm install
Install the following dependcies:
- TailwindCSS
- React Icons
Run your development server:
npm run dev
If your project is running in your browser, congratulations! You’ve successfully set up your app. Now, let’s move on to modifying folders and files.
Modify folder and CSS Files:
- Remove the default assets folder and App.css file.
- Replace the content of index.css with the provided CSS code.
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap');
* {
font-family: "Poppins", sans-serif;
}
Creating the Files.jsx
Within the src directory of your project, organize your files by creating the following files:
- Sidebar.jsx
- MenuItem.jsx
Adding the Codes
Add the respective code to each newly created file to define the layout.
In src/Sidebar.jsx, add the code.
import React, { useState } from 'react'
import { LuChevronFirst, LuChevronLast } from "react-icons/lu";
import { FaYoutube } from "react-icons/fa";
import { BsThreeDotsVertical } from "react-icons/bs";
import { BsPieChart } from "react-icons/bs";
import { BsPieChartFill } from "react-icons/bs";
import { LiaMoneyBillWaveAltSolid } from "react-icons/lia";
import { FaMoneyBill1Wave } from "react-icons/fa6";
import { FaRegUserCircle } from "react-icons/fa";
import { FaUserCircle } from "react-icons/fa";
import { IoStatsChartOutline } from "react-icons/io5";
import { IoStatsChartSharp } from "react-icons/io5";
import { IoSettingsOutline } from "react-icons/io5";
import { IoSettings } from "react-icons/io5";
import { IoMdHelpCircleOutline } from "react-icons/io";
import { IoMdHelpCircle } from "react-icons/io";
import { RxDashboard } from "react-icons/rx";
import { MdDashboard } from "react-icons/md";
import MenuItem from './MenuItem';
const Sidebar = () => {
const [isOpen, setIsOpen] = useState(true);
const toggleSideBar = () => setIsOpen(!isOpen);
const [activeItem, setActiveItem] = useState(false)
const items = [
{ label: 'Dashboard', icon1: <RxDashboard className='w-5 h-5' />, icon2: <MdDashboard className='w-5 h-5' />, notify: false },
{label: 'Statistics', icon1: <IoStatsChartOutline className='w-5 h-5' />, icon2: <IoStatsChartSharp className='w-5 h-5' />, notify: true},
{ label: 'Orders', icon1: <BsPieChart className='w-5 h-5' />, icon2: <BsPieChartFill className='w-5 h-5' />, notify: false },
{ label: 'Billings', icon1: <LiaMoneyBillWaveAltSolid className='w-5 h-5' />, icon2: <FaMoneyBill1Wave className='w-5 h-5' />, notify: true },
{ label: 'Users', icon1: <FaRegUserCircle className='w-5 h-5' />, icon2: <FaUserCircle className='w-5 h-5' />, notify: false },
{ label: 'Settings', icon1: <IoSettingsOutline className='w-5 h-5' />, icon2: <IoSettings className='w-5 h-5' />, notify: false, outline: true },
{ label: 'Help', icon1: <IoMdHelpCircleOutline className='w-5 h-5' />, icon2: <IoMdHelpCircle className='w-5 h-5' />, notify: false }
]
return (
<section className='flex h-screen'>
{/* SideBar */}
<nav className={`${isOpen ? "w-72": "w-16"} transition-all duration-300 p-3 bg-slate-50 border-r border-slate-200 shadow-sm relative`}>
{/* SideBar Header */}
<div className={`p-2 flex items-center ${isOpen ? "justify-between" : "justify-center"}`}>
{isOpen && <a href="" className='flex items-center space-x-1'>
<FaYoutube className='w-6 h-6 text-red-500' /> <span className='text-2xl font-bold flex items-center gap-1 text-gray-900'>YouTube <sup className='font-normal text-xs'>UK</sup></span>
</a>}
<button onClick={toggleSideBar}>{isOpen ? <LuChevronFirst className='w-6 h-6 cursor-pointer' /> : <LuChevronLast className='w-6 h-6 cursor-pointer' /> }</button>
</div>
{/* SideBar Menu Items */}
<div className='mt-4'>
{items.map(({label, icon1, icon2, notify, outline}) => (
<MenuItem key={label} icon={icon2} icon2={icon1} label={label} isOpen={isOpen} active={activeItem === label} onClick={() => setActiveItem(label)} notify={notify} outline={outline}/>
))}
</div>
<div className="absolute left-0 bottom-10 w-full border-t border-gray-300 pt-5 group hover:text-indigo-500">
<div className="flex items-center justify-between p-2 rounded cursor-pointer">
<div className='flex items-center space-x-3 relative'>
<div className='bg-indigo-100 h-full w-full p-2 rounded-lg text-xl font-bold text-indigo-500'>AD</div>
{isOpen && <div>
<span className='block font-semibold'>Alan Doe</span>
<span className='text-sm text-gray-600 group-hover:text-indigo-500'>alandoe@gmail.com</span>
</div>}
</div>
{isOpen && <BsThreeDotsVertical className='h-5 w-5 transition duration-300 hover:text-indigo-500' />}
</div>
{!isOpen && (
<span className="absolute left-14 top-1/2 transform -translate-y-1/6 scale-0 group-hover:scale-100 transition bg-indigo-100 text-indigo-500 text-xs px-2 py-1 rounded">
{"AlanDoe"}
</span>
)}
</div>
</nav>
{/* Main Content */}
<div className='flex-1 p-6'></div>
</section>
)
}
export default Sidebar
Add the respective code to each newly created file to define the layout.
In src/MenuItem.jsx, add the code.
import React, { useState } from 'react'
const MenuItem = ({ icon, icon2, label, active, isOpen, onClick, notify, outline }) => {
return (
<div className={`relative group ${outline && "border-t border-gray-300 pt-2"}`}>
<div onClick={onClick} className={`flex items-center justify-between hover:bg-indigo-100 p-2 rounded cursor-pointer my-2 ${active && "bg-indigo-100"}`}>
<div className='flex items-center space-x-2 relative'>
{active ? <span className='text-indigo-500'>{icon}</span> : icon2}
{isOpen && <span className={`text-lg ${active && "font-semibold text-indigo-500"}`}>{label}</span>}
{!isOpen && notify && <div className='absolute top-0 right-2 w-2 h-2 rounded-full bg-indigo-500'></div>}
</div>
{isOpen && notify && <div className='w-2 h-2 rounded-full bg-indigo-500'></div>}
</div>
{!isOpen && (
<span className="absolute left-14 top-1/2 transform -translate-y-1/2 scale-0 group-hover:scale-100 transition bg-indigo-100 text-indigo-500 text-xs px-2 py-1 rounded">
{label}
</span>
)}
</div>
)
}
export default MenuItem
In App.jsx, add the code.
import React from 'react'
//Import Sidebar
import Sidebar from './Sidebar'
const App = () => {
return <Sidebar />
}
export default App
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create " A SideBar Menu With TailwindCSS In React JS | FULL Beginner Tutorial". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS, JavaScript React Js & Tailwind Projects, its gonna be fun, trust me 😃.
Keep experimenting! You can add other cool features. Try improving error handling and adding other cool updates to make your chatbot even better.
If you run into any issues, you can download the source code for this AI chatbot project by clicking the “Download” button. Don’t forget to check the README.md file for setup and usage instructions. If you need help, you’ll also find support information there.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.