Header layout rather than sidebar layout

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 { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-vue-next';
+import { AppWindowIcon, BookOpen, Folder, LayoutGrid, Menu, Search, ServerIcon } from 'lucide-vue-next';
 import { computed } from 'vue';
 
 interface Props {
@@ -39,24 +39,41 @@ const activeItemStyles = computed(
 );
 
 const mainNavItems: NavItem[] = [
-    {
-        title: 'Dashboard',
-        href: '/dashboard',
-        icon: LayoutGrid,
-    },
+    // {
+    //     title: 'Dashboard',
+    //     href: new URL(route('dashboard')).pathname,
+    //     icon: LayoutGrid,
+    // },
 ];
 
+if (page.props.organisation) {
+    mainNavItems.push({
+        title: 'Applications',
+        href: new URL(route('applications.index', {
+            organisation: page.props?.organisation?.id
+        })).pathname,
+        icon: AppWindowIcon,
+    });
+    mainNavItems.push({
+        title: 'Servers',
+        href: new URL(route('servers.index', {
+            organisation: page.props?.organisation?.id
+        })).pathname,
+        icon: ServerIcon,
+    })
+}
+
 const rightNavItems: NavItem[] = [
-    {
-        title: 'Repository',
-        href: 'https://github.com/laravel/vue-starter-kit',
-        icon: Folder,
-    },
-    {
-        title: 'Documentation',
-        href: 'https://laravel.com/docs/starter-kits',
-        icon: BookOpen,
-    },
+    // {
+    //     title: 'Repository',
+    //     href: 'https://github.com/laravel/vue-starter-kit',
+    //     icon: Folder,
+    // },
+    // {
+    //     title: 'Documentation',
+    //     href: 'https://laravel.com/docs/starter-kits',
+    //     icon: BookOpen,
+    // },
 ];
 </script>
 

resources/js/components/AppLogoIcon.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { WavesIcon } from 'lucide-vue-next';
 import type { HTMLAttributes } from 'vue';
 
 defineOptions({
@@ -13,12 +14,5 @@ defineProps<Props>();
 </script>
 
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" :class="className" v-bind="$attrs">
-        <path
-            fill="currentColor"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
-        />
-    </svg>
+    <WavesIcon v-bind="$attrs" :class="className" />
 </template>