Reputation: 19

issue with animating sidebar

I am trying to create an animated sidebar using reactjs just like here.

Functionality

Normally the sidebar only shows icons with a thin width of the sidebar.
On hover, the sidebar expands and shows both icon and text.

Issue

I have completed almost all parts but got stuck showing the text smoothly. When I am hovering, the text shows abruptly and then animates. I want to delay my text shown after the expand animation is completed. Is there any way I can do that?

Code

import React, { useState } from 'react';
import { Outlet, NavLink, Link } from 'react-router-dom';

//shadcn UI imports
import { ScrollArea } from '@/components/ui/scroll-area';

//react icons imports
import { FaUser } from 'react-icons/fa';
import { IoSettings } from 'react-icons/io5';
import { FaSearch } from 'react-icons/fa';
import { BiMessageAltDetail } from 'react-icons/bi';
import { BiLogOutCircle } from 'react-icons/bi';
import { MdPostAdd } from 'react-icons/md';
import { RiDashboardHorizontalFill } from 'react-icons/ri';

function Clientlayout() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className={` mx-auto max-h-screen grid ${isHovered ? 'grid-cols-[2fr_8fr]' : 'grid-cols-[1fr_25fr]'} gap-4 transition-all duration-500`}
    >
      <div
        className="max-h-[99vh] my-2 rounded-lg border-2"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <div className=" px-3 flex pt-16 gap-2 flex-col overflow-hidden ">
          <NavLink
            to="/client/abc"
            className={({ isActive }) =>
              isActive
                ? ' bg-slate-900 rounded-md p-2 border-blue-600 flex gap-2 items-center'
                : ' rounded-md p-2 hover:bg-slate-900 flex gap-2 items-center'
            }
          >
            <FaUser className="text-base m-1" />
            {isHovered && <p className="text-base">abc</p>}
          </NavLink>
          <NavLink
            to="/client/abc"
            className={({ isActive }) =>
              isActive
                ? ' bg-slate-900 rounded-md p-2 border-blue-600 flex gap-2 items-center'
                : ' rounded-md p-2 hover:bg-slate-900 flex gap-2 items-center'
            }
          >
            <MdPostAdd className="text-xl m-1" />
            {isHovered && <p className="text-base">abc</p>}
          </NavLink>
          <NavLink
            to="/client/abc"
            className={({ isActive }) =>
              isActive
                ? ' bg-slate-900 rounded-md p-2 border-blue-600 flex gap-2 items-center'
                : ' rounded-md p-2 hover:bg-slate-900 flex gap-2 items-center'
            }
          >
            <BiMessageAltDetail className="text-xl m-1" />
            {isHovered && <p className="text-base">abc</p>}
          </NavLink>
          <NavLink
            to="/client/abc"
            className={({ isActive }) =>
              isActive
                ? ' bg-slate-900 rounded-md p-2 border-blue-600 flex gap-2 items-center'
                : ' rounded-md p-2 hover:bg-slate-900 flex gap-2 items-center'
            }
          >
            <FaSearch className="text-base m-1" />
            {isHovered && <p className="text-base">abc</p>}
          </NavLink>
          <NavLink
            to="/client/abc"
            className={({ isActive }) =>
              isActive
                ? ' bg-slate-900 rounded-md p-2 border-blue-600 flex gap-2 items-center'
                : ' rounded-md p-2 hover:bg-slate-900 flex gap-2 items-center'
            }
          >
            <RiDashboardHorizontalFill className="text-lg m-1" />
            {isHovered && <p className="text-base">abc</p>}
          </NavLink>
          <NavLink
            to="/client/abc"
            className={({ isActive }) =>
              isActive
                ? ' bg-slate-900 rounded-md p-2 border-blue-600 flex gap-2 items-center'
                : ' rounded-md p-2 hover:bg-slate-900 flex gap-2 items-center'
            }
          >
            <IoSettings className="text-base m-1" />
            {isHovered && <p className="text-base">abc</p>}
          </NavLink>
          <NavLink
            to="/client/abc"
            className={({ isActive }) =>
              isActive
                ? ' bg-slate-900 rounded-md p-2 border-blue-600 flex gap-2 items-center'
                : ' rounded-md p-2 hover:bg-slate-900 flex gap-2 items-center'
            }
          >
            <BiLogOutCircle className="text-lg m-1" />
            {isHovered && <p className="text-base">abc</p>}
          </NavLink>
        </div>
      </div>
      <ScrollArea className="h-screen">
        <Outlet />
      </ScrollArea>
    </div>
  );
}

export default Clientlayout;