@unicitylabs/sphere-ui 0.1.3 → 0.1.5
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/dist/index.js +25 -5
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/components/DashboardLayout.tsx
|
|
2
2
|
import { useState } from "react";
|
|
3
|
-
import { Menu } from "lucide-react";
|
|
3
|
+
import { Menu, X } from "lucide-react";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
function DashboardLayout({ logo, nav, footer, children }) {
|
|
6
6
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
@@ -8,16 +8,16 @@ function DashboardLayout({ logo, nav, footer, children }) {
|
|
|
8
8
|
mobileOpen && /* @__PURE__ */ jsx(
|
|
9
9
|
"div",
|
|
10
10
|
{
|
|
11
|
-
className: "lg:hidden fixed inset-0 bg-black/
|
|
11
|
+
className: "lg:hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-40",
|
|
12
12
|
onClick: () => setMobileOpen(false)
|
|
13
13
|
}
|
|
14
14
|
),
|
|
15
15
|
/* @__PURE__ */ jsxs(
|
|
16
16
|
"aside",
|
|
17
17
|
{
|
|
18
|
-
className: `fixed lg:static inset-y-0 left-0 z-50 w-56 shrink-0 flex flex-col transition-transform lg:translate-x-0 ${mobileOpen ? "translate-x-0" : "-translate-x-full"}`,
|
|
18
|
+
className: `fixed lg:static inset-y-0 left-0 z-50 w-56 shrink-0 flex flex-col transition-transform duration-300 ease-out lg:translate-x-0 ${mobileOpen ? "translate-x-0" : "-translate-x-full"}`,
|
|
19
19
|
style: {
|
|
20
|
-
background: "
|
|
20
|
+
background: "var(--bg-root)",
|
|
21
21
|
borderRight: "1px solid var(--border)"
|
|
22
22
|
},
|
|
23
23
|
children: [
|
|
@@ -28,7 +28,27 @@ function DashboardLayout({ logo, nav, footer, children }) {
|
|
|
28
28
|
style: { background: "linear-gradient(90deg, transparent, var(--accent), transparent)" }
|
|
29
29
|
}
|
|
30
30
|
),
|
|
31
|
-
/* @__PURE__ */ jsx(
|
|
31
|
+
/* @__PURE__ */ jsx(
|
|
32
|
+
"div",
|
|
33
|
+
{
|
|
34
|
+
className: "absolute inset-0 pointer-events-none",
|
|
35
|
+
style: { background: "linear-gradient(180deg, rgba(255,111,0,0.03) 0%, transparent 40%)" }
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
/* @__PURE__ */ jsxs("div", { className: "px-5 py-5 relative", style: { borderBottom: "1px solid var(--border)" }, children: [
|
|
39
|
+
/* @__PURE__ */ jsx(
|
|
40
|
+
"button",
|
|
41
|
+
{
|
|
42
|
+
className: "lg:hidden absolute top-4 right-4 p-1 rounded-md transition-colors",
|
|
43
|
+
style: { color: "var(--text-muted)" },
|
|
44
|
+
onClick: () => setMobileOpen(false),
|
|
45
|
+
onMouseEnter: (e) => e.currentTarget.style.color = "var(--text-primary)",
|
|
46
|
+
onMouseLeave: (e) => e.currentTarget.style.color = "var(--text-muted)",
|
|
47
|
+
children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
|
|
48
|
+
}
|
|
49
|
+
),
|
|
50
|
+
logo
|
|
51
|
+
] }),
|
|
32
52
|
/* @__PURE__ */ jsx("nav", { className: "flex-1 px-3 py-3 flex flex-col overflow-y-auto", children: nav }),
|
|
33
53
|
footer && /* @__PURE__ */ jsx("div", { className: "px-3 py-4", style: { borderTop: "1px solid var(--border)" }, children: footer })
|
|
34
54
|
]
|