use header component

app/components/dashboard/header.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { literal, string } from 'zod';
+
+
+    const props = defineProps({
+        title: {
+            type: String,
+            required: false,
+            default: "Title"
+        }
+    })
+</script>
+
+<template>
+    <UHeader :title="props.title" toggle-side="left">
+        <template #toggle>
+            <!---<UDashboardSidebarCollapse />-->
+            <UDashboardSidebarToggle />
+        </template>
+    </UHeader>
+</template>
+
+<style scoped>
+
+</style>

app/layouts/dashboard.vue

@@ -25,6 +25,7 @@ const nav : NavigationMenuItem[][] = [[
 <template>
   <UDashboardGroup>
     <DashboardSidebar collapsible resizable :items="nav"/>
+    
     <UDashboardSidebarCollapse />
 
     <UContainer class="overflow-auto">

app/pages/dashboard.vue

@@ -122,11 +122,8 @@ import { h } from 'vue'
 </script>
 
 <template>
-    <UHeader title="Dashboard" toggle-side="left" >
+  <DashboardHeader title="Dashboard"/>
-      <template #toggle>
+
-        <UDashboardSidebarToggle />
-      </template>
-    </UHeader>
     <div class="mt-3 mb-3 flex flex-col w-full relative z-0">
       <ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
       <ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>

app/pages/settings/index.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+ <script setup lang="ts">
   definePageMeta({
     layout: "dashboard"
   })
@@ -22,12 +22,8 @@
 </script>
 
 <template>
-  <UHeader toggle-side="left" class="justify-center text-center" title="Settings">
+  <DashboardHeader title="Settings" />
-    <template #toggle>
+  
-      <UDashboardSidebarToggle />
-      <!-- <UDashboardSidebarCollapse /> -->
-    </template>
-  </UHeader>
   <UNavigationMenu :items="settings_submenu" />
 
 

app/pages/settings/profile.vue

@@ -5,7 +5,7 @@ definePageMeta({
 </script>
 
 <template>
-
+    <DashboardHeader title="Profile" />
 </template>
 
 <style scoped>

app/pages/settings/security.vue

@@ -5,7 +5,8 @@ definePageMeta({
 </script>
 
 <template>
-
+  <DashboardHeader title="Security" />
+  
 </template>
 
 <style scoped>

app/pages/settings/ui.vue

@@ -5,7 +5,7 @@ definePageMeta({
 </script>
 
 <template>
-
+    <DashboardHeader title="Customization" />
 </template>
 
 <style scoped>