new dynamic title

app/layouts/dash_settings.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const nav : NavigationMenuItem[][] = [[
+  {
+    label: 'Home',
+    icon: 'i-lucide-house',
+    to: "/dashboard"
+  },
+  {
+    label: 'Notifications',
+    icon: 'solar:chat-round-unread-outline',
+    badge: '4',
+    to: "/events"
+  }, {
+  label: 'Settings',
+  icon: 'i-lucide-settings',
+  //to: '/settings',
+  children: [
+    {
+    label: "General",
+    icon: "solar:settings-minimalistic-broken",
+    to: "/settings",
+    },
+    {
+    label: "Profile",
+    icon: "solar:user-broken",
+    to: "/settings/profile"
+    },
+    {
+    label: "Theme",
+    icon: "solar:pallete-2-broken",
+    to: "/settings/theme"
+    },
+  ],
+  }]
+];
+
+const route = useRoute();
+const title = ref("...");
+
+watch(route, (newVal, oldVal) => {
+  title.value = (newVal.meta.title as string) || "Settings";
+}, {immediate: true});
+//const title = pageMeta.title || "Settings"
+
+onMounted(() => {
+ui_color_cookie();
+})
+
+</script>
+<template>
+  <UDashboardGroup>
+    <DashboardSidebar class="bg-(--sidebar-bg)" collapsible :resizable="undefined" :items="nav"/>
+
+    <UDashboardSidebarCollapse />
+
+    <UContainer class="max-w-full overflow-auto">
+      <DashboardHeader :title="title"/>
+      <UNavigationMenu :items="nav[0][2].children" />
+      <!-- in my case I want the button to be the same everywhere.
+      if you wanna customize it per page, place it per page inside UContainer -->
+      <!--<UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>-->
+      <slot />
+    </UContainer>
+  </UDashboardGroup>
+</template>>