<div class="ops-nav-bar" id="opsNavBar">
<div class="nav-left">
<div class="nav-logo-wrapper">
<img src="https://images.squarespace-cdn.com/content/v1/545a9d27e4b0ca6b8bdd471e/b532a1e5-eb23-4ed4-a264-ba157adda7c2/Logo+%281%29.png?format=1500w" alt="PlusPartner Logo" class="nav-logo-img">
</div>
<a href="#" onclick="return false;" class="nav-link nav-link-disabled">Home</a>
<a href="/staff1" id="navLinkMvt" class="nav-link">Movements</a>
<a href="/staff" id="navLinkGantt" class="nav-link">Planner</a>
<a href="#" onclick="return false;" class="nav-link nav-link-disabled">Back Office</a>
</div>
<div class="nav-right">
<button id="navThemeToggleBtn" class="nav-theme-toggle-btn" onclick="toggleGlobalTheme()" title="Skift tema">
<span class="theme-icon-sun">☀️</span>
<span class="theme-icon-moon">🌙</span>
</button>
<div id="dbOutageAlert" class="outage-alert-wrapper" style="display: none;">
<span class="system-status-dot-critical"></span>
<span class="outage-text">Database Outage</span>
</div>
</div>
</div>
<script>
// Funktion til at skifte temaet frem og tilbage ved klik på ikonet
function toggleGlobalTheme() {
const currentTheme = localStorage.getItem('selectedTheme') || 'light';
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
applyGlobalTheme(newTheme);
}
// Funktion der udfører selve farveskiftet på elementerne
function applyGlobalTheme(themeName) {
const navBar = document.getElementById('opsNavBar');
const toggleBtn = document.getElementById('navThemeToggleBtn');
const ganttWrapper = document.getElementById('ganttThemeWrapper');
const modals = document.querySelectorAll('.gantt-modal');
// Gem valget i browseren til næste besøg/sideskift
localStorage.setItem('selectedTheme', themeName);
if (themeName === 'dark') {
navBar.classList.add('dark-theme');
toggleBtn.classList.add('dark-mode-active');
if (ganttWrapper) ganttWrapper.classList.add('dark-theme');
modals.forEach(m => m.classList.add('dark-theme'));
} else {
navBar.classList.remove('dark-theme');
toggleBtn.classList.remove('dark-mode-active');
if (ganttWrapper) ganttWrapper.classList.remove('dark-theme');
modals.forEach(m => m.classList.remove('dark-theme'));
}
}
// Opstartskontrol
window.addEventListener('DOMContentLoaded', () => {
// 1. Aktivt link tjek i menuen
const path = window.location.pathname;
if (path === '/staff' || path === '/staff/') {
document.getElementById('navLinkGantt').classList.add('active-link');
} else if (path === '/staff1' || path === '/staff1/') {
document.getElementById('navLinkMvt').classList.add('active-link');
}
// 2. Tjek hukommelse: Hvis tom, tvinges 'light' (lyst tema) som fast standard for nye brugere
const savedTheme = localStorage.getItem('selectedTheme') || 'light';
applyGlobalTheme(savedTheme);
// 3. Outage Tjek (Supabase overvågning)
setTimeout(() => {
if (window.supabaseClient) {
window.supabaseClient.channel('gantt-db-changes').on('system', {}, (payload) => {
const alertBox = document.getElementById('dbOutageAlert');
if (payload.status === 'closed' || payload.status === 'errored') {
alertBox.style.display = 'flex';
} else {
alertBox.style.display = 'none';
}
});
}
}, 1000);
});
</script>
<style>
/* VARIABLER FOR LYS / MØRK NAV-BAR */
.ops-nav-bar {
--nav-bg: #ffffff;
--nav-border: #dee2e6;
--nav-text: #495057;
--nav-text-hover: #1a1a1a;
--nav-bg-hover: #e9ecef;
--toggle-btn-bg: #f1f3f5;
--toggle-btn-hover: #e9ecef;
}
.ops-nav-bar.dark-theme {
--nav-bg: #111116;
--nav-border: #2a2a35;
--nav-text: #8e8e9f;
--nav-text-hover: #ffffff;
--nav-bg-hover: #1f1f29;
--toggle-btn-bg: #1f1f29;
--toggle-btn-hover: #2a2a35;
}
.ops-nav-bar , .ops-nav-bar ::before, .ops-nav-bar *::after { box-sizing: border-box !important; }
.ops-nav-bar {
background: var(--nav-bg);
border-bottom: 1px solid var(--nav-border);
padding: 16px 25px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Inter', sans-serif;
width: 100%;
margin-bottom: 0;
transition: background-color 0.2s, border-color 0.2s;
}
.nav-left { display: flex; align-items: center; gap: 15px; }
.nav-logo-wrapper {
margin-right: 20px;
border-right: 1px solid var(--nav-border);
padding-right: 25px;
display: flex;
align-items: center;
}
.nav-logo-img {
height: 34px;
width: auto;
display: block;
}
.nav-link {
text-decoration: none;
color: var(--nav-text);
font-size: 13px;
font-weight: 600;
padding: 8px 14px;
border-radius: 4px;
transition: all 0.2s ease;
display: flex;
align-items: center;
}
.nav-link:hover { color: var(--nav-text-hover); background: var(--nav-bg-hover); }
.active-link { color: #007c8a !important; background: rgba(0, 124, 138, 0.08); font-weight: 700; }
.ops-nav-bar.dark-theme .active-link { color: #00b4d8 !important; background: rgba(0, 180, 216, 0.08); }
.nav-link-disabled { opacity: 0.25; cursor: not-allowed !important; }
.nav-link-disabled:hover { background: transparent; color: var(--nav-text); }
.nav-right { display: flex; align-items: center; gap: 20px; margin-right: 10px; }
/* TEMA SOL / MÅNE-KNAP DESIGN */
.nav-theme-toggle-btn {
background: var(--toggle-btn-bg);
border: 1px solid var(--nav-border);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
padding: 0;
line-height: 1;
outline: none;
transition: background-color 0.2s, border-color 0.2s, transform 0.2s ease;
}
.nav-theme-toggle-btn:hover {
background: var(--toggle-btn-hover);
transform: scale(1.05);
}
.nav-theme-toggle-btn:active {
transform: scale(0.95);
}
/* Logik der skifter synligheden af ikonerne baseret på tema */
.nav-theme-toggle-btn .theme-icon-moon { display: none; }
.nav-theme-toggle-btn .theme-icon-sun { display: inline-block; }
.nav-theme-toggle-btn.dark-mode-active .theme-icon-sun { display: none; }
.nav-theme-toggle-btn.dark-mode-active .theme-icon-moon { display: inline-block; }
/* SUPABASE OUTAGE ALERT (KUN SYNLIG VED REEL FEJL) */
.outage-alert-wrapper { display: flex; align-items: center; gap: 8px; background: rgba(201, 42, 42, 0.1); padding: 6px 12px; border-radius: 4px; border: 1px solid rgba(201, 42, 42, 0.3); }
.outage-text { font-size: 11px; color: #c92a2a; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.system-status-dot-critical {
width: 8px;
height: 8px;
background: #c92a2a;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 8px #c92a2a;
animation: criticalPulse 1s infinite alternate;
}
@keyframes criticalPulse {
0% { opacity: 0.4; box-shadow: 0 0 4px #c92a2a; }
100% { opacity: 1; box-shadow: 0 0 12px #ff3b3b; }
}
</style>