Keyboard Navigation only on vissible elements

src/components/NavigationDropdown.tsx

@@ -71,34 +71,33 @@ export function NavigationDropdown() {
       >
         <Menu className="h-5 w-5" />
       </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">
+              </span>
-              <link.Icon className="inline-block h-5 w-5" />
+              <span className="flex flex-col">
-            </span>
+                <span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
-            <span className="flex flex-col">
+                  {link.label}
-              <span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
+                </span>
-                {link.label}
+                <span className="text-sm">{link.description}</span>
               </span>
-              <span className="text-sm">{link.description}</span>
+            </a>
-            </span>
+          ))}
-          </a>
+        </div>
-        ))}
+      )}
-      </div>
     </div>
   );
 }