From 23eee85b2eecc4c3ecdab0fa7515719441a10505 Mon Sep 17 00:00:00 2001
From: Ali Farooq <Alimuhammadfc5@gmail.com>
Date: Sun, 28 Apr 2024 22:47:06 +0500
Subject: [PATCH] refactor(saas): sidebar external link items

---
 .../src/app/(app)/_components/sidebar-nav.tsx | 24 ++++++++++++++++---
 starterkits/saas/src/config/sidebar.ts        |  2 ++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/starterkits/saas/src/app/(app)/_components/sidebar-nav.tsx b/starterkits/saas/src/app/(app)/_components/sidebar-nav.tsx
index ddcac56..582461a 100644
--- a/starterkits/saas/src/app/(app)/_components/sidebar-nav.tsx
+++ b/starterkits/saas/src/app/(app)/_components/sidebar-nav.tsx
@@ -18,7 +18,7 @@ import {
     TooltipProvider,
     TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, ExternalLinkIcon } from "lucide-react";
 import { sidebarConfig } from "@/config/sidebar";
 import { type VariantProps } from "class-variance-authority";
 
@@ -248,6 +248,7 @@ type NavLinkProps = {
     active?: boolean;
     isCollapsed?: boolean;
     size?: ButtonProps["size"];
+    external?: boolean;
 };
 
 function NavLink({
@@ -258,16 +259,33 @@ function NavLink({
     active,
     size = "default",
     isCollapsed,
+    external,
 }: NavLinkProps) {
+    const isExternal = href.startsWith("http") ?? external;
+
+    const linkTarget = isExternal ? "_blank" : "_self";
+
     return (
-        <Link href={href} className={linkStyle({ active, disabled, size })}>
+        <Link
+            href={href}
+            className={linkStyle({ active, disabled, size })}
+            target={linkTarget}
+            rel="noreferrer"
+        >
             <Icon
                 className={cn(
                     "flex-shrink-0",
                     isCollapsed ? "h-5 w-5" : "h-4 w-4 ",
                 )}
             />
-            {!isCollapsed && <span className="truncate">{label}</span>}
+            {!isCollapsed && (
+                <span className="flex-grow truncate text-left">{label}</span>
+            )}
+            {isExternal && (
+                <span className="text-muted-foreground">
+                    <ExternalLinkIcon className="ml-2 h-3 w-3" />
+                </span>
+            )}
         </Link>
     );
 }
diff --git a/starterkits/saas/src/config/sidebar.ts b/starterkits/saas/src/config/sidebar.ts
index 70242ae..7fc640e 100644
--- a/starterkits/saas/src/config/sidebar.ts
+++ b/starterkits/saas/src/config/sidebar.ts
@@ -41,6 +41,7 @@ type NavItemBase = {
 
 type NavItemWithHref = NavItemBase & {
     href: string;
+    external?: boolean;
     subMenu?: never;
 };
 
@@ -50,6 +51,7 @@ type NavItemWithSubMenu = NavItemBase & {
         label: string;
         href: string;
         icon: React.ComponentType<IconProps>;
+        external?: boolean;
         disabled?: boolean;
     }[];
 };