how to make a sidebar mobile friendly

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 (

Logo goes here

Tshirts

Hoodies

Stickers

Mugs

Shoping Cart

                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                1

                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                1

)
}
export default Navbar

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 ( Logo goes here Tshirts Hoodies Stickers Mugs Shopping Cart Lorem ipsum dolor sit amet consectetur adipisicing elit. 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. 1 ) } export default Navbar;