The sidebar is not hiding in smaller devices

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>