The sidebar is not hiding in smaller devices - layout

Question

My problem is I have created a sidebar but when I hide it using transform and translate, It hides in laptop but not in smaller devices.
I have used tailwind css
Mobile Device Problem screenshot
My code is:
import Image from "next/image";
import Link from "next/link";
import { AiOutlineShoppingCart, AiFillCloseCircle,AiOutlinePlusCircle,AiOutlineMinusCircle } from "react-icons/ai";
import { useRef } from "react";
const Navbar = () => {
const toggleCart = () => {
if (ref.current.classList.contains('translate-x-full')) {
ref.current.classList.remove('translate-x-full')
ref.current.classList.add('translate-x-0')
}
else if (!ref.current.classList.contains('translate-x-full')) {
ref.current.classList.remove('translate-x-0')
ref.current.classList.add('translate-x-full')
}
}
const ref = useRef()
return (
<div>
<header className="text-gray-600 body-font shadow-xl">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<Link
href={"/"}
className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
>
<a>
<Image src={"/mithanSweets.png"} height={45} width={256} />
</a>
</Link>
<nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
<Link href={"/categories/burger"}>
<a className="mr-5 hover:text-gray-900">Burgers</a>
</Link>
<Link href={"/categories/italian"}>
<a className="mr-5 hover:text-gray-900">Italian</a>
</Link>
<Link href={"/categories/noodles"}>
<a className="mr-5 hover:text-gray-900">Noodles</a>
</Link>
<Link href={"/categories/pizza"}>
<a className="mr-5 hover:text-gray-900">Pizzas</a>
</Link>
</nav>
<div
onClick={toggleCart}
className=" cursor-pointer inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0"
>
<AiOutlineShoppingCart className="mr-3 text-2xl" />
Cart
</div>
</div>
<div
ref={ref}
className=" w-72 sideCart absolute top-0 right-0 bg-gray-200 px-8 py-10 transform transition-transform translate-x-full"
>
<h2 className="font-bold text-xl text-center">Shopping Cart</h2>
<span
onClick={toggleCart}
className="absolute top-5 right-2 cursor-pointer text-2xl text-gray-600"
>
<AiFillCloseCircle />
</span>
<ol className="list-decimal font-semibold">
<li>
<div className="item flex my-5">
<div className="w-2/3 font-semibold">Spicy Seafood Pasta</div>
<div className="w-1/3 font-semibold flex items-center justify-center text-lg"><AiOutlineMinusCircle className="cursor-pointer" /><span className="mx-2">1</span><AiOutlinePlusCircle className="cursor-pointer" /></div>
</div>
</li>
</ol>
</div>
</header>
</div>
);
};
export default Navbar;
And It is working fine in laptop device
Laptop screenshot
but not in inspect mode
Inspect mode screenshot

Answer 1

First thing you can do is to refresh the page. Secondly below is another approach, although its not the perfect solution but it works for me.
Solution
One thing you can do is that instead of translating you can hide and unhide the side bar like this
const toggleCart = () => {
if (ref.current.classList.contains("hidden")) {
ref.current.classList.remove("hidden");
ref.current.classList.add('block');
}
else if (!ref.current.classList.contains("hidden")) {
ref.current.classList.remove('block');
ref.current.classList.add('hidden');
}
}
And then change the sidecart as
<div
ref={ref}
className=" w-72 sideCart absolute top-0 right-0 bg-gray-200 px-8 py-10 transform transition-transform hidden"
>
<h2 className="font-bold text-xl text-center">Shopping Cart</h2>
<span
onClick={toggleCart}
className="absolute top-5 right-2 cursor-pointer text-2xl text-gray-600"
>
<AiFillCloseCircle />
</span>
<ol className="list-decimal font-semibold">
<li>
<div className="item flex my-5">
<div className="w-2/3 font-semibold">Spicy Seafood Pasta</div>
<div className="w-1/3 font-semibold flex items-center justify-center text-lg"><AiOutlineMinusCircle className="cursor-pointer" /><span className="mx-2">1</span><AiOutlinePlusCircle className="cursor-pointer" /></div>
</div>
</li>
</ol>
</div>