38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { useSeller } from '../../context/SellerContext';
|
|
|
|
export default function Sidebar() {
|
|
const { dashTab, setDashTab } = useSeller();
|
|
|
|
const menuItems = [
|
|
{ id: 'overview', icon: 'grid_view', label: 'Overview' },
|
|
{ id: 'orders', icon: 'local_shipping', label: 'Orders' },
|
|
{ id: 'products', icon: 'inventory_2', label: 'Products' },
|
|
{ id: 'payments', icon: 'account_balance_wallet', label: 'Payments & Earnings' },
|
|
{ id: 'settings', icon: 'settings', label: 'Settings' }
|
|
];
|
|
|
|
return (
|
|
<aside className="menu p-5" style={{ position: 'sticky', top: '4rem' }}>
|
|
<p className="menu-label has-text-weight-bold tracking-wide" style={{ color: 'var(--bulma-grey)', letterSpacing: '0.1em' }}>
|
|
Seller Central
|
|
</p>
|
|
<ul className="menu-list">
|
|
{menuItems.map(item => (
|
|
<li key={item.id} className="mb-2">
|
|
<a
|
|
className={`is-flex is-align-items-center py-3 px-4 ${dashTab === item.id ? 'has-background-primary-light has-text-primary has-text-weight-bold' : 'has-text-grey-dark'}`}
|
|
style={{ borderRadius: '8px', transition: 'all 0.2s ease' }}
|
|
onClick={() => setDashTab(item.id)}
|
|
>
|
|
<span className="icon mr-3">
|
|
<span className="material-symbols-outlined is-size-5">{item.icon}</span>
|
|
</span>
|
|
<span>{item.label}</span>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</aside>
|
|
);
|
|
}
|