info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-16 14:14:11 +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" />
</button>
<div
className={cn(
'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',
{
'pointer-events-auto translate-y-2.5 opacity-100': isOpen,
},
)}
>
{links.map((link) => (
<a
href={link.link}
target={link.isExternal ? '_blank' : undefined}
rel={link.isExternal ? 'noopener noreferrer' : undefined}
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>
<span className="flex flex-col">
<span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
{link.label}
{isOpen && (
<div
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',
)}
>
{links.map((link) => (
<a
href={link.link}
target={link.isExternal ? '_blank' : undefined}
rel={link.isExternal ? 'noopener noreferrer' : undefined}
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>
<span className="text-sm">{link.description}</span>
</span>
</a>
))}
</div>
<span className="flex flex-col">
<span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
{link.label}
</span>
<span className="text-sm">{link.description}</span>
</span>
</a>
))}
</div>
)}
</div>
);
}