49 lines
2.1 KiB
TypeScript
49 lines
2.1 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: 'analytics', icon: 'leaderboard', label: 'Analytics' },
|
|
{ id: 'settings', icon: 'settings', label: 'Settings' }
|
|
];
|
|
|
|
return (
|
|
<aside className="menu p-5 is-flex is-flex-direction-column" style={{ position: 'sticky', top: '4rem', minHeight: 'calc(100vh - 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 is-flex-grow-1">
|
|
{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>
|
|
<div className="mt-auto pt-4" style={{ borderTop: '1px solid #e2dfdb' }}>
|
|
<button
|
|
className="button is-fullwidth is-outlined is-primary has-text-weight-semibold is-flex is-align-items-center is-justify-content-center"
|
|
style={{ gap: '0.5rem', borderRadius: '8px' }}
|
|
onClick={() => window.open('/', '_blank')}
|
|
>
|
|
<span>View Store</span>
|
|
<span className="material-symbols-outlined is-size-6">open_in_new</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|