-
Notifications
You must be signed in to change notification settings - Fork 1
/
sidebar.tsx
213 lines (206 loc) · 9.3 KB
/
sidebar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
/* This example requires Tailwind CSS v2.0+ */
import { Dialog, Transition } from '@headlessui/react';
import { Icon } from '@sharingan/ui';
import Image from 'next/image';
import { Fragment, useState } from 'react';
const navigation = [
{ current: true, href: '#', icon: Icon.Home, name: 'Dashboard' },
{ current: false, href: '#', icon: Icon.Users, name: 'Team' },
{ current: false, href: '#', icon: Icon.Folder, name: 'Projects' },
{ current: false, href: '#', icon: Icon.Calendar, name: 'Calendar' },
{ current: false, href: '#', icon: Icon.Inbox, name: 'Documents' },
{ current: false, href: '#', icon: Icon.ChartBart, name: 'Reports' },
];
function classNames(...classes: string[]) {
return classes.filter(Boolean).join(' ');
}
export default function Example() {
const [sidebarOpen, setSidebarOpen] = useState(false);
return (
<>
{/*
This example requires updating your template:
```
<html class="h-full bg-gray-100">
<body class="h-full">
```
*/}
<div>
<Transition.Root show={sidebarOpen} as={Fragment}>
<Dialog as="div" className="relative z-40 md:hidden" onClose={setSidebarOpen}>
<Transition.Child
as={Fragment}
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
</Transition.Child>
<div className="fixed inset-0 flex z-40">
<Transition.Child
as={Fragment}
enter="transition ease-in-out duration-300 transform"
enterFrom="-translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<Dialog.Panel className="relative flex-1 flex flex-col max-w-xs w-full bg-gray-800">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="absolute top-0 right-0 -mr-12 pt-2">
<button
type="button"
className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
onClick={() => setSidebarOpen(false)}
>
<span className="sr-only">Close sidebar</span>
<Icon.X className="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</Transition.Child>
<div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
<div className="flex-shrink-0 flex items-center px-4">
<Icon.LogoWhite />
</div>
<nav className="mt-5 px-2 space-y-1">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current
? 'bg-gray-900 text-white'
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
'group flex items-center px-2 py-2 text-base font-medium rounded-md',
)}
>
<item.icon
className={classNames(
item.current ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300',
'mr-4 flex-shrink-0 h-6 w-6',
)}
aria-hidden="true"
/>
{item.name}
</a>
))}
</nav>
</div>
<div className="flex-shrink-0 flex bg-gray-700 p-4">
<button className="flex-shrink-0 group block">
<div className="flex items-center">
<div>
<Image
className="inline-block h-10 w-10 rounded-full"
width={36}
height={36}
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div className="ml-3">
<p className="text-base font-medium text-white">Tom Cook</p>
<p className="text-sm font-medium text-gray-400 group-hover:text-gray-300">View profile</p>
</div>
</div>
</button>
</div>
</Dialog.Panel>
</Transition.Child>
<div className="flex-shrink-0 w-14">{/* Force sidebar to shrink to fit close icon */}</div>
</div>
</Dialog>
</Transition.Root>
{/* Static sidebar for desktop */}
<div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex-1 flex flex-col min-h-0 bg-gray-800">
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div className="flex items-center flex-shrink-0 px-4">
<Icon.LogoWhite />
</div>
<nav className="mt-5 flex-1 px-2 space-y-1">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
'group flex items-center px-2 py-2 text-sm font-medium rounded-md',
)}
>
<item.icon
className={classNames(
item.current ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300',
'mr-3 flex-shrink-0 h-6 w-6',
)}
aria-hidden="true"
/>
{item.name}
</a>
))}
</nav>
</div>
<div className="flex-shrink-0 flex bg-gray-700 p-4">
<button className="flex-shrink-0 w-full group block">
<div className="flex items-center">
<div>
<Image
className="inline-block h-9 w-9 rounded-full"
width={36}
height={36}
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-white">Tom Cook</p>
<p className="text-xs font-medium text-gray-300 group-hover:text-gray-200">View profile</p>
</div>
</div>
</button>
</div>
</div>
</div>
<div className="md:pl-64 flex flex-col flex-1">
<div className="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-gray-100">
<button
type="button"
className="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
onClick={() => setSidebarOpen(true)}
>
<span className="sr-only">Open sidebar</span>
<Icon.Menu className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<main className="flex-1">
<div className="py-6">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-2xl font-semibold text-gray-900">Dashboard</h1>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
{/* Replace with your content */}
<div className="py-4">
<div className="border-4 border-dashed border-gray-200 rounded-lg h-96" />
</div>
{/* /End replace */}
</div>
</div>
</main>
</div>
</div>
</>
);
}