blob: cdeb3e05011382f36fe2d1051631fd32068b9cc5 (
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
import Link from '../Link/Link'
import greeting from '@/core/utils/greeting'
import useAuth from '@/core/hooks/useAuth'
import { AnimatePresence, motion } from 'framer-motion'
import { CogIcon } from '@heroicons/react/24/outline'
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'
>
<CogIcon 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
|
