how to make a sidebar mobile friendly

Question

i am a react app using next js and i stuct to some where. i am using tailwind css.its a css related issue.on page load my cart should not display so i hide to the right using translate-x-full on click to cart button i showed to add a class translate-x-0. on laptop its looks fine and working fine but when shited to mobile devies on chrome.this side bar is displaying on the right. i don't know how to fix this issue.

My full code is:its a navbar component code with all imports:

import React, { useRef } from 'react'
import Link from 'next/link'
import { CiShoppingCart } from "react-icons/ci";
import { IoCloseCircleOutline } from "react-icons/io5";
import { FaCirclePlus } from "react-icons/fa6";
import { FaCircleMinus } from "react-icons/fa6";
const Navbar = () => {
  let ref=useRef();
  let 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");
    }
    }
  return (
    <div className='flex flex-col md:flex-row md:justify-start justify-center items-center py-4'>
      <div className="logo mx-5">Logo goes here</div>
      <div className='nav '>
        <ul className="flex items-center space-x-3 font-bold ">
Please enclose these list in Link tage of react
        <li>Tshirts</li>
       <li>Hoodies</li>
        <li>Stickers</li>
          <li>Mugs</li>
        </ul>
      <div className="absolute right-0 top-4 cursor-pointer" onClick={toggleCart}><CiShoppingCart className="text-xl md:text-3xl right-0" />
      </div>
      </div>
            <div className="absolute top-0 right-0 bg-orange-200 px-10 py-10 transform transition-transform translate-x-full" ref={ref}>
       <span  onClick={toggleCart}><IoCloseCircleOutline className='absolute top-3 right-3 text-xl'/></span>
        <h2 className='font-bold text-center mb-3'>Shoping Cart</h2>
    <div className=''>
          <ol className='list-decimal'>
            <li className="">
              <div className="item flex justify-between">
                <span className='w-2/3'>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
                <span className='flex w-1/3'><FaCircleMinus className='text-pink-500 my-1 mx-2' />1<FaCirclePlus  className='text-pink-500 my-1  mx-2'  /></span>
              </div>
            </li>
            <li className="">
              <div className="item flex justify-between">
                <span className='w-2/3'>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
                <span className='flex w-1/3'><FaCircleMinus className='text-pink-500 my-1 mx-2' />1<FaCirclePlus  className='text-pink-500 my-1  mx-2'  /></span>
              </div>
            </li>
          </ol>
        </div>
      </div>
      </div>
  )
}
export default Navbar