Merge pull request #132 from eddimull/staging

Bob's eyes can't see blue

resources/js/Components/NavSubmenu.vue

@@ -1,76 +1,74 @@
 <template>
-  <div class="booking-layout">
-    <div class="booking-header dark:bg-slate-700 p-4 border-b grid">
-      <h1 class="text-xl font-semibold text-gray-700">
-        <span class="text-blue-600">{{ booking.name }}</span>
-      </h1>
-      <span class="mt-0 text-xs text-gray-500 dark:text-gray-50">{{ booking.date }}</span>
-      <span class="mt-0 text-xs text-gray-500 dark:text-gray-50">Status: {{ booking.status }}</span>
-    </div>
-    <TabMenu
-      :model="items"
-      class="pb-2 border-b md:flex md:flex-row flex-col w-full"
-      :active-index="items.findIndex(item => item.href === $page.url) || 0"
-    >
-      <template
-        #item="{ item }"
-      >
-        <div class="flex justify-evenly items-center p-2">
-          <Link
-            :href="item.href"
-            :active="$page.url === item.href"
-            custom
-            preserve-scroll
-            preserve-state
-          >
-            <a
-              role="menuitem"
-              class="p-menuitem-link"
+    <div class="booking-layout">
+        <div class="booking-header dark:bg-slate-700 p-4 border-b grid">
+            <h1 class="text-3xl font-semibold text-gray-700 py-2">
+                <span class="text-black dark:text-white">{{
+                    booking.name
+                }}</span>
+            </h1>
+            <span class="mt-0 text-xs text-gray-500 dark:text-gray-50">{{
+                booking.date
+            }}</span>
+            <span class="mt-0 text-xs text-gray-500 dark:text-gray-50"
+                >Status: {{ booking.status }}</span
             >
-              <span class="p-menuitem-text">{{ item.label }}</span>
-            </a>
-          </Link>
         </div>
-      </template>
-    </TabMenu>
-  </div>
+        <TabMenu
+            :model="items"
+            class="pb-2 border-b md:flex md:flex-row flex-col w-full"
+            :active-index="
+                items.findIndex((item) => item.href === $page.url) || 0
+            "
+        >
+            <template #item="{ item }">
+                <div class="flex justify-evenly items-center p-2">
+                    <Link
+                        :href="item.href"
+                        :active="$page.url === item.href"
+                        custom
+                        preserve-scroll
+                        preserve-state
+                    >
+                        <a role="menuitem" class="p-menuitem-link">
+                            <span class="p-menuitem-text">{{
+                                item.label
+                            }}</span>
+                        </a>
+                    </Link>
+                </div>
+            </template>
+        </TabMenu>
+    </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import TabMenu from 'primevue/tabmenu';
-import Link from '@/Components/NavLink.vue';
-import { usePage } from '@inertiajs/inertia-vue3';
-
+import { computed, onMounted, ref, watch } from "vue";
+import TabMenu from "primevue/tabmenu";
+import Link from "@/Components/NavLink.vue";
+import { usePage } from "@inertiajs/inertia-vue3";
 
 // Find the current route params
 const routeParameters = route().params;
 const props = defineProps({
     routes: {
         type: Object,
-        required: true
+        required: true,
     },
     booking: {
         type: Object,
-        required: true
-    }
+        required: true,
+    },
 });
 
-
 const items = computed(() => {
-
     return Object.entries(props.routes).map(([name, routeInfo]) => ({
-        label: name.replace('Booking ', ''),
+        label: name.replace("Booking ", ""),
         route: routeInfo.uri,
-        href: route(name, routeParameters,false)
+        href: route(name, routeParameters, false),
     }));
 });
 
 let activeItemIndex = ref(0);
-
-
-
-
 </script>
 
 <style scoped>