legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update sidebar navigation to use pathname and add subscriptions layout component

Browse Source
This commit is contained in:
Ardeman 2025-02-23 17:45:46 +08:00
parent 396721fbf2
commit 91163288db
2 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/layouts/admin/sidebar.tsx
View File

@ -1,9 +1,11 @@
import { NavLink } from 'react-router'
import { NavLink, useLocation } from 'react-router'
import { twMerge } from 'tailwind-merge'
import { MENU } from './menu'
export const Sidebar = () => {
const { pathname } = useLocation()
return (
<div className="flex min-h-[calc(100dvh-80px)] flex-col gap-y-10 overflow-y-auto bg-white p-5">
{MENU.map(({ group, items }) => (
@ -16,31 +18,25 @@ export const Sidebar = () => {
<NavLink
to={url}
key={`${group}-${title}`}
className={({ isActive }) =>
twMerge(
isActive ? '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',
)
}
>
{({ isActive }) => (
<>
<Icon
className={twMerge(
isActive ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
)}
/>
<span
className={twMerge(
isActive ? 'text-[#5363AB]' : 'text-[#273240]',
'text-base transition-all group-hover/menu:text-[#5363AB]',
)}
>
{title}
</span>
</>
className={twMerge(
pathname === 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(
pathname === url ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
)}
/>
<span
className={twMerge(
pathname === url ? 'text-[#5363AB]' : 'text-[#273240]',
'text-base transition-all group-hover/menu:text-[#5363AB]',
)}
>
{title}
</span>
</NavLink>
))}
</div>

0
app/routes/_layout.admin.dashboard.subsciptions.tsx → app/routes/_layout.admin.dashboard.subscriptions.tsx
View File