Change menu icon

1 files changed, 35 insertions, 13 deletions

diff --git a/src/pages/my/menu.js b/src/pages/my/menu.js
index 89f9dff7..d86febf9 100644
--- a/src/pages/my/menu.js
+++ b/src/pages/my/menu.js
@@ -4,28 +4,38 @@ import Layout from "../../components/Layout";
 import Link from "../../components/Link";
 import { useAuth } from "../../helpers/auth";
 import {
+  ArrowRightOnRectangleIcon,
+  ChatBubbleLeftRightIcon,
   ChevronRightIcon,
+  ClipboardDocumentIcon,
+  ClipboardIcon,
+  ClockIcon,
+  DocumentArrowDownIcon,
+  MapIcon,
+  PaperClipIcon,
   PencilSquareIcon,
+  QuestionMarkCircleIcon,
+  ReceiptPercentIcon,
   UserIcon
 } from "@heroicons/react/24/outline"; 
 
 const activityMenus = [
-  { name: 'Daftar Transaksi', url: '/my/profile' },
-  { name: 'Penawaran Harga', url: '/my/profile' },
-  { name: 'Purchase Order', url: '/my/profile' },
-  { name: 'Faktur Penjualan', url: '/my/profile' },
-  { name: 'Faktur Pajak', url: '/my/profile' },
-  { name: 'Surat Jalan', url: '/my/profile' }
+  { icon: (<ReceiptPercentIcon className="w-5" />), name: 'Daftar Transaksi', url: '/my/profile' },
+  { icon: (<ClipboardIcon className="w-5" />), name: 'Penawaran Harga', url: '/my/profile' },
+  { icon: (<ClockIcon className="w-5" />), name: 'Purchase Order', url: '/my/profile' },
+  { icon: (<DocumentArrowDownIcon className="w-5" />), name: 'Faktur Penjualan', url: '/my/profile' },
+  { icon: (<PaperClipIcon className="w-5" />), name: 'Faktur Pajak', url: '/my/profile' },
+  { icon: (<ClipboardDocumentIcon className="w-5" />), name: 'Surat Jalan', url: '/my/profile' }
 ];
 
 const serviceMenus = [
-  { name: 'Customer Support', url: '/my/profile' },
-  { name: 'F.A.Q', url: '/my/profile' },
+  { icon: (<ChatBubbleLeftRightIcon className="w-5"/>), name: 'Customer Support', url: '/my/profile' },
+  { icon: (<QuestionMarkCircleIcon className="w-5"/>), name: 'F.A.Q', url: '/my/profile' },
 ];
 
 const settingMenus = [
-  { name: 'Daftar Alamat', url: '/my/profile' },
-  { name: 'Keluar Akun', url: '/my/profile' },
+  { icon: (<MapIcon className="w-5" />),name: 'Daftar Alamat', url: '/my/profile' },
+  { icon: (<ArrowRightOnRectangleIcon className="w-5" />),name: 'Keluar Akun', url: '/my/profile' },
 ];
 
 export default function MyMenu() {
@@ -56,7 +66,11 @@ export default function MyMenu() {
           <div className="flex flex-col mb-6">
             { activityMenus.map((menu, index) => (
               <Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
-                { menu.name } <ChevronRightIcon className="w-5 ml-auto"/>
+                <span className="flex gap-x-2">
+                  { menu.icon }
+                  { menu.name }
+                </span>
+                <ChevronRightIcon className="w-5 ml-auto"/>
               </Link>
             )) }
           </div>
@@ -65,7 +79,11 @@ export default function MyMenu() {
           <div className="flex flex-col mb-6">
             { serviceMenus.map((menu, index) => (
               <Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
-                { menu.name } <ChevronRightIcon className="w-5 ml-auto"/>
+                <span className="flex gap-x-2">
+                  { menu.icon }
+                  { menu.name }
+                </span>
+                <ChevronRightIcon className="w-5 ml-auto"/>
               </Link>
             )) }
           </div>
@@ -74,7 +92,11 @@ export default function MyMenu() {
           <div className="flex flex-col mb-6">
             { settingMenus.map((menu, index) => (
               <Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
-                { menu.name } <ChevronRightIcon className="w-5 ml-auto"/>
+                <span className="flex gap-x-2">
+                  { menu.icon }
+                  { menu.name }
+                </span>
+                <ChevronRightIcon className="w-5 ml-auto"/>
               </Link>
             )) }
           </div>