77 lines
2.3 KiB
React
77 lines
2.3 KiB
React
|
/**
|
||
|
|
* 사이드 네비게이션 메뉴
|
||
|
|
* - 퍼블리시 NavComponent 구조와 동일하게 맞춤
|
||
|
|
*/
|
||
|
|
|
||
|
|
const gnbList = [
|
||
|
|
{ key: 'gnb1', className: 'gnb1', label: '선박', path: 'ship' },
|
||
|
|
{ key: 'gnb2', className: 'gnb2', label: '위성', path: 'satellite' },
|
||
|
|
{ key: 'gnb3', className: 'gnb3', label: '기상', path: 'weather' },
|
||
|
|
{ key: 'gnb4', className: 'gnb4', label: '분석', path: 'analysis' },
|
||
|
|
{ key: 'gnb5', className: 'gnb5', label: '타임라인', path: 'timeline' },
|
||
|
|
{ key: 'gnb6', className: 'gnb6', label: 'AI모드', path: 'ai' },
|
||
|
|
{ key: 'gnb7', className: 'gnb7', label: '리플레이', path: 'replay' },
|
||
|
|
{ key: 'gnb8', className: 'gnb8', label: '항적조회', path: 'tracking' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const sideList = [
|
||
|
|
{ key: 'filter', className: 'filter', label: '필터', path: 'filter' },
|
||
|
|
{ key: 'layer', className: 'layer', label: '레이어', path: 'layer' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function SideNav({ activeKey, onChange }) {
|
||
|
|
return (
|
||
|
|
<nav id="nav">
|
||
|
|
<ul className="gnb">
|
||
|
|
{gnbList.map((item) => (
|
||
|
|
<li key={item.key}>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className={`${item.className} ${activeKey === item.key ? 'active' : ''}`}
|
||
|
|
onClick={() => onChange(item.key)}
|
||
|
|
aria-label={item.label}
|
||
|
|
title={item.label}
|
||
|
|
>
|
||
|
|
<span className="blind">{item.label}</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<ul className="side">
|
||
|
|
{sideList.map((item) => (
|
||
|
|
<li key={item.key}>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className={`${item.className} ${activeKey === item.key ? 'active' : ''}`}
|
||
|
|
onClick={() => onChange(item.key)}
|
||
|
|
aria-label={item.label}
|
||
|
|
title={item.label}
|
||
|
|
>
|
||
|
|
<span className="blind">{item.label}</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 키-경로 매핑 export (Sidebar에서 사용)
|
||
|
|
export const keyToPath = {
|
||
|
|
gnb1: 'ship',
|
||
|
|
gnb2: 'satellite',
|
||
|
|
gnb3: 'weather',
|
||
|
|
gnb4: 'analysis',
|
||
|
|
gnb5: 'timeline',
|
||
|
|
gnb6: 'ai',
|
||
|
|
gnb7: 'replay',
|
||
|
|
gnb8: 'tracking',
|
||
|
|
filter: 'filter',
|
||
|
|
layer: 'layer',
|
||
|
|
};
|
||
|
|
|
||
|
|
export const pathToKey = Object.fromEntries(
|
||
|
|
Object.entries(keyToPath).map(([k, v]) => [v, k])
|
||
|
|
);
|