Refactored mobile-nav component

src/components/mobile-nav.tsx

@@ -12,6 +12,37 @@ import Logo from "./logo";
 import { ny } from "@/lib/utils";
 import { components } from "./navigation";
 
+interface MobileLinkProps
+	extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+	onOpenChange?: (open: boolean) => void;
+	children: React.ReactNode;
+	className?: string;
+	href: string;
+}
+
+function MobileLink({
+	href,
+	onOpenChange,
+	className,
+	children,
+	...props
+}: MobileLinkProps) {
+	const router = useRouter();
+	return (
+		<a
+			href={href}
+			onClick={() => {
+				router.push(href);
+				onOpenChange?.(false);
+			}}
+			className={ny(className, "my-4")}
+			{...props}
+		>
+			{children}
+		</a>
+	);
+}
+
 export function MobileNav() {
 	const [open, setOpen] = React.useState(false);
 
@@ -60,12 +91,18 @@ export function MobileNav() {
 						<MobileLink
 							href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
 							onOpenChange={setOpen}
+							target="_blank"
 						>
 							<div>Donate {"<"}3</div>
 							<p className="text-xs opacity-60">Support the project</p>
 						</MobileLink>
-						{components.map(({ title, href, description }) => (
-							<MobileLink href={href} key={href} onOpenChange={setOpen}>
+						{components.map(({ title, href, description, isTargetBlank }) => (
+							<MobileLink
+								href={href}
+								key={href}
+								target={isTargetBlank ? "_blank" : "_self"}
+								onOpenChange={setOpen}
+							>
 								<div>{title}</div>
 								<p className="text-xs opacity-60">{description}</p>
 							</MobileLink>
@@ -76,32 +113,3 @@ export function MobileNav() {
 		</Sheet>
 	);
 }
-
-interface MobileLinkProps extends LinkProps {
-	onOpenChange?: (open: boolean) => void;
-	children: React.ReactNode;
-	className?: string;
-}
-
-function MobileLink({
-	href,
-	onOpenChange,
-	className,
-	children,
-	...props
-}: MobileLinkProps) {
-	const router = useRouter();
-	return (
-		<a
-			href={href.toString()}
-			onClick={() => {
-				router.push(href.toString());
-				onOpenChange?.(false);
-			}}
-			className={ny(className, "my-4")}
-			{...props}
-		>
-			{children}
-		</a>
-	);
-}

src/components/navigation.tsx

@@ -21,6 +21,7 @@ export const components: {
 	title: string;
 	href: string;
 	description: string;
+	isTargetBlank?: boolean;
 }[] = [
 	{
 		title: "Privacy Policy",
@@ -33,12 +34,14 @@ export const components: {
 		href: "https://discord.gg/zen-browser",
 		description:
 			"Join our Discord server to chat with the community and get support.",
+		isTargetBlank: true,
 	},
 	{
 		title: "Source Code",
 		href: "https://github.com/zen-browser",
 		description:
 			"View the source code on GitHub and contribute to the project.",
+		isTargetBlank: true,
 	},
 	{
 		title: "Branding Assets",
@@ -55,6 +58,7 @@ export const components: {
 		title: "Documentation",
 		href: "https://docs.zen-browser.app/",
 		description: "Read the documentation to learn more about Zen Browser.",
+		isTargetBlank: true,
 	},
 ];