74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
// Common Navigation and UI Utilities for ChemiFactory MES/HMI
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
renderNavigation();
|
|
highlightActiveLink();
|
|
});
|
|
|
|
// Navigation configuration
|
|
const navItems = [
|
|
{ name: "대시보드", icon: "📊", path: "index.html" },
|
|
{ name: "생산 계획", icon: "📅", path: "plan.html" },
|
|
{ name: "생산 현황", icon: "⚙️", path: "equipment.html" },
|
|
{ name: "고객사 관리", icon: "🤝", path: "customer.html" },
|
|
{ name: "공급사 관리", icon: "🏭", path: "supplier.html" },
|
|
{ name: "기기 관리", icon: "🛠️", path: "device.html" },
|
|
{ name: "재고 관리", icon: "📦", path: "inventory.html" },
|
|
{ name: "계산/분석", icon: "📐", path: "analysis.html" },
|
|
{ name: "설정", icon: "⚙️", path: "setting.html" }
|
|
];
|
|
|
|
function renderNavigation() {
|
|
const sidebar = document.getElementById("sidebar");
|
|
if (!sidebar) return;
|
|
|
|
let html = `
|
|
<div class="sidebar-brand" style="display: flex; align-items: center; gap: 10px; padding: 20px 24px;">
|
|
<img src="source/logo.png" alt="Logo" class="brand-icon" style="width: 32px; height: 32px; object-fit: contain; font-size: 0;">
|
|
<img src="source/company_name.png" alt="ChemiFactory" class="brand-name" style="height: 24px; object-fit: contain; max-width: 150px;">
|
|
</div>
|
|
<ul class="nav-links">
|
|
`;
|
|
|
|
navItems.forEach(item => {
|
|
html += `
|
|
<li>
|
|
<a href="${item.path}" class="nav-item-link" data-path="${item.path}">
|
|
<span class="nav-icon">${item.icon}</span>
|
|
<span class="nav-text">${item.name}</span>
|
|
</a>
|
|
</li>
|
|
`;
|
|
});
|
|
|
|
html += `
|
|
</ul>
|
|
<div class="sidebar-footer">
|
|
<div class="user-profile">
|
|
<span class="user-avatar">👤</span>
|
|
<div class="user-info">
|
|
<span class="user-name">관리자</span>
|
|
<span class="user-role">SYSTEM ADMIN</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
sidebar.innerHTML = html;
|
|
}
|
|
|
|
function highlightActiveLink() {
|
|
// Current page filename detection
|
|
const path = window.location.pathname;
|
|
const page = path.split("/").pop() || "index.html";
|
|
|
|
const links = document.querySelectorAll(".nav-item-link");
|
|
links.forEach(link => {
|
|
const itemPath = link.getAttribute("data-path");
|
|
if (page === itemPath || (page === "" && itemPath === "index.html")) {
|
|
link.classList.add("active");
|
|
} else {
|
|
link.classList.remove("active");
|
|
}
|
|
});
|
|
}
|