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

Answer 1

import React, { useRef } from 'react';
import Link from 'next/link';
import { CiShoppingCart } from "react-icons/ci";
import { IoCloseCircleOutline } from "react-icons/io5";
import { FaCirclePlus, 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">
          <li><Link href="/tshirts"><a>Tshirts</a></Link></li>
          <li><Link href="/hoodies"><a>Hoodies</a></Link></li>
          <li><Link href="/stickers"><a>Stickers</a></Link></li>
          <li><Link href="/mugs"><a>Mugs</a></Link></li>
        </ul>
      </div>
      <div className="absolute right-0 top-4 cursor-pointer" onClick={toggleCart}>
        <CiShoppingCart className="text-xl md:text-3xl right-0" />
      </div>
      <div 
        className="absolute top-0 right-0 bg-orange-200 px-10 py-10 transform transition-transform translate-x-full md:w-1/3 w-full h-screen" 
        ref={ref}
      >
        <span onClick={toggleCart}><IoCloseCircleOutline className='absolute top-3 right-3 text-xl'/></span>
        <h2 className='font-bold text-center mb-3'>Shopping Cart</h2>
        <div>
          <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;

please try this snippet.