MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update sidebar

Browse Source 
- Perbaiki tampilan sidebar sesuai desain
This commit is contained in:
Hafid Nur
2025-03-27 13:18:14 +07:00
parent bd5e46e712
commit 82fb1ea2bc
2 changed files with 32 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+31 -53
View File
@@ -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>
);