From 82fb1ea2bc766378528d4feb55ab6f703db24d5b Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Thu, 27 Mar 2025 13:18:14 +0700
Subject: [PATCH] feat: Update sidebar

- Perbaiki tampilan sidebar sesuai desain
---
 apps/backoffice/src/app/dashboard/layout.tsx  |  2 +-
 .../backoffice-sidebar/backoffice-sidebar.tsx | 84 +++++++------------
 2 files changed, 32 insertions(+), 54 deletions(-)

diff --git a/apps/backoffice/src/app/dashboard/layout.tsx b/apps/backoffice/src/app/dashboard/layout.tsx
index 0f4db25..423168f 100644
--- a/apps/backoffice/src/app/dashboard/layout.tsx
+++ b/apps/backoffice/src/app/dashboard/layout.tsx
@@ -4,7 +4,7 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 
 export const AppLayout: FC = (): ReactElement => {
   return (
-    <div className="bg-neutral-900 min-h-screen flex justify-center">
+    <div className="bg-primary-50 min-h-screen flex justify-center">
       <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
         <BackofficeSidebar />
         <div className="flex-1 overflow-auto">
diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
index bd2e665..a5e9b7a 100644
--- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
@@ -1,3 +1,10 @@
+import {
+  AppstoreOutlined,
+  AuditOutlined,
+  LogoutOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import { Button } from '../../atoms';
 import { FC, ReactElement } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
@@ -7,88 +14,59 @@ export const BackofficeSidebar: FC = (): ReactElement => {
 
   return (
     <aside className="w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
-      <div className="flex flex-col">
+      <div className="flex flex-col gap-20 justify-between items-center">
         {/* Logo */}
-        <div className="p-6 flex justify-center">
-          <img
-            src="/logos/simple.svg"
-            alt="IMPHNEN Logo"
-            className="w-[150px]"
-          />
-        </div>
+        <img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />
 
         {/* Navigation Menu */}
-        <nav className="mt-4 flex flex-col gap-2">
+        <nav className="flex flex-col gap-4 w-full">
           <Link
             to="/dashboard"
-            className={`flex items-center gap-2 px-6 py-3 ${
+            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/dashboard')
-                ? 'bg-primary-100 text-primary-500'
+                ? 'bg-primary-500 text-white rounded-md'
                 : 'text-gray-700 hover:bg-gray-100'
             }`}
           >
-            <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-              <rect
-                width="20"
-                height="20"
-                rx="2"
-                fill="currentColor"
-                fillOpacity="0.2"
-              />
-              <path d="M7 9h2v5H7V9zm4-3h2v8h-2V6z" fill="currentColor" />
-            </svg>
-            <span>Dashboard & Set Gacha</span>
+            <AppstoreOutlined className="text-[20px]" />
+            <span className="text-p3 font-medium">Dashboard & Set Gacha</span>
           </Link>
 
           <Link
             to="/users"
-            className={`flex items-center gap-2 px-6 py-3 ${
-              isActive('/users')
-                ? 'bg-primary-100 text-primary-500'
+            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
+              isActive('/accounts')
+                ? 'bg-primary-500 text-white rounded-md'
                 : 'text-gray-700 hover:bg-gray-100'
             }`}
           >
-            <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-              <path
-                d="M10 10a4 4 0 100-8 4 4 0 000 8zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                fill="currentColor"
-              />
-            </svg>
-            <span>Data Akun</span>
+            <UserOutlined className="text-[20px]" />
+            <span className="text-p3 font-medium">Data Akun</span>
           </Link>
 
           <Link
             to="/transactions"
-            className={`flex items-center gap-2 px-6 py-3 ${
+            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
               isActive('/transactions')
-                ? 'bg-primary-100 text-primary-500'
+                ? 'bg-primary-500 text-white rounded-md'
                 : 'text-gray-700 hover:bg-gray-100'
             }`}
           >
-            <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-              <path
-                d="M17 4H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 10H3V6h14v8z"
-                fill="currentColor"
-              />
-              <path d="M10 9h4v2h-4V9z" fill="currentColor" />
-            </svg>
-            <span>Validasi Transaksi</span>
+            <AuditOutlined className="text-[20px]" />
+            <span className="text-p3 font-medium">Validasi Transaksi</span>
           </Link>
         </nav>
       </div>
 
       {/* Log Out Button */}
-      <div className="mb-6 px-6">
-        <button className="flex items-center gap-2 text-gray-700 hover:text-red-500 transition-colors">
-          <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-            <path
-              d="M17 4h-4V2h-6v2H3v16h14V4zm-2 14H5V6h10v12z"
-              fill="currentColor"
-            />
-            <path d="M8 9h4v2H8V9z" fill="currentColor" />
-          </svg>
-          <span>Log Out</span>
-        </button>
+      <div className="w-full">
+        <Button
+          variant="text"
+          className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
+        >
+          <LogoutOutlined className="text-[20px]" />
+          <span className="text-p3 font-medium">Log Out</span>
+        </Button>
       </div>
     </aside>
   );