new dynamic title

.dockerignore

@@ -0,0 +1,5 @@
+.idea
+.git
+.nuxt
+.output
+node_modules

Dockerfile

@@ -1,25 +1,29 @@
-# This dockerfile is to turn .output into a docker image
+# Build Stage 1
-# You still need to install the project on your machine and build it.
-# Only then you run this docker file
 
-# This project by default uses pnpm.
+FROM node:22-alpine AS build
-# If you wish to use npm, delete "pnpm-lock.yaml" first.
+WORKDIR /app
 
-# 1. pnpm (or npm) i # If you get GNU problems, use pnpm (or npm) i --force
+RUN corepack enable
-# 2. pnpm (or npm) run build # Sit back while it compiles
-# 3. sudo docker build . -t myapp:latest (replace 'myapp' to whatever tag you wanna give your image)
 
-# You should have the image now !
+# Copy package.json and your lockfile, here we add pnpm-lock.yaml for illustration
-# Now you just need to create the container
+COPY package.json pnpm-lock.yaml ./
 
-# Here is an example command for creating a container
+# Install dependencies
-# sudo docker run -d --name myappcontainer --network host -e PORT=3000 myapp:latest
+RUN pnpm i
+
+# Copy the entire project
+COPY . ./
+
+# Build the project
+RUN pnpm run build
+
+# Build Stage 2
 
 FROM node:22-alpine
 WORKDIR /app
 
-# Copy the build's result
+# Only `.output` folder is needed from the build stage
-COPY .output/ .
+COPY --from=build /app/.output/ ./
 
 # Change the port and host
 ENV PORT=3000
@@ -27,4 +31,4 @@ ENV HOST=0.0.0.0
 
 EXPOSE 3000
 
-CMD ["node", "/app/server/index.mjs"]
+CMD ["node", "/app/server/index.mjs"]

Dockerfile.output.bak

@@ -0,0 +1,30 @@
+# This dockerfile is to turn .output into a docker image
+# You still need to install the project on your machine and build it.
+# Only then you run this docker file
+
+# This project by default uses pnpm.
+# If you wish to use npm, delete "pnpm-lock.yaml" first.
+
+# 1. pnpm (or npm) i # If you get GNU problems, use pnpm (or npm) i --force
+# 2. pnpm (or npm) run build # Sit back while it compiles
+# 3. sudo docker build . -t myapp:latest (replace 'myapp' to whatever tag you wanna give your image)
+
+# You should have the image now !
+# Now you just need to create the container
+
+# Here is an example command for creating a container
+# sudo docker run -d --name myappcontainer --network host -e PORT=3000 myapp:latest
+
+FROM node:22-alpine
+WORKDIR /app
+
+# Copy the build's result
+COPY .output/ .
+
+# Change the port and host
+ENV PORT=3000
+ENV HOST=0.0.0.0
+
+EXPOSE 3000
+
+CMD ["node", "/app/server/index.mjs"]

app/assets/css/global.css

@@ -3,17 +3,30 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+
 :root {
-  --font-sans: 'Public Sans', sans-serif;
+    --font-sans: 'Space Grotesk', sans-serif;
-  --ui-bg: rgb(220,220,220);
+  /*--font-sans: 'Public Sans', sans-serif; */
 }
+
+.light {
+    --ui-bg: var(--color-stone-100);
+    --ui-primary: var(--color-stone-100);
+    --sidebar-bg:  oklch(85%  0.001 106.424);
+}
+
 .dark {
   /*--ui-bg: var(--ui-color-neutral-950);*/
-  --ui-bg: rgb(17,17,17);
+  --ui-bg: oklch(16.7% 0.004 49.25);
-  --ui-bg-accented: rgba(189, 23, 255, 0.3);
+    --ui-primary: var(--color-neutral-900);
-  --ui-bg-elevated: rgba(189, 23, 255, 0.2);
+    --sidebar-bg: oklch(18.7% 0.004 49.25);
+}
 
-  --ui-primary: rgb(189, 23, 255);
+.sidebar-light {
+    --ui-bg: var(--color-stone-300);
+}
+.sidebar-dark {
+    background-color: var(--color-stone-800);
 }
 
 .dark-widget-bg {

app/assets/css/ui_colors.css

@@ -0,0 +1,37 @@
+
+.ui-red {
+    --ui-primary: var(--color-red-500);
+    --ui-bg-elevated:  oklch(63.7% 0.237 25.331 / 20%);
+    --ui-bg-accented:  oklch(63.7% 0.237 25.331 / 40%);
+}
+
+.ui-blue {
+    --ui-primary: var(--color-blue-600);
+    --ui-bg-elevated: oklch(54.6% 0.245 262.881 / 20%);
+    --ui-bg-accented: oklch(54.6% 0.245 262.881 / 40%);
+}
+.ui-green {
+    --ui-primary: var(--color-green-500);
+    --ui-bg-elevated: oklch(72.3% 0.219 149.579 / 20%);
+    --ui-bg-accented: oklch(72.3% 0.219 149.579 / 40%);
+}
+.ui-violet {
+    --ui-primary: var(--color-violet-500);
+    --ui-bg-elevated: oklch(60.6% 0.25 292.717 / 20%);
+    --ui-bg-accented: oklch(60.6% 0.25 292.717 / 40%);
+}
+
+.ui-indigo {
+    --ui-primary: var(--color-indigo-500);
+    --ui-bg-elevated: oklch(58.5% 0.233 277.117 / 20%);
+    --ui-bg-accented:  oklch(58.5% 0.233 277.117 / 40%);
+}
+
+.ui-orange {
+    --ui-primary: var(--color-orange-600);
+}
+.ui-cyan {
+    --ui-primary: var(--color-cyan-500);
+    --ui-bg-elevated: oklch(71.5% 0.143 215.221 / 20%);
+    --ui-bg-accented: oklch(71.5% 0.143 215.221 / 40%);
+}

app/assets/css/ui_fonts.css

@@ -0,0 +1,12 @@
+.font-pubsans {
+    --font-sans: "Public Sans", sans-serif;
+}
+.font-geist {
+    --font-sans: "Geist One", sans-serif;
+}
+.font-nunito {
+    --font-sans: "Nunito", sans-serif;
+}
+.font-grot {
+    --font-sans: "Space Grotesk", sans-serif;
+}

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" :to="undefined">
+        <template #toggle>
+            <!---<UDashboardSidebarCollapse />-->
+            <UDashboardSidebarToggle />
+        </template>
+    </UHeader>
+</template>
+
+<style scoped>
+
+</style>

app/components/dashboard/settings/nav_header.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+  const items = [
+      {
+
+      }
+  ]
+</script>
+
+<template>
+  <
+</template>

app/components/dashboard/sidebar.vue

@@ -10,7 +10,7 @@ const items_def: NavigationMenuItem[][] = [
   active: true
 }, {
   label: 'Inbox',
-  icon: 'i-lucide-inbox',
+  icon: 'solar:chat-round-unread-outline',
   badge: '4'
 }, {
   label: 'Contacts',

app/composables/ui_cookies.ts

@@ -0,0 +1,22 @@
+import type {CookieRef} from "#app";
+
+function ui_cookie(name:string, def:string,prefix:string): CookieRef<string> {
+
+    const c = useCookie(name,{
+        default: () => def,
+
+    });
+    watch(c, (newVal, oldVal) => {
+        // remove old class (if it's been put)
+        if (oldVal != undefined) document.body.classList.remove(prefix + oldVal.toLowerCase());
+
+        // add new class
+        document.body.classList.add(prefix + newVal.toLowerCase());
+    }, { immediate: true})
+
+    return c;
+
+}
+
+export function ui_color_cookie() { return ui_cookie("ui_color","Green","ui-"); }
+export function ui_font_cookie() { return ui_cookie("ui_font","pubsans","font-"); }

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>>

app/layouts/dashboard.vue

@@ -8,26 +8,56 @@ const nav : NavigationMenuItem[][] = [[
   to: "/dashboard"
 }, {
   label: 'Notifications',
-  icon: 'i-lucide-inbox',
+  icon: 'solar:chat-round-unread-outline',
   badge: '4',
   to: "/events"
 }, {
   label: 'Settings',
   icon: 'i-lucide-settings',
-  to: '/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"
+    },
+  ],
+  }]
+];
 /*[
   {
     label: "Feedback"
   }
 ]];*/
+
+// set color
+/*useHead({
+  bodyAttrs: {
+    class: "ui-blue"
+  }
+})*/
+onMounted(() => {
+  ui_color_cookie();
+})
+
 </script>
 <template>
   <UDashboardGroup>
-    <DashboardSidebar collapsible resizable :items="nav"/>
+    <DashboardSidebar class="bg-(--sidebar-bg)" collapsible :resizable="undefined" :items="nav"/>
+    
     <UDashboardSidebarCollapse />
 
-    <UContainer class="overflow-auto">
+    <UContainer class="max-w-full 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"/>-->

app/layouts/default.vue

@@ -5,9 +5,9 @@
 <template>
   <!-- the whole content must be in a UContainer -->
   <!-- overflow auto allows scroll -->
-  <UContainer class="overflow-auto">
+  <!--<UContainer class="overflow-auto">-->
     <slot />
-  </UContainer>
+  <!--</UContainer>-->
 </template>
 
 <style scoped>

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>
+  <UContainer class="max-w-full">
-        <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>
@@ -147,8 +144,7 @@ import { h } from 'vue'
 
 
     <UTable :data="table_demo" :columns="table_headers" class="flex-1 "/>
-
+  </UContainer>
-
     <UFooter>
       <p>footer</p>
     </UFooter>

app/pages/events.vue

@@ -5,6 +5,11 @@
 </script>
 
 <template>
+  <UHeader title="Notifications & Events" toggle-side="left">
+    <template #toggle>
+      <UDashboardSidebarToggle />
+    </template>
+  </UHeader>
 
 </template>
 

app/pages/settings/index.vue

@@ -1,34 +1,11 @@
-<script setup lang="ts">
+ <script setup lang="ts">
   definePageMeta({
-    layout: "dashboard"
+    layout: "dash-settings",
+    title: "Settings"
   })
-  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>

app/pages/settings/profile.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 definePageMeta({
-  layout: "dashboard"
+  layout: "dash-settings"
 })
 </script>
 
 <template>
-
 </template>
 
 <style scoped>

app/pages/settings/security.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 definePageMeta({
-  layout: "dashboard"
+  layout: "dash-settings"
 })
 </script>
 
 <template>
 
+  
 </template>
 
 <style scoped>

app/pages/settings/theme.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type {CookieRef} from "#app";
+
+definePageMeta({
+  layout: "dash-settings",
+  title: "Customization"
+})
+
+const colors_list = ref(["Cyan","Red","Green","Blue","Purple"])
+const color = ref("...");
+
+const fonts_list = ref(["Public Sans","Space Grotesk", "Geist"])
+const font = ref("...");
+
+const ready = ref(false);
+
+onMounted(() => {
+  color.value = ui_color_cookie().value
+  ready.value = true
+})
+
+watch(color, (newVal, oldVal) => {
+  ui_color_cookie().value = newVal;
+})
+
+
+</script>
+
+<template>
+
+    <UContainer class="mt-4 max-w-full justify-center">
+        <UFormField
+            label="Main Color"
+            orientation="horizontal"
+            description="Select the main color of the UI"
+            size="lg"
+            class="flex justify-between w-full mt-3 mb-3"
+            :disabled="!ready"
+        >
+          <USelect v-model="color" :items="colors_list" />
+        </UFormField>
+        <UFormField
+          label="Mode"
+          orientation="horizontal"
+          description="Select if you want Light or Dark mode"
+          size="lg"
+          class="flex justify-between w-full mt-3 mb-3"
+        >
+          <UColorModeSelect />
+        </UFormField>
+        <UFormField
+          label="Font"
+          orientation="horizontal"
+          description="Select which font you want"
+          size="lg"
+          class="flex justify-between w-full mt-3 mb-3"
+          :disabled="!ready"
+      >
+        <USelect v-model="font" :items="fonts_list" />
+      </UFormField>
+    </UContainer>
+</template>
+

app/pages/settings/ui.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: "dashboard"
-})
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>

nuxt.config.ts

@@ -1,10 +1,11 @@
 import tailwindcss from "@tailwindcss/vite";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
+// @ts-ignore
 export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: {enabled: true},
-    css: ['./app/assets/css/global.css' ],
+    css: ['@/assets/css/global.css', '@/assets/css/ui_colors.css', /*'@/assets/css/ui_fonts.css' */],
     modules: [
       '@nuxt/image',
       '@nuxt/ui',
@@ -14,7 +15,7 @@ export default defineNuxtConfig({
     ],
     vite: {
         plugins: [
-            tailwindcss()
+            tailwindcss(),
         ],
     },
 })

package.json

@@ -18,7 +18,6 @@
     "@tailwindcss/vite": "^4.1.17",
     "@vueuse/core": "^10.0.0",
     "@vueuse/head": "github:vueuse/head",
-    "nuxt": "^4.2.1",
     "nuxt-auth-utils": "0.5.25",
     "nuxt-storm": "^1.1.3",
     "tailwindcss": "^4.1.17",
@@ -29,6 +28,7 @@
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.77",
-    "@nuxtjs/tailwindcss": "^6.14.0"
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "nuxt": "^4.2.2"
   }
 }