展开/折叠功能在移动的上工作完美,但在桌面上不能正常工作。这段代码最初来自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;
字符串
它是一个响应性设计问题吗?是什么导致了这一点?
1条答案
按热度按时间6bc51xsx1#
看起来像是在使用CSS类有条件地隐藏大屏幕上的展开/折叠按钮,特别是隐藏的
lg:inline-flex 2xl:hidden
。这些类控制按钮在不同屏幕尺寸上的可见性。类
hidden
和lg:inline-flex
负责隐藏较大屏幕(桌面)上的按钮,但类2xl:hidden
可能会导致问题,因为它也隐藏了2xl屏幕上的按钮,我认为这会导致扩展/折叠按钮在所有屏幕尺寸上都被隐藏。试试这个:
字符串