nitro-web 0.0.35 → 0.0.36
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.
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
// Component: https://tailwindui.com/components/application-ui/application-shells/sidebar#component-a69d85b6237ea2ad506c00ef1cd39a38
|
|
2
|
-
import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react'
|
|
3
2
|
import avatarImg from 'nitro-web/client/imgs/avatar.jpg'
|
|
4
3
|
import { injectedConfig } from 'nitro-web'
|
|
5
4
|
import {
|
|
6
|
-
Bars3Icon,
|
|
7
5
|
HomeIcon,
|
|
8
6
|
UsersIcon,
|
|
9
|
-
XMarkIcon,
|
|
10
7
|
ArrowLeftCircleIcon,
|
|
11
8
|
PaintBrushIcon,
|
|
12
9
|
} from '@heroicons/react/24/outline'
|
|
13
10
|
|
|
14
|
-
const sidebarWidth = 'lg:w-80'
|
|
11
|
+
const sidebarWidth = 'w-[19rem] lg:w-80'
|
|
15
12
|
|
|
16
13
|
export type SidebarProps = {
|
|
17
14
|
Logo?: React.FC<{ width?: string, height?: string }>;
|
|
@@ -27,47 +24,10 @@ export function Sidebar({ Logo, menu, links }: SidebarProps) {
|
|
|
27
24
|
const [sidebarOpen, setSidebarOpen] = useState(false)
|
|
28
25
|
return (
|
|
29
26
|
<>
|
|
30
|
-
{/* mobile sidebar opened */}
|
|
31
|
-
<Dialog open={sidebarOpen} onClose={setSidebarOpen} className="relative z-50 lg:hidden nitro-sidebar">
|
|
32
|
-
<DialogBackdrop
|
|
33
|
-
transition
|
|
34
|
-
className="fixed inset-0 bg-gray-900/80 transition-opacity duration-300 ease-linear data-[closed]:opacity-0"
|
|
35
|
-
/>
|
|
36
|
-
<div className="fixed inset-0 flex">
|
|
37
|
-
<DialogPanel
|
|
38
|
-
transition
|
|
39
|
-
className="relative mr-16 flex w-full max-w-xs flex-1 transform transition duration-300 ease-in-out
|
|
40
|
-
data-[closed]:-translate-x-full"
|
|
41
|
-
>
|
|
42
|
-
<TransitionChild>
|
|
43
|
-
<div className="absolute left-full top-0 flex w-16 justify-center pt-5 duration-300 ease-in-out data-[closed]:opacity-0">
|
|
44
|
-
<button type="button" onClick={() => setSidebarOpen(false)} className="-m-2.5 p-2.5">
|
|
45
|
-
<XMarkIcon aria-hidden="true" className="size-6 text-white" />
|
|
46
|
-
</button>
|
|
47
|
-
</div>
|
|
48
|
-
</TransitionChild>
|
|
49
|
-
<SidebarContents Logo={Logo} menu={menu} links={links} />
|
|
50
|
-
</DialogPanel>
|
|
51
|
-
</div>
|
|
52
|
-
</Dialog>
|
|
53
|
-
|
|
54
27
|
{/* Static sidebar for desktop */}
|
|
55
|
-
<div className={`
|
|
28
|
+
<div className={`relative inset-y-0 z-50 flex flex-col ${sidebarWidth}`}>
|
|
56
29
|
<SidebarContents Logo={Logo} menu={menu} links={links} />
|
|
57
30
|
</div>
|
|
58
|
-
|
|
59
|
-
{/* mobile sidebar closed */}
|
|
60
|
-
<div className="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden">
|
|
61
|
-
<button type="button" onClick={() => setSidebarOpen(true)} className="-m-2.5 p-2.5 text-gray-700 lg:hidden">
|
|
62
|
-
<Bars3Icon aria-hidden="true" className="size-6" />
|
|
63
|
-
</button>
|
|
64
|
-
<div className="flex-1 text-sm/6 font-semibold text-gray-900">Dashboard</div>
|
|
65
|
-
<Link to="#">
|
|
66
|
-
<img alt="" src={avatarImg} className="size-8 rounded-full bg-gray-50" />
|
|
67
|
-
</Link>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<div class={`${sidebarWidth}`} />
|
|
71
31
|
</>
|
|
72
32
|
)
|
|
73
33
|
}
|
|
@@ -96,13 +56,13 @@ function SidebarContents ({ Logo, menu, links }: SidebarProps) {
|
|
|
96
56
|
|
|
97
57
|
// Sidebar component, swap this element with another sidebar if you like
|
|
98
58
|
return (
|
|
99
|
-
<div className="flex grow flex-col gap-y-8 overflow-y-auto
|
|
59
|
+
<div className="flex grow flex-col gap-y-8 overflow-y-auto py-5 px-10 border-r bg-primary border-gray-200 text-white">
|
|
100
60
|
{Logo && (
|
|
101
61
|
<div className="flex h-16 shrink-0 items-center gap-2 justify-bedtween">
|
|
102
62
|
<Link to="/">
|
|
103
63
|
<Logo width="70" height={undefined} />
|
|
104
64
|
</Link>
|
|
105
|
-
<span className="text-[9px] text-gray-
|
|
65
|
+
<span className="text-[9px] text-gray-200 font-semibold mt-4">{injectedConfig.version}</span>
|
|
106
66
|
</div>
|
|
107
67
|
)}
|
|
108
68
|
<nav className="flex flex-1 flex-col">
|
|
@@ -165,7 +125,7 @@ function SidebarContents ({ Logo, menu, links }: SidebarProps) {
|
|
|
165
125
|
</ul>
|
|
166
126
|
</li>
|
|
167
127
|
|
|
168
|
-
<li className="-mx-6 mt-auto
|
|
128
|
+
<li className="-mx-6 mt-auto block">
|
|
169
129
|
<Link
|
|
170
130
|
to="#"
|
|
171
131
|
className="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nitro-web",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.36",
|
|
4
4
|
"repository": "github:boycce/nitro-web",
|
|
5
5
|
"homepage": "https://boycce.github.io/nitro-web/",
|
|
6
6
|
"description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
|
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
},
|
|
67
67
|
"bumpFiles": [
|
|
68
68
|
"package.json",
|
|
69
|
+
"package-lock.json",
|
|
69
70
|
"../webpack/package.json",
|
|
70
71
|
{
|
|
71
72
|
"filename": "../readme.md",
|