38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
const NAV = [
|
|
{ id: 'overview', label: 'Обзор', ico: '◉' },
|
|
{ id: 'servers', label: 'Серверы', ico: '⋆' },
|
|
{ id: 'routing', label: 'Маршрутизация', ico: '⇅' },
|
|
{ id: 'logs', label: 'Логи', ico: '≡' },
|
|
{ id: 'settings', label: 'Настройки', ico: '⚙' },
|
|
];
|
|
|
|
export function Sidebar({ active, onChange, badges = {}, mode = 'gateway' }) {
|
|
const items = mode === 'client'
|
|
? NAV.filter((item) => item.id !== 'routing')
|
|
: NAV;
|
|
|
|
return (
|
|
<nav className="sidebar">
|
|
{items.map((item) => {
|
|
const badge = badges[item.id];
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
className={`sidebar-item${active === item.id ? ' active' : ''}`}
|
|
onClick={() => onChange(item.id)}
|
|
>
|
|
<span className="ico">{item.ico}</span>
|
|
{item.label}
|
|
{badge && (
|
|
<span className={`badge ${badge.kind || ''}`}>{badge.text}</span>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|