1 files changed, 100 insertions, 0 deletions
diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx
new file mode 100644
index 00000000..b9fd30ee
--- /dev/null
+++ b/src/pages/my/menu.jsx
@@ -0,0 +1,100 @@
+import Divider from '@/core/components/elements/Divider/Divider'
+import Link from '@/core/components/elements/Link/Link'
+import AppLayout from '@/core/components/layouts/AppLayout'
+import useAuth from '@/core/hooks/useAuth'
+import { deleteAuth } from '@/core/utils/auth'
+import IsAuth from '@/lib/auth/components/IsAuth'
+import { ChevronRightIcon, UserIcon } from '@heroicons/react/24/solid'
+import { useRouter } from 'next/router'
+
+export default function Menu() {
+  const auth = useAuth()
+  const router = useRouter()
+
+  const logout = () => {
+    deleteAuth()
+    router.push('/login')
+  }
+
+  return (
+    <IsAuth>
+      <AppLayout title='Menu Utama'>
+        <Link
+          href='/my/profile'
+          className='p-4 flex items-center'
+        >
+          <div className='rounded-full p-3 bg-gray_r-6 text-gray_r-12/80'>
+            <UserIcon className='w-5' />
+          </div>
+          <div className='ml-4'>
+            <div className='font-semibold text-gray_r-12'>{auth?.name}</div>
+            {auth?.company && <div className='badge-solid-red mt-1'>Akun Bisnis</div>}
+            {!auth?.company && <div className='badge-gray mt-1'>Akun Individu</div>}
+          </div>
+          <div className='ml-auto !text-gray_r-12'>
+            <ChevronRightIcon className='w-6' />
+          </div>
+        </Link>
+
+        <Divider />
+
+        <div className='flex flex-col gap-y-6 py-6'>
+          <div>
+            <MenuHeader>Aktivitas Pembelian</MenuHeader>
+
+            <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
+              <LinkItem href='/my/transactions'>Daftar Transaksi</LinkItem>
+              <LinkItem href='/my/invoices'>Invoice & Faktur Pajak</LinkItem>
+              <LinkItem href='/my/wishlist'>Wishlist</LinkItem>
+            </div>
+          </div>
+
+          <div>
+            <MenuHeader>Pusat Bantuan</MenuHeader>
+
+            <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
+              <LinkItem href='/'>Customer Support</LinkItem>
+              <LinkItem href='/faqs'>F.A.Q</LinkItem>
+            </div>
+          </div>
+
+          <div>
+            <MenuHeader>Pengaturan Akun</MenuHeader>
+
+            <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
+              <LinkItem href='/my/address'>Daftar Alamat</LinkItem>
+            </div>
+
+            <div
+              onClick={logout}
+              className='p-4 mt-2'
+            >
+              <button className='w-full btn-red'>Keluar Akun</button>
+            </div>
+          </div>
+        </div>
+      </AppLayout>
+    </IsAuth>
+  )
+}
+
+const MenuHeader = ({ children, ...props }) => (
+  <div
+    {...props}
+    className='font-medium px-4 flex'
+  >
+    {children}
+  </div>
+)
+
+const LinkItem = ({ children, ...props }) => (
+  <Link
+    {...props}
+    className='!text-gray_r-12/70 !font-normal p-4 flex items-center'
+  >
+    {children}
+    <div className='ml-auto !text-gray_r-11'>
+      <ChevronRightIcon className='w-5' />
+    </div>
+  </Link>
+)