blob: 412ed915ca2ae91bac0982889d2396040d9f87df (
plain)
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
|
import Link from "../Link/Link"
import greeting from "@/core/utils/greeting"
import { Cog6ToothIcon } from "@heroicons/react/24/solid"
import useAuth from "@/core/hooks/useAuth"
const Sidebar = ({
active,
close
}) => {
const auth = useAuth()
const SidebarLink = ({ children, ...props }) => (
<Link
{...props}
onClick={close}
>{ children }</Link>
)
const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
return (
<>
{ active && <div className="overlay z-50" onClick={close}></div> }
<div className={`fixed z-[55] top-0 h-full w-[80%] transition-all ease-linear duration-50 bg-white ${active ? 'left-0' : '-left-[80%]'}`}>
<div className="divide-y divide-gray_r-6">
<div className="p-4 flex gap-x-3">
{ !auth && (
<>
<Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
<Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
</>
) }
{ auth && (
<>
<div className="text-caption-2 text-gray_r-11">
{ greeting() },
<span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
{ auth?.name }
</span>
</div>
<Link
onClick={close}
href="/my/menu"
className="!text-gray_r-11 ml-auto my-auto"
>
<Cog6ToothIcon className="w-6" />
</Link>
</>
) }
</div>
<SidebarLink className={itemClassName} href="/">
Semua Brand
</SidebarLink>
<SidebarLink className={itemClassName} href="/">
Tentang Indoteknik
</SidebarLink>
<SidebarLink className={itemClassName} href="/">
Pusat Bantuan
</SidebarLink>
<button className={`${itemClassName} w-full text-left`}>Kategori</button>
</div>
</div>
</>
)
}
export default Sidebar
|
