mobile fix for docs nav (#105)

* mobile fix

* [autofix.ci] apply automated fixes

* new tab no safety

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: MichaelUnkey

apps/www/components/audit/command.tsx

@@ -5,7 +5,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import * as React from "react";
 
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 
 const Command = React.forwardRef<
@@ -31,6 +31,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="p-0 overflow-hidden shadow-lg">
+        <DialogTitle className="sr-only">Menu</DialogTitle>
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-white/60 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children as any}
         </Command>

apps/www/components/navbar/link.tsx

@@ -23,6 +23,7 @@ export const DesktopNavLink: React.FC<Props> = ({ href, label, external }) => {
 export function MobileNavLink({
   href,
   label,
+  external,
   onClick,
 }: { href: string; label: string; external?: boolean; onClick: () => void }) {
   const segment = useSelectedLayoutSegment();
@@ -39,7 +40,11 @@ export function MobileNavLink({
       )}
       onClick={() => {
         onClick();
-        router.push(href);
+        if (external) {
+          window.open(href, "_blank", "noopener,noreferrer");
+        } else {
+          router.push(href);
+        }
       }}
     >
       {label}

apps/www/components/navbar/navigation.tsx

@@ -4,6 +4,7 @@ import {
   DrawerContent,
   DrawerFooter,
   DrawerHeader,
+  DrawerTitle,
   DrawerTrigger,
 } from "@/components/ui/drawer";
 import { cn } from "@/lib/utils";
@@ -109,6 +110,7 @@ function MobileLinks({ className }: { className?: string }) {
           </button>
         </DrawerTrigger>
         <DrawerContent className="bg-black/90 z-[110]">
+          <DrawerTitle className="sr-only">Menu</DrawerTitle>
           <DrawerHeader className="flex justify-center">
             <Logo />
           </DrawerHeader>
@@ -141,7 +143,12 @@ function MobileLinks({ className }: { className?: string }) {
                 />
               </li>
               <li>
-                <MobileNavLink onClick={() => setIsOpen(false)} href="/docs" label="Docs" />
+                <MobileNavLink
+                  onClick={() => setIsOpen(false)}
+                  href="https://unkey.com/docs/introduction"
+                  label="Docs"
+                  external
+                />
               </li>
               <li>
                 <MobileNavLink
@@ -200,7 +207,7 @@ const DesktopLinks: React.FC<{ className: string }> = ({ className }) => (
       <DesktopNavLink href="/templates" label="Templates" />
     </li>
     <li>
-      <DesktopNavLink href="/docs/introduction" label="Docs" external />
+      <DesktopNavLink href="https://unkey.com/docs/introduction" label="Docs" external />
     </li>
     <li>
       <DesktopNavLink href="https://go.unkey.com/discord" label="Discord" external />

apps/www/components/ui/command.tsx

@@ -5,7 +5,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import * as React from "react";
 
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 
 const Command = React.forwardRef<
@@ -31,6 +31,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <DialogTitle className="sr-only">Command Menu</DialogTitle>
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children as any}
         </Command>