refactor(saas): sidebar external link items

alifarooq9 · Apr 28, 2024 · 23eee85 · 23eee85
1 parent fd23537
commit 23eee85
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git 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
@@ -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;
     }[];
 };