blob: c840a688ebf638dae6b88084b3eb31beb5cc47f3 (
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
import Link from "../Link/Link"
import greeting from "@/core/utils/greeting"
import { Cog6ToothIcon } from "@heroicons/react/24/solid"
import useAuth from "@/core/hooks/useAuth"
import { AnimatePresence, motion } from "framer-motion"
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'
const transition = { ease: 'linear', duration: 0.2 }
return (
<>
<AnimatePresence>
{ active && (
<>
<motion.div
className="overlay z-50"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={transition}
onClick={close}
/>
<motion.div
className="fixed z-[55] top-0 h-full w-[80%] bg-white"
initial={{ left: '-80%' }}
animate={{ left: 0 }}
exit={{ left: '-80%' }}
transition={transition}
>
<div className="divide-y divide-gray_r-6">
<div className="p-4 flex gap-x-3">
{ !auth && (
<>
<Link onClick={close} href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
<Link onClick={close} 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>
</motion.div>
</>
) }
</AnimatePresence>
</>
)
}
export default Sidebar
|
