UHeader added

app/layouts/dashboard.vue

@@ -5,7 +5,6 @@ const nav : NavigationMenuItem[][] = [[
   {
   label: 'Home',
   icon: 'i-lucide-house',
-  active: true,
   to: "/dashboard"
 }, {
   label: 'Inbox',
@@ -16,7 +15,11 @@ const nav : NavigationMenuItem[][] = [[
   label: 'Contacts',
   icon: 'i-lucide-users',
   to: "/contacts"
-}]];
+}, {
+  label: 'Settings',
+  icon: 'i-lucide-settings',
+  to: '/settings'
+  }]];
 /*[
   {
     label: "Feedback"
@@ -28,6 +31,11 @@ const nav : NavigationMenuItem[][] = [[
     <DashboardSidebar collapsible resizable :items="nav"/>
     <UDashboardSidebarCollapse />
 
-    <slot />
+    <UContainer class="overflow-auto">
+      <!-- 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>

app/layouts/default.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <!-- the whole content must be in a UContainer -->
+  <!-- overflow auto allows scroll -->
+  <UContainer class="overflow-auto">
+    <slot />
+  </UContainer>
+</template>
+
+<style scoped>
+
+</style>

app/pages/dashboard.vue

@@ -122,15 +122,16 @@ import { h } from 'vue'
 </script>
 
 <template>
-  <!-- overflow-auto necessary for scroll-->
+    <UHeader title="Dashboard" toggle-side="left" >
-  <UContainer class="overflow-auto">
+      <template #toggle>
-    
+        <UDashboardSidebarToggle />
-    <UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>
+        <UDashboardSidebarToggle />
-
+      </template>
-    <div class="mt-1 mb-3 flex flex-col w-full relative z-0">
+    </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>
-      <UBadge variant="subtle" class="inline mx-auto">It's cool, isn't it ?</UBadge> 
+      <UBadge variant="subtle" color="success" class="inline mx-auto">It's cool, isn't it ?</UBadge>
     </div>
     
     <!--<div class="mx-auto max-w-220">-->
@@ -152,7 +153,6 @@ import { h } from 'vue'
     <UFooter>
       <p>footer</p>
     </UFooter>
-  </UContainer>
 </template>
 
 <style scoped>

app/pages/login.vue

@@ -67,7 +67,6 @@ async function sendLogin() {
 </script>
 
 <template>
-  <UContainer class="overflow-auto">
     <div class="flex flex-col items-center justify-center gap-4 p-4">
       <UPageCard class="w-full max-w-md">
         <UAuthForm
@@ -81,7 +80,6 @@ async function sendLogin() {
         />
       </UPageCard>
     </div>
-  </UContainer>
 </template>
 
 <style scoped>

app/pages/settings.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  definePageMeta({
+    layout: "dashboard"
+  })
+  const settings_submenu = ref([
+    {
+      label: "Profile",
+      icon: "i-lucide-user-round",
+      to: "/settings/profile"
+    },
+    {
+      label: "Security",
+      icon: "i-lucide-lock",
+      to: "/settings/security"
+    },
+    {
+      label: "Aspect",
+      icon: "i-lucide-palette",
+      to: "/settings/ui"
+    }
+  ])
+</script>
+
+<template>
+  <UHeader toggle-side="left" class="justify-center text-center" title="Settings">
+    <template #toggle>
+      <UDashboardSidebarToggle />
+      <!-- <UDashboardSidebarCollapse /> -->
+    </template>
+  </UHeader>
+  <UNavigationMenu :items="settings_submenu" />
+
+
+</template>
+
+<style scoped>
+
+</style>