@innertia-solutions/nuxt-theme-spark 0.1.25 → 0.1.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Admin/Base.vue +23 -29
- package/components/Layout/Admin.vue +43 -22
- package/package.json +1 -1
|
@@ -1,56 +1,50 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
|
|
3
|
-
const isOpen = computed(() => sidebar?.isOpen.value ?? false)
|
|
4
|
-
const close = () => sidebar?.close()
|
|
2
|
+
// No state needed — sidebar controlled by hs-overlay JS
|
|
5
3
|
</script>
|
|
6
4
|
|
|
7
5
|
<template>
|
|
8
|
-
<!-- Sidebar -->
|
|
9
6
|
<aside
|
|
7
|
+
id="hs-pro-sidebar"
|
|
8
|
+
class="hs-overlay [--auto-close:lg]
|
|
9
|
+
hs-overlay-open:translate-x-0
|
|
10
|
+
-translate-x-full transition-all duration-300 transform
|
|
11
|
+
w-65 h-full
|
|
12
|
+
hidden
|
|
13
|
+
fixed inset-y-0 inset-s-0 z-60
|
|
14
|
+
bg-sidebar border-e border-sidebar-line
|
|
15
|
+
lg:block lg:translate-x-0 lg:inset-e-auto lg:bottom-0"
|
|
10
16
|
tabindex="-1"
|
|
11
17
|
aria-label="Sidebar"
|
|
12
|
-
:class="[
|
|
13
|
-
'fixed inset-y-0 start-0 z-60 w-65 h-full',
|
|
14
|
-
'bg-sidebar border-e border-sidebar-line',
|
|
15
|
-
'transition-transform duration-300',
|
|
16
|
-
'lg:translate-x-0',
|
|
17
|
-
isOpen ? 'translate-x-0' : 'max-lg:-translate-x-full',
|
|
18
|
-
]"
|
|
19
18
|
>
|
|
20
|
-
<div class="flex flex-col h-full
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<header class="h-11.5 ps-2 pe-2 lg:ps-5 flex items-center gap-x-1 shrink-0">
|
|
19
|
+
<div class="relative flex flex-col h-full max-h-full pt-3">
|
|
20
|
+
<!-- Logo + close button (mobile) -->
|
|
21
|
+
<header class="h-11.5 ps-5 pe-2 lg:ps-8 flex items-center gap-x-1">
|
|
24
22
|
<slot name="logo" />
|
|
25
23
|
<div class="lg:hidden ms-auto">
|
|
26
|
-
<button
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
<button
|
|
25
|
+
type="button"
|
|
26
|
+
class="w-6 h-7 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus"
|
|
27
|
+
data-hs-overlay="#hs-pro-sidebar"
|
|
28
|
+
>
|
|
29
|
+
<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">
|
|
31
30
|
<polyline points="7 8 3 12 7 16" />
|
|
32
31
|
<line x1="21" x2="11" y1="12" y2="12" />
|
|
33
|
-
<line x1="21" x2="11" y1="6"
|
|
32
|
+
<line x1="21" x2="11" y1="6" y2="6" />
|
|
34
33
|
<line x1="21" x2="11" y1="18" y2="18" />
|
|
35
34
|
</svg>
|
|
36
35
|
</button>
|
|
37
36
|
</div>
|
|
38
37
|
</header>
|
|
39
38
|
|
|
40
|
-
<!--
|
|
41
|
-
<div class="
|
|
42
|
-
[&::-webkit-scrollbar]:w-2
|
|
43
|
-
[&::-webkit-scrollbar-thumb]:rounded-full
|
|
44
|
-
[&::-webkit-scrollbar-track]:bg-sidebar
|
|
45
|
-
[&::-webkit-scrollbar-thumb]:bg-sidebar-line">
|
|
39
|
+
<!-- Nav content - scrollable -->
|
|
40
|
+
<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">
|
|
46
41
|
<slot name="menu" />
|
|
47
42
|
</div>
|
|
48
43
|
|
|
49
44
|
<!-- User footer -->
|
|
50
|
-
<div class="
|
|
45
|
+
<div class="border-t border-sidebar-divider p-5">
|
|
51
46
|
<slot name="user-footer" />
|
|
52
47
|
</div>
|
|
53
|
-
|
|
54
48
|
</div>
|
|
55
49
|
</aside>
|
|
56
50
|
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
const isOpen = ref(false)
|
|
3
|
-
const open = () => { isOpen.value = true }
|
|
4
|
-
const close = () => { isOpen.value = false }
|
|
5
|
-
provide('spark:sidebar', { isOpen, open, close })
|
|
6
|
-
|
|
7
2
|
const showAnimation = ref(false)
|
|
8
3
|
onMounted(() => {
|
|
9
4
|
const seen = sessionStorage.getItem('auth-entered')
|
|
@@ -16,25 +11,51 @@ onMounted(() => {
|
|
|
16
11
|
|
|
17
12
|
<template>
|
|
18
13
|
<div :class="{ 'animate-entrance': showAnimation }">
|
|
19
|
-
<!--
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
14
|
+
<!-- Header - matches Preline exactly -->
|
|
15
|
+
<header class="lg:ms-65 fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 bg-navbar border-b border-navbar-line">
|
|
16
|
+
<div class="flex justify-between xl:grid xl:grid-cols-3 basis-full items-center w-full py-2.5 px-2 sm:px-5">
|
|
17
|
+
|
|
18
|
+
<!-- Left col: mobile toggle + desktop search -->
|
|
19
|
+
<div class="xl:col-span-1 flex items-center md:gap-x-3">
|
|
20
|
+
<!-- Mobile sidebar toggle -->
|
|
21
|
+
<div class="lg:hidden">
|
|
22
|
+
<button
|
|
23
|
+
type="button"
|
|
24
|
+
class="w-7 h-9.5 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus"
|
|
25
|
+
aria-haspopup="dialog"
|
|
26
|
+
aria-expanded="false"
|
|
27
|
+
aria-controls="hs-pro-sidebar"
|
|
28
|
+
aria-label="Toggle navigation"
|
|
29
|
+
data-hs-overlay="#hs-pro-sidebar"
|
|
30
|
+
>
|
|
31
|
+
<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">
|
|
32
|
+
<path d="M17 8L21 12L17 16M3 12H13M3 6H13M3 18H13" />
|
|
33
|
+
</svg>
|
|
34
|
+
</button>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<!-- Desktop search -->
|
|
38
|
+
<div class="hidden lg:block min-w-80 xl:w-full">
|
|
39
|
+
<slot name="header-left" />
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- Right col: actions -->
|
|
44
|
+
<div class="xl:col-span-2 flex justify-end items-center gap-x-2">
|
|
45
|
+
<div class="flex items-center">
|
|
46
|
+
<!-- Mobile search icon -->
|
|
47
|
+
<div class="lg:hidden">
|
|
48
|
+
<slot name="header-search-mobile" />
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<slot name="header-right" />
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
</div>
|
|
36
56
|
</header>
|
|
37
57
|
|
|
58
|
+
<!-- Sidebar + main content -->
|
|
38
59
|
<AdminBase>
|
|
39
60
|
<template #logo><slot name="logo" /></template>
|
|
40
61
|
<template #menu><slot name="menu" /></template>
|