hash URL

resources/js/components/AppHeader.vue

@@ -18,7 +18,7 @@ import UserMenuContent from '@/components/UserMenuContent.vue';
 import { getInitials } from '@/composables/useInitials';
 import type { BreadcrumbItem, NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
-import { AppWindowIcon, BookOpen, Folder, LayoutGrid, Menu, Search, ServerIcon } from 'lucide-vue-next';
+import { AppWindowIcon, BoltIcon, Menu, Search, ServerIcon } from 'lucide-vue-next';
 import { computed } from 'vue';
 
 interface Props {
@@ -47,6 +47,13 @@ const mainNavItems: NavItem[] = [
 ];
 
 if (page.props.organisation) {
+    mainNavItems.push({
+        title: page.props.organisation.name,
+        href: new URL(route('organisations.show', {
+            organisation: page.props?.organisation?.id
+        })).pathname,
+        icon: BoltIcon,
+    });
     mainNavItems.push({
         title: 'Applications',
         href: new URL(route('applications.index', {

resources/js/pages/organisations/Show.vue

@@ -4,6 +4,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { Head, Link, WhenVisible } from '@inertiajs/vue3';
 import { AppWindowIcon, ServerIcon, UserIcon } from 'lucide-vue-next';
+import { ref, watch } from 'vue';
 
 defineProps({
     organisation: {
@@ -12,9 +13,19 @@ defineProps({
     },
     providers: {
         type: Array,
-        required: true,
+        required: false,
     },
 });
+
+const tabValue = ref(new URL(window.location.href).hash?.replace('#', '') || 'dashboard');
+watch(tabValue, () => {
+    window.history.pushState({}, '', `#${tabValue.value}`);
+});
+watch(() => window.location.hash, (newHash) => {
+    if (newHash) {
+        tabValue.value = newHash.replace('#', '');
+    }
+});
 </script>
 
 <template>
@@ -23,7 +34,7 @@ defineProps({
     <AppLayout>
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
             <h2 class="text-3xl font-bold tracking-tight">{{ organisation.name }}</h2>
-            <Tabs default-value="dashboard" :unmount-on-hide="false">
+            <Tabs v-model="tabValue" :unmount-on-hide="false">
                 <TabsList>
                     <TabsTrigger value="dashboard"> Dashboard </TabsTrigger>
                     <TabsTrigger value="settings"> Settings </TabsTrigger>