@innertia-solutions/nuxt-theme-spark 0.1.21 → 0.1.23

package/components/Admin/Base.vue

@@ -7,7 +7,7 @@ provide('vantage:sidebar', { isOpen, open, close })
 </script>
 
 <template>
-  <div class="bg-slate-50 dark:bg-slate-900 min-h-screen">
+  <div class="bg-surface min-h-screen">
 
     <!-- Backdrop mobile -->
     <Transition enter-from-class="opacity-0" enter-active-class="transition-opacity duration-300"
@@ -21,7 +21,7 @@ provide('vantage:sidebar', { isOpen, open, close })
       aria-label="Sidebar"
       :class="[
         'fixed inset-y-0 start-0 z-60 w-65 h-full',
-        'bg-white dark:bg-slate-800 border-e border-slate-200 dark:border-slate-700',
+        'bg-sidebar border-e border-sidebar-line',
         'transition-transform duration-300',
         'lg:translate-x-0',
         isOpen ? 'translate-x-0' : 'max-lg:-translate-x-full',
@@ -34,7 +34,7 @@ provide('vantage:sidebar', { isOpen, open, close })
           <slot name="logo" />
           <div class="lg:hidden ms-auto">
             <button type="button"
-              class="w-6 h-7 inline-flex justify-center items-center rounded-md border border-slate-200 bg-white text-slate-500 hover:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
+              class="w-6 h-7 inline-flex justify-center items-center rounded-md border border-layer-line bg-layer text-muted-foreground-1 hover:bg-layer-hover"
               @click="close">
               <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -51,22 +51,42 @@ provide('vantage:sidebar', { isOpen, open, close })
         <div class="flex-1 min-h-0 mt-1.5 overflow-y-auto
           [&::-webkit-scrollbar]:w-2
           [&::-webkit-scrollbar-thumb]:rounded-full
-          [&::-webkit-scrollbar-track]:bg-slate-100
-          [&::-webkit-scrollbar-thumb]:bg-slate-300
-          dark:[&::-webkit-scrollbar-track]:bg-slate-700
-          dark:[&::-webkit-scrollbar-thumb]:bg-slate-500">
+          [&::-webkit-scrollbar-track]:bg-sidebar
+          [&::-webkit-scrollbar-thumb]:bg-sidebar-line">
           <slot name="menu" />
         </div>
 
         <!-- User footer -->
-        <div class="shrink-0 border-t border-slate-200 dark:border-slate-700 p-5">
+        <div class="shrink-0 border-t border-sidebar-line p-5">
           <slot name="user-footer" />
         </div>
 
       </div>
     </aside>
 
-    <!-- Main content -->
+    <!-- Top header -->
+    <header class="lg:ms-65 fixed top-0 inset-x-0 flex items-center z-40 bg-navbar border-b border-navbar-line h-14 px-4 sm:px-5 gap-x-3">
+      <!-- Mobile hamburger -->
+      <button type="button"
+        class="lg:hidden size-9 inline-flex justify-center items-center rounded-lg text-muted-foreground-1 hover:bg-muted-hover"
+        @click="open">
+        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </button>
+
+      <!-- Left area (search or title) -->
+      <div class="flex-1 flex items-center">
+        <slot name="header-left" />
+      </div>
+
+      <!-- Right actions -->
+      <div class="flex items-center gap-x-1">
+        <slot name="header-right" />
+      </div>
+    </header>
+
+    <!-- Main content (below fixed header) -->
     <slot />
 
   </div>

package/components/Layout/Admin.vue

@@ -15,10 +15,12 @@ onMounted(() => {
       <template #logo><slot name="logo" /></template>
       <template #menu><slot name="menu" /></template>
       <template #user-footer><slot name="user-footer" /></template>
+      <template #header-left><slot name="header-left" /></template>
+      <template #header-right><slot name="header-right" /></template>
 
-      <AdminPage>
+      <div class="lg:ps-65 pt-14">
         <slot />
-      </AdminPage>
+      </div>
     </AdminBase>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",
@@ -43,4 +43,4 @@
     "nuxt": "^4.4.2",
     "vue": "^3.5.0"
   }
-}
+}