-
Notifications
You must be signed in to change notification settings - Fork 1
/
header.tsx
165 lines (157 loc) · 7.09 KB
/
header.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
import { Disclosure, Menu, Transition } from '@sharingan/front';
import { Link } from '@sharingan/front/components/link';
import { UserAvatar } from '@sharingan/front/components/user-avatar';
import { LogoIcon, LogoLightIcon, MenuIcon, XIcon } from '@sharingan/front/icons';
import { useLogoutUser } from '@sharingan/front/services';
import { classNames } from '@sharingan/front/utils/classnames';
import { useRouter } from 'next/router';
import { Fragment } from 'react';
import { useAuth } from '@/hooks/authentication/use-auth';
const navigation = [
{ current: true, href: '/app/home', name: 'Home' },
{ current: false, href: '/app/browse', name: 'Browse' },
/*{ current: false, href: '#', name: 'Favorites' },
{ current: false, href: '#', name: 'Editor' },*/
];
const isActive = (appPath: string, linkPath: string) => {
return appPath.startsWith(linkPath);
};
const Header = () => {
const [logoutUserMutation] = useLogoutUser();
const { deleteToken, redirectToHome, user } = useAuth();
const { pathname } = useRouter();
const logout = async () => {
await logoutUserMutation({
onCompleted: async () => {
await deleteToken();
await redirectToHome();
},
});
};
return (
<Disclosure as="nav" className="bg-white shadow-sm">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex">
<div className="flex-shrink-0 flex items-center">
<LogoLightIcon className="block lg:hidden h-8 w-auto" />
<LogoIcon className="hidden lg:block h-8 w-auto" />
</div>
<div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
{navigation.map((item) => (
<Link href={item.href} key={item.name}>
<a
aria-current={isActive(pathname, item.href) ? 'page' : undefined}
className={classNames(
isActive(pathname, item.href)
? 'border-gray-900 text-gray-900'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
)}
>
{item.name}
</a>
</Link>
))}
</div>
</div>
<div className="hidden sm:ml-6 sm:flex sm:items-center">
<Menu as="div" className="ml-3 relative">
<div>
<Menu.Button className="bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span className="sr-only">Open user menu</span>
<UserAvatar name={user?.name} url={user?.pictureUrl} />
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<Link href="/app/profile">
<a className="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800 hover:bg-gray-100">
Profile
</a>
</Link>
<Menu.Item>
<button
className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:text-gray-800 hover:bg-gray-100"
onClick={logout}
>
Sign out
</button>
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
</div>
<div className="-mr-2 flex items-center sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span className="sr-only">Open main menu</span>
{open ? (
<XIcon aria-hidden="true" className="block h-6 w-6" />
) : (
<MenuIcon aria-hidden="true" className="block h-6 w-6" />
)}
</Disclosure.Button>
</div>
</div>
</div>
<Disclosure.Panel className="sm:hidden">
<div className="pt-2 pb-3 space-y-1">
{navigation.map((item) => (
<Disclosure.Button
aria-current={item.current ? 'page' : undefined}
as="a"
className={classNames(
item.current
? 'bg-indigo-50 border-indigo-500 text-indigo-700'
: 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
)}
href={item.href}
key={item.name}
>
{item.name}
</Disclosure.Button>
))}
</div>
<div className="pt-4 pb-3 border-t border-gray-200">
<div className="flex items-center px-4">
<div className="flex-shrink-0">
<UserAvatar name={user?.name} url={user?.pictureUrl} />
</div>
<div className="ml-3">
<div className="text-base font-medium text-gray-800">{user?.name}</div>
<div className="text-sm font-medium text-gray-500">{user?.email}</div>
</div>
</div>
<div className="mt-3 space-y-1">
<Link href="/app/profile">
<a className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
Profile
</a>
</Link>
<Disclosure.Button
className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
onClick={logout}
>
Sign out
</Disclosure.Button>
</div>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
);
};
export { Header };