Fixed Left- 0 (TailwindCss) overlaping body content

i have an issue on my project i’am working on, i have a SIDEBAR and a TOPHEADER(NAVBAR).., now the issue starts when i want to have a FIXED SIDEBAR without it obscuring other page elements like TopHeader/Navbar and body content to the left side of the page.. tried adding ml-20 on topHeader div but that didnt help as it just opens up a whitespace on the left,,also tried using Space-x-20 class that also didnt help because it only pushed the body content to the right just like iwanted but theres another issue , the TopHeader is stuck on the left ..on this project iam using Tailwindcss to style the project would appreciate the help. This is how it looks like with the “Fixed left-0 ” enter image description here enter image description here

How I want it to look: enter image description here enter image description here

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { HiMenuAlt3 } from "react-icons/hi";
import { AiFillHome, AiOutlinePoweroff } from "react-icons/ai";
import { FiPlay } from "react-icons/fi";
import {
  BsDisplay,
  BsQuestionCircle,
  BsTrophy,
  BsTwitter,
} from "react-icons/bs";
import { MdOutlineGames } from "react-icons/md";
import { SiDiscord } from "react-icons/si";
import { BiNews } from "react-icons/bi";
import { TopHeader } from "../../components/TopHeader";

export const Sidebar = ({ children }) => {
  const menus = [
    { name: "Home", link: "/", icon: AiFillHome },
    { name: "Play", link: "/", icon: FiPlay },
    { name: "Watch", link: "/", icon: BsDisplay },
    { name: "Leaderboard", link: "/", icon: BsTrophy, margin: true },
    { name: "Games", link: "/", icon: MdOutlineGames },
    { name: "News", link: "/", icon: BiNews },
    { name: "F.a.q", link: "/", icon: BsQuestionCircle, margin: true },
    { name: "Logout", link: "/", icon: AiOutlinePoweroff },
    { name: "Discord", link: "/", icon: SiDiscord, margin: true },
    { name: "Twitter", link: "/", icon: BsTwitter },
  ];
  const [open, setOpen] = useState(true);
  return (
    <section className="flex">
      <div
        className={`fixed left-0 bg-black min-h-screen ${
          open ? "w-72" : "w-16"
        } duration-500 text-white px-4`}
      >
        <div className="py-3 flex justify-end">
          <HiMenuAlt3
            size={26}
            className="cursor-pointer"
            onClick={() => setOpen(!open)}
          />
        </div>
        <div className="mt-4 flex flex-col gap-4 relative">
          {menus?.map((menu, i) => (
            <Link
              to={menu?.link}
              key={i}
              className={`${
                menu?.margin && "mt-5"
              } flex items-center text-sm gap-3.5 font-medium p-2 hover:bg-indigo-600 rounded-md`}
            >
              <div>{React.createElement(menu?.icon, { size: "20" })}</div>
              <h2
                style={{
                  transitionDelay: `${i + 3}00ms`,
                }}
                className={`whitespace-pre duration-500 ${
                  !open && "opacity-0 translate-x-28 overflow-hidden"
                }`}
              >
                {menu?.name}
              </h2>
            </Link>
          ))}
        </div>
      </div>
      <div className="bg-gray-800   w-full p-3">
        <>
          <TopHeader />
          {children}
        </>
      </div>
    </section>
  );
};

import React from "react";
import { AiOutlineSearch } from "react-icons/ai";
import { BiUserCircle } from "react-icons/bi";
import { HiOutlineFlag } from "react-icons/hi";
import { IoMdNotificationsOutline } from "react-icons/io";
import "tw-elements";

export const TopHeader = () => {
  return (
    <div className="max-w-auto mx-auto px-4 mb-5 bg-black text-white">
      <div className=" flex justify-between">
        <div className="flex space-x-52">
          {/*Logo*/}
          <div>
            <h1 className="flex items-center py-4 px-2 font-semibold">LOGO</h1>
          </div>

          {/* Search Input */}
          <div className="hidden md:flex items-center space-x-1">
            <div className="bg-gray-300 text-white rounded-full flex items-center  px-2">
              <AiOutlineSearch size={20} />
              <input
                className="bg-gray-300 p-2 rounded-full focus:outline-none"
                type="text"
                placeholder="Search Games"
              />
            </div>
          </div>

          <div className="flex items-center space-x-3">
            {/* Notification Button */}
            {/*<button className="py-2 px-2 text-white">
              <IoMdNotificationsOutline size={30} />
            </button> */}

            {/* RightSidebar Button */}
            <button className="py-2 px-2 text-white">
              <HiOutlineFlag size={30} />
            </button>

            {/* User Button*/}
            <button className="py-2 px-2 text-white">
              <BiUserCircle size={30} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

Answer

i finally found a good fix for my issue i had above , instead of using tailwind default ” fixed left-0 ” , i ended up using StickyNode and it kind of solved every bit of problems i had by wrapping my sidebar with stickynode component like this:

<Sticky> 
<Sidebar />
</Sticky>

Advertisement

Answer