63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { useAuth } from '@/lib/auth-context';
|
|
|
|
interface NavItem {
|
|
label: string;
|
|
icon: string;
|
|
path: string;
|
|
}
|
|
|
|
const NAV_ITEMS: NavItem[] = [
|
|
{ label: '설비 관리', icon: 'precision_manufacturing', path: '' },
|
|
{ label: '검사 템플릿', icon: 'assignment', path: '/templates' },
|
|
{ label: '검사 실행', icon: 'fact_check', path: '/inspections' },
|
|
{ label: '알람', icon: 'notifications', path: '/alarms' },
|
|
];
|
|
|
|
export function TopNav({ tenantId, tenantName }: { tenantId: string; tenantName?: string }) {
|
|
const { user, logout } = useAuth();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const isActive = (path: string) => {
|
|
const fullPath = `/${tenantId}${path}`;
|
|
if (path === '') return pathname === fullPath;
|
|
return pathname.startsWith(fullPath);
|
|
};
|
|
|
|
return (
|
|
<nav className="topnav">
|
|
<div className="topnav-left">
|
|
<button className="topnav-brand" onClick={() => router.push('/')}>
|
|
<span className="material-symbols-outlined">precision_manufacturing</span>
|
|
<span className="topnav-app-name">FactoryOps</span>
|
|
</button>
|
|
<span className="topnav-divider" />
|
|
<span className="topnav-tenant">{tenantName || tenantId}</span>
|
|
</div>
|
|
|
|
<div className="topnav-center">
|
|
{NAV_ITEMS.map((item) => (
|
|
<button
|
|
key={item.path}
|
|
className={`topnav-item ${isActive(item.path) ? 'active' : ''}`}
|
|
onClick={() => router.push(`/${tenantId}${item.path}`)}
|
|
>
|
|
<span className="material-symbols-outlined">{item.icon}</span>
|
|
<span>{item.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="topnav-right">
|
|
<span className="topnav-user">{user?.name}</span>
|
|
<button className="btn-outline btn-sm" onClick={logout}>
|
|
<span className="material-symbols-outlined">logout</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|