info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-17 14:41:52 +02:00
Code Issues Releases Wiki Activity

Keyboard Navigation only on vissible elements

Browse Source
This commit is contained in:
Deepak Mardi
2024-03-31 23:05:15 +05:30
parent d4eef5ecd0
commit dbdfb2226b
1 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/NavigationDropdown.tsx
View File

@@ -71,34 +71,33 @@ export function NavigationDropdown() {
> >
<Menu className="h-5 w-5" /> <Menu className="h-5 w-5" />
</button> </button>
<div {isOpen && (
className={cn( <div
'absolute pointer-events-none left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100', className={cn(
{ 'pointer-events-auto absolute left-0 top-full z-[999] mt-2 w-48 min-w-[320px] translate-y-2.5 rounded-lg bg-slate-800 py-2 opacity-100 shadow-xl transition-all duration-100',
'pointer-events-auto translate-y-2.5 opacity-100': isOpen, )}
}, >
)} {links.map((link) => (
> <a
{links.map((link) => ( href={link.link}
<a target={link.isExternal ? '_blank' : undefined}
href={link.link} rel={link.isExternal ? 'noopener noreferrer' : undefined}
target={link.isExternal ? '_blank' : undefined} key={link.link}
rel={link.isExternal ? 'noopener noreferrer' : undefined} className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700"
key={link.link} >
className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700" <span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100">
> <link.Icon className="inline-block h-5 w-5" />
<span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100">
<link.Icon className="inline-block h-5 w-5" />
</span>
<span className="flex flex-col">
<span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
{link.label}
</span> </span>
<span className="text-sm">{link.description}</span> <span className="flex flex-col">
</span> <span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
</a> {link.label}
))} </span>
</div> <span className="text-sm">{link.description}</span>
</span>
</a>
))}
</div>
)}
</div> </div>
); );
} }