@innertia-solutions/nuxt-theme-spark 0.1.41 → 0.1.43

package/components/Admin/Base.vue

@@ -1,24 +1,27 @@
 <script setup lang="ts">
-// No state needed — sidebar controlled by hs-overlay JS
+const props = defineProps({
+  floating: { type: Boolean, default: false },
+})
 </script>
 
 <template>
   <aside
     id="hs-pro-sidebar"
-    class="hs-overlay [--auto-close:lg]
-      hs-overlay-open:translate-x-0
-      -translate-x-full transition-all duration-300 transform
-      w-65 h-full
-      hidden
-      fixed inset-y-0 inset-s-0 z-60
-      bg-sidebar border-e border-sidebar-line
-      lg:block lg:translate-x-0 lg:inset-e-auto lg:bottom-0"
+    :class="[
+      'hs-overlay [--auto-close:lg]',
+      'hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform',
+      'w-65 hidden fixed z-60',
+      'lg:block lg:translate-x-0 lg:inset-e-auto',
+      floating
+        ? 'inset-y-3 start-3 rounded-2xl shadow-sm border border-sidebar-line bg-sidebar'
+        : 'inset-y-0 inset-s-0 h-full border-e border-sidebar-line bg-sidebar lg:bottom-0',
+    ]"
     tabindex="-1"
     aria-label="Sidebar"
   >
     <div class="relative flex flex-col h-full max-h-full pt-3">
       <!-- Logo + close button (mobile) -->
-      <header class="h-11.5 ps-5 pe-2 lg:ps-8 flex items-center gap-x-1">
+      <header class="h-11.5 ps-2 pe-2 lg:ps-5 flex items-center gap-x-1 shrink-0">
         <slot name="logo" />
         <div class="lg:hidden ms-auto">
           <button
@@ -36,13 +39,18 @@
         </div>
       </header>
 
+      <!-- Search slot -->
+      <div v-if="$slots.search" class="px-4 py-2 shrink-0">
+        <slot name="search" />
+      </div>
+
       <!-- Nav content - scrollable -->
-      <div class="mt-1.5 h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
+      <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-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
         <slot name="menu" />
       </div>
 
       <!-- User footer -->
-      <div class="border-t border-sidebar-divider p-5">
+      <div v-if="$slots['user-footer']" class="shrink-0">
         <slot name="user-footer" />
       </div>
     </div>

package/components/App/PageLoadingSpinner.vue

@@ -57,7 +57,7 @@ onBeforeUnmount(() => {
 <style scoped>
 .page-loading-spinner {
   position: fixed;
-  top: 0.625rem;
+  bottom: 0.625rem;
   right: 0.5rem;
   z-index: 2147483647;
   display: flex;

package/components/Layout/Admin.vue

@@ -1,4 +1,8 @@
 <script setup>
+const props = defineProps({
+  floating: { type: Boolean, default: false },
+})
+
 const showAnimation = ref(false)
 onMounted(() => {
   const seen = sessionStorage.getItem('auth-entered')
@@ -56,12 +60,12 @@ onMounted(() => {
     </header>
 
     <!-- Sidebar + main content -->
-    <AdminBase>
+    <AdminBase :floating="floating">
       <template #logo><slot name="logo" /></template>
       <template #menu><slot name="menu" /></template>
       <template #user-footer><slot name="user-footer" /></template>
 
-      <div class="lg:ps-65 pt-14">
+      <div :class="floating ? 'lg:ps-70 pt-14' : 'lg:ps-65 pt-14'">
         <slot />
       </div>
     </AdminBase>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",