chore: fixed sidebar highlight not working (#952)

This commit is contained in:
Kunal Vishwakarma 2023-04-25 12:10:05 +05:30 committed by GitHub
parent 8c1ad69f0c
commit 529ed4432c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 4 deletions

View File

@ -171,7 +171,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
<Link key={item.name} href={item.href}> <Link key={item.name} href={item.href}>
<a <a
className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${ className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${
item.href === router.asPath router.asPath.includes(item.href)
? "bg-brand-base text-brand-secondary" ? "bg-brand-base text-brand-secondary"
: "text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-secondary focus:bg-brand-base focus:text-brand-secondary" : "text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-secondary focus:bg-brand-base focus:text-brand-secondary"
} ${sidebarCollapse ? "justify-center" : ""}`} } ${sidebarCollapse ? "justify-center" : ""}`}
@ -179,7 +179,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
<div className="grid place-items-center"> <div className="grid place-items-center">
<item.icon <item.icon
className={`h-5 w-5 flex-shrink-0 ${ className={`h-5 w-5 flex-shrink-0 ${
item.href === router.asPath router.asPath.includes(item.href)
? "text-brand-secondary" ? "text-brand-secondary"
: "text-brand-secondary group-hover:text-brand-base" : "text-brand-secondary group-hover:text-brand-base"
} ${!sidebarCollapse ? "mr-3" : ""}`} } ${!sidebarCollapse ? "mr-3" : ""}`}

View File

@ -42,7 +42,11 @@ export const WorkspaceSidebarMenu: React.FC = () => {
<Link key={index} href={link.href}> <Link key={index} href={link.href}>
<a <a
className={`${ className={`${
link.href === router.asPath (
link.name === "Dashboard"
? router.asPath === link.href
: router.asPath.includes(link.href)
)
? "bg-brand-base text-brand-base" ? "bg-brand-base text-brand-base"
: "text-brand-secondary hover:bg-brand-base hover:text-brand-base focus:bg-brand-base" : "text-brand-secondary hover:bg-brand-base hover:text-brand-base focus:bg-brand-base"
} group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${ } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
@ -52,7 +56,13 @@ export const WorkspaceSidebarMenu: React.FC = () => {
<span className="grid h-5 w-5 flex-shrink-0 place-items-center"> <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
<link.icon <link.icon
className={`${ className={`${
link.href === router.asPath ? "text-brand-base" : "text-brand-secondary" (
link.name === "Dashboard"
? router.asPath === link.href
: router.asPath.includes(link.href)
)
? "text-brand-base"
: "text-brand-secondary"
} group-hover:text-brand-base`} } group-hover:text-brand-base`}
aria-hidden="true" aria-hidden="true"
height="20" height="20"