use header component

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>