fix: simplify path extraction logic in Sidebar component

This commit is contained in:
Ardeman 2025-03-05 22:39:00 +08:00
parent 9dd7e798f7
commit a6e6e10c69

View File

@ -5,11 +5,8 @@ import { MENU } from './menu'
export const Sidebar = () => {
const { pathname } = useLocation()
const path = () => {
// Extract the first three segments for deep paths, otherwise use the full pathname
const segments = pathname.split('/')
return segments.length > 3 ? segments.slice(0, 3).join('/') : pathname
}
const segments = pathname.split('/')
const path = segments.length > 3 ? segments.slice(0, 3).join('/') : pathname
return (
<div className="flex min-h-[calc(100dvh-80px)] flex-col gap-y-10 overflow-y-auto bg-white p-5">
@ -24,19 +21,19 @@ export const Sidebar = () => {
to={url}
key={`${group}-${title}`}
className={twMerge(
path() === url ? 'bg-[#707FDD]/10 font-bold' : '',
path === url ? 'bg-[#707FDD]/10 font-bold' : '',
'group/menu flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition-all hover:bg-[#707FDD]/10',
)}
>
<Icon
className={twMerge(
path() === url ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
path === url ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
)}
/>
<span
className={twMerge(
path() === url ? 'text-[#5363AB]' : 'text-[#273240]',
path === url ? 'text-[#5363AB]' : 'text-[#273240]',
'text-base transition-all group-hover/menu:text-[#5363AB]',
)}
>