Merge pull request #692 from code16/allow-menu-open-new-tab

Allow opening external link to a new tab.

Author: aguingand

docs/guide/building-menu.md

@@ -72,6 +72,18 @@ class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
 }
 ```
 
+You can open the link in a new tab using the `openInNewTab` parameter:
+
+```php
+class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
+{
+    public function build(): self
+    {
+        return $this->addExternalLink('https://google.com', 'Some external link', openInNewTab: true);
+    }
+}
+```
+
 ### Define icons
 
 Yon can specify a [blade-icons](https://blade-ui-kit.com/blade-icons) name for each link. It can be an icon set coming from a [package](https://github.com/blade-ui-kit/blade-icons?tab=readme-ov-file#icon-packages) or defined in the project config.

resources/js/Layouts/Layout.vue

@@ -205,7 +205,7 @@
                                                         <DropdownMenuSeparator />
                                                     </template>
                                                     <template v-else>
-                                                        <DropdownMenuItem :as="item.isExternalLink ? 'a' : Link" :href="item.url">
+                                                        <DropdownMenuItem :as="item.isExternalLink ? 'a' : Link" :href="item.url" :target="item.openInNewTab ? '_blank' : '_self'">
                                                             <template v-if="item.icon">
                                                                 <Icon class="size-4" :icon="item.icon" />
                                                             </template>

resources/js/components/MenuItem.vue

@@ -26,7 +26,7 @@
                     <Icon :icon="item.icon" class="size-4" />
                 </template>
                 <span class="flex-1">
-                    <component :is="item.isExternalLink ? 'a' : Link" :href="item.url">
+                    <component :is="item.isExternalLink ? 'a' : Link" :href="item.url" :target="item.openInNewTab ? '_blank' : '_self'">
                         <span class="absolute inset-0 z-1"></span>
                         {{ item.label }}
                     </component>

resources/js/types/generated.d.ts

@@ -746,6 +746,7 @@ export type MenuItemData = {
   current: boolean;
   children: Array<MenuItemData> | null;
   isCollapsible: boolean;
+  openInNewTab: boolean;
 };
 export type NotificationData = {
   title: string;

src/Data/MenuItemData.php

@@ -28,6 +28,7 @@ public function __construct(
         /** @var MenuItemData[]|null */
         public ?array $children = null,
         public bool $isCollapsible = false,
+        public bool $openInNewTab = false,
     ) {}
 
     public static function from(SharpMenuItem $item)
@@ -63,6 +64,7 @@ public static function from(SharpMenuItem $item)
                 isExternalLink: $item->isExternalLink(),
                 entityKey: $item->isEntity() ? $item->getEntityKey() : null,
                 current: $item->isEntity() && $item->isCurrent(),
+                openInNewTab: $item->isOpenInNewTab(),
             );
         }
 

src/Utils/Menu/HasSharpMenuItems.php

@@ -36,8 +36,9 @@ public function addExternalLink(
         ?Closure $badge = null,
         ?string $badgeTooltip = null,
         string|SharpLinkTo|null $badgeLink = null,
+        bool $openInNewTab = false,
     ): self {
-        $this->items[] = (new SharpMenuItemLink($label, $icon, $badge, $badgeTooltip, $badgeLink))
+        $this->items[] = (new SharpMenuItemLink($label, $icon, $badge, $badgeTooltip, $badgeLink, $openInNewTab))
             ->setUrl($url);
 
         return $this;

src/Utils/Menu/SharpMenuItemLink.php

@@ -21,6 +21,7 @@ public function __construct(
         protected ?Closure $badge,
         protected ?string $badgeTooltip = null,
         protected string|SharpLinkTo|null $badgeLink = null,
+        protected bool $openInNewTab = false,
     ) {}
 
     public function setEntity(string $entityKey): self
@@ -121,4 +122,9 @@ public function isCurrent(): bool
 
         return $this->isEntity() && $rootEntityKey === $this->getEntityKey();
     }
+
+    public function isOpenInNewTab(): bool
+    {
+        return $this->openInNewTab;
+    }
 }