展开/折叠功能在移动的上工作完美，但在桌面上不能正常工作。这段代码最初来自ReactJS，我将其合并到NextJS中。它利用CSS的顺风
我试着修复它，但最后只是打破了代码。

import React, { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import SidebarLinkGroup from './SidebarLinkGroup';
import SearchModal from '../components/ModalSearch';

import { usePathname } from 'next/navigation'


function Sidebar({ sidebarOpen, setSidebarOpen }) {
  const pathname = usePathname();
  console.log(pathname)
  const trigger = useRef(null);
  const sidebar = useRef(null);

  const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
  const [sidebarExpanded, setSidebarExpanded] = useState(storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true');
  const [searchModalOpen, setSearchModalOpen] = useState(false);

  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!sidebar.current || !trigger.current) return;
      if (!sidebarOpen || sidebar.current.contains(target) || trigger.current.contains(target)) return;
      setSidebarOpen(false);
    };
    document.addEventListener('click', clickHandler);
    return () => document.removeEventListener('click', clickHandler);
  });

  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!sidebarOpen || keyCode !== 27) return;
      setSidebarOpen(false);
    };
    document.addEventListener('keydown', keyHandler);
    return () => document.removeEventListener('keydown', keyHandler);
  });

  useEffect(() => {
    localStorage.setItem('sidebar-expanded', sidebarExpanded);
    if (sidebarExpanded) {
      document.querySelector('body').classList.add('sidebar-expanded');
    } else {
      document.querySelector('body').classList.remove('sidebar-expanded');
    }
  }, [sidebarExpanded]);

  return (
    <div>
      {/* Sidebar backdrop (mobile only) */}
      <div
        className={`fixed inset-0 bg-slate-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200 ${
          sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
        }`}
        aria-hidden="true"
      ></div>

      {/* Sidebar */}
      <div
        id="sidebar"
        ref={sidebar}
        className={`flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-slate-800 p-4 transition-all duration-200 ease-in-out ${
          sidebarOpen ? 'translate-x-0' : '-translate-x-64'
        }`}
      >
        {/* Sidebar header */}
        <div className="flex justify-between mb-10 pr-3 sm:px-2">
          {/* Close button */}
          <button
            ref={trigger}
            className="lg:hidden text-green-500 hover:text-green-500"
            onClick={() => setSidebarOpen(!sidebarOpen)}
            aria-controls="sidebar"
            aria-expanded={sidebarOpen}
          >
            <span className="sr-only">Close sidebar</span>
            <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
            </svg>
          </button>
          {/* Logo */}
        </div>

        {/* Links */}
        <div className="space-y-8">
          {/* Pages group */}
          <div>
            <h3 className="text-xs uppercase text-green-500 font-semibold pl-3">
              <span className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">
                •••
              </span>
              <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">CScore.</span>
            </h3>
            <ul className="mt-3">
              {/* Favorites */}
              <li className={`px-3 py-2 rounded-sm mb-0.5 last:mb-0 ${pathname === ('favorites') && 'bg-slate-900'}`}>
                <Link
                  
                  href="/favorites"
                  className={`block text-slate-200 truncate transition duration-150 ${
                    pathname === ('favorites') ? 'hover:text-slate-200' : 'hover:text-white'
                  }`}
                >
                  <div className="flex items-center">
                    <svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                      <path
                        className={`fill-current ${pathname === ('favorites') ? 'text-green-500' : 'text-green-500'}`}
                        d="M12 3.08l1.54 4.478h3.946l-3.178 2.31 1.54 4.478-3.934-2.918-3.934 2.918 1.54-4.478-3.178-2.31h3.946L12 3.08zm0-2.08l-3.932 11.395-9.068.605 8.137 6.01L3.58 24l8.398-5.052 8.136 6.01-1.224-8.92 8.137-6.01H13.93L12 1z"
                      />
                    </svg>
                    <span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200 text-green-500">Favoritos</span>
                  </div>
                </Link>
              </li>
              <li className={`px-3 py-2 rounded-sm mb-0.5 last:mb-0 ${pathname === ('search') && 'bg-slate-900'}`}>
                <button
                  className={`block text-slate-200 truncate transition duration-150 ${
                    pathname === ('search') ? 'hover:text-slate-200' : 'hover:text-white'
                  }`}
                  onClick={(e) => {
                    e.stopPropagation();
                    setSearchModalOpen(true);
                  }}
                  aria-controls="search-modal"
                >
                  <div className="flex items-center">
                    <svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                      {/* Magnifying Glass icon */}
                      <path
                        className={`fill-current ${pathname === ('search') ? 'text-green-500' : 'text-green-500'}`}
                        d="M15.5 14h-.79l-.28-.27c1.09-1.32 1.75-3.01 1.75-4.73C16.18 4.01 14.17 2 11.75 2S7.32 4.01 7.32 6.99c0 1.72.66 3.41 1.75 4.73l-.28.27H8.5l4 4L17 14.01l-1.5-.01zm-3.75-1c-1.93 0-3.5-1.57-3.5-3.5S9.82 6 11.75 6s3.5 1.57 3.5 3.5S13.68 13 11.75 13z"
                      />
                    </svg>
                    <span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200 text-green-500">Procurar Jogos</span>
                  </div>
                </button>
              </li>
              {/* Utility */}
            </ul>
          </div>
        </div>

        {/* Expand / collapse button */}
        <div className="pt-3 hidden lg:inline-flex 2xl:hidden justify-end mt-auto">
          <div className="px-3 py-2">
            <button onClick={() => setSidebarExpanded(!sidebarExpanded)}>
              <span className="sr-only">Expand / collapse sidebar</span>
              <svg className="w-6 h-6 fill-current sidebar-expanded:rotate-180" viewBox="0 0 24 24">
                <path className="text-green-500" d="M19.586 11l-5-5L16 4.586 23.414 12 16 19.414 14.586 18l5-5H7v-2z" />
                <path className="text-green-500" d="M3 23H1V1h2z" />
              </svg>
            </button>
          </div>
        </div>
      </div>
      <SearchModal id="search-modal" searchId="search" modalOpen={searchModalOpen} setModalOpen={setSearchModalOpen} />
    </div>
  );
}

export default Sidebar;

字符串
它是一个响应性设计问题吗？是什么导致了这一点？