use header component

app/pages/dashboard.vue

@@ -122,11 +122,8 @@ import { h } from 'vue'
 </script>
 
 <template>
-    <UHeader title="Dashboard" toggle-side="left" >
-      <template #toggle>
-        <UDashboardSidebarToggle />
-      </template>
-    </UHeader>
+  <DashboardHeader title="Dashboard"/>
+
     <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">
-    <template #toggle>
-      <UDashboardSidebarToggle />
-      <!-- <UDashboardSidebarCollapse /> -->
-    </template>
-  </UHeader>
+  <DashboardHeader title="Settings" />
+  
   <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>