fix: simplify path extraction logic in Sidebar component
This commit is contained in:
parent
9dd7e798f7
commit
a6e6e10c69
@ -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]',
|
||||
)}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user