React Tailwind CSS Sidebar Layout

Today we are going to give the example of Tailwind CSS sidebar layout page. Where we are going to demonstrate two options which are extracted from the stackoverflow page. Here is the first example

<div className="flex">
    <aside className="h-screen sticky top-0">
        {// Fixed Sidebar}
    </aside>

    <main>
        {//content}
    </main>
</div>
Code language: HTML, XML (xml)

Above example is clean and simple with sticky sidebar. But if you prefer to do this without the sticky thing and with pure flex based layout. Here is the second example of layouting without the sticky class.

 return (
    <>
      <main className="flex h-screen flex-col bg-teal-200">
        <div className="flex flex-1 overflow-hidden">
          <div className="flex bg-gray-200  ">
            <Sidebartest isOpen={openSidebar} />
          </div>

          <div className="flex flex-1 flex-col">
            <div className="flex h-16 bg-teal-800 pt-4 pl-4 text-lg text-white">
              <span className="pr-2">
                <FaBars
                  className={`absolute-right-3 top-9 w-7 cursor-pointer rounded-full
               border-2 border-teal-800  ${!openSidebar && "rotate-180"}`}
                  onClick={() => setOpenSidebar(!openSidebar)}
                  size={25}
                />
              </span>
              Header
            </div>
            <div className="paragraph flex flex-1 grow flex-col overflow-y-auto bg-gray-200 p-4">
              {children}
            </div>
          </div>
        </div>
      </main>
    </>
  );Code language: JavaScript (javascript)

if you prefer to look into the Sidebar component build with Tailwind CSS and in React js here is the code for the Sdiebartest component

/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
import Link from "next/link";
import React from "react";
import {
  FaCalendar,
  FaChartBar,
  FaCog,
  FaDatabase,
  FaFolder,
  FaHamburger,
  FaInbox,
  FaLandmark,
  FaSearch,
  FaTools,
} from "react-icons/fa";

type SidebarProps = {
  isOpen: boolean;
};

function Sidebartest({ isOpen }: SidebarProps) {
  //const [open, setOpen] = React.useState(true);

  const Menus = [
    { title: "Dashboard", src: <FaDatabase size={20} /> },
    { title: "Inbox", src: <FaInbox size={20} /> },
    { title: "Accounts", src: <FaChartBar size={20} />, gap: true },
    { title: "Schedule ", src: <FaCalendar size={20} /> },
    { title: "Search", src: <FaSearch size={20} /> },
    { title: "Analytics", src: <FaChartBar size={20} /> },
    { title: "Files ", src: <FaFolder size={20} />, gap: true },
    { title: "Settings", src: <FaCog size={20} />, linkto: "/admin/cred" },
  ];

  return (
    <div className="flex ">
      <div
        className={` ${
          isOpen ? "w-72" : "w-20 "
        } relative h-screen bg-sidebar-black  p-5 pt-8 text-white duration-300`}
      >
        <div className="flex items-center gap-x-4">
          <FaTools
            className={`cursor-pointer font-black text-white duration-500 ${
              isOpen && "rotate-[360deg]"
            }`}
            size={30}
          />
          <h1
            className={`origin-left text-xl font-black font-medium text-white duration-200 ${
              !isOpen && "scale-0"
            }`}
          >
            RepairB
          </h1>
        </div>

        <ul className="pt-6">
          {Menus.map((Menu, index) => (
            <li
              key={index}
              className={`flex  cursor-pointer items-center gap-x-4  p-2 text-sm font-black text-white hover:border-l-4 hover:border-white hover:bg-light-white
                ${Menu.gap ? "mt-9" : "mt-2"} ${
                index === 0 && "bg-light-white"
              } `}
            >
              <Link href={Menu.linkto ? Menu.linkto : "#"} >
              {Menu.src}
              </Link>
              <span
                className={`${!isOpen && "hidden"} origin-left duration-200`}
              >
                {Menu.title}
              </span>
             
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default Sidebartest;
Code language: JavaScript (javascript)