149 lines
8.3 KiB
PHP
149 lines
8.3 KiB
PHP
<?php
|
|
/**
|
|
* Header & Navigatiebalk voor Fociz
|
|
*/
|
|
|
|
require_once __DIR__ . '/auth.php';
|
|
$currentUser = $currentUser ?? require_auth();
|
|
$currentPage = basename($_SERVER['PHP_SELF']);
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="nl" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?= htmlspecialchars($pageTitle ?? 'Fociz — Focus, Dagplanning & Roadmap') ?></title>
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
50: '#f0fdf4',
|
|
500: '#10b981',
|
|
600: '#059669',
|
|
700: '#047857',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
body {
|
|
background-color: #090d16;
|
|
color: #f1f5f9;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
}
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: #0f172a; }
|
|
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #475569; }
|
|
</style>
|
|
<body class="min-h-screen flex flex-col antialiased selection:bg-emerald-500 selection:text-white">
|
|
|
|
<?php
|
|
// Include flashy omgevingsindicator (Dev = Rood, Live = Groen)
|
|
require_once __DIR__ . '/env_badge.php';
|
|
?>
|
|
|
|
<?php if ($currentUser): ?>
|
|
<header class="sticky top-0 z-40 bg-[#0c121e]/90 backdrop-blur-md border-b border-slate-800/80">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Brand Logo (met linker padding zodat het badge vrij staat) -->
|
|
<div class="flex items-center space-x-6 pl-28 sm:pl-36">
|
|
<a href="/planner.php" class="flex items-center space-x-2.5 group">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-emerald-600 to-teal-400 flex items-center justify-center text-slate-950 font-black text-lg shadow-md shadow-emerald-500/20 group-hover:scale-105 transition">
|
|
F
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-xl font-bold tracking-tight text-white leading-none">Fociz</span>
|
|
<span class="text-[10px] text-emerald-400 tracking-wider font-semibold uppercase">Focus & Structuur</span>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Nav Tabs -->
|
|
<nav class="hidden md:flex items-center space-x-1">
|
|
<a href="/planner.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= $currentPage === 'planner.php' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
|
|
<i data-lucide="calendar" class="w-4 h-4"></i>
|
|
<span>Dagplanning</span>
|
|
</a>
|
|
<a href="/brainstorm.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= in_array($currentPage, ['brainstorm.php', 'brainstorm_canvas.php']) ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
|
|
<i data-lucide="lightbulb" class="w-4 h-4"></i>
|
|
<span>Brainstorm</span>
|
|
</a>
|
|
<a href="/roadmap.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= $currentPage === 'roadmap.php' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
|
|
<i data-lucide="map" class="w-4 h-4"></i>
|
|
<span>Roadmap</span>
|
|
</a>
|
|
<a href="/integrations.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= $currentPage === 'integrations.php' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
|
|
<i data-lucide="layers" class="w-4 h-4"></i>
|
|
<span>Integraties</span>
|
|
</a>
|
|
<?php if ($currentUser['role'] === 'ADMIN'): ?>
|
|
<a href="/users.php" class="flex items-center space-x-2 px-3.5 py-2 rounded-lg text-sm font-medium transition <?= $currentPage === 'users.php' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' ?>">
|
|
<i data-lucide="users" class="w-4 h-4"></i>
|
|
<span>Team & Invites</span>
|
|
</a>
|
|
<?php endif; ?>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Right side: User & 2FA Status -->
|
|
<div class="flex items-center space-x-3">
|
|
<div class="hidden sm:flex items-center space-x-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/25 text-emerald-400 text-xs font-medium">
|
|
<i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
|
|
<span>2FA Actief</span>
|
|
</div>
|
|
|
|
<div class="text-right hidden sm:block">
|
|
<div class="text-xs font-semibold text-slate-200"><?= htmlspecialchars($currentUser['name']) ?></div>
|
|
<div class="text-[10px] text-slate-500">
|
|
<?= $currentUser['role'] === 'ADMIN' ? 'Beheerder' : 'Collega' ?> • <?= htmlspecialchars($currentUser['email']) ?>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="/auth/logout.php" title="Veilig uitloggen" class="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/20 transition">
|
|
<i data-lucide="log-out" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation -->
|
|
<div class="flex md:hidden items-center justify-around py-2 border-t border-slate-800/60 text-xs">
|
|
<a href="/planner.php" class="flex flex-col items-center py-1 <?= $currentPage === 'planner.php' ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
|
|
<i data-lucide="calendar" class="w-4 h-4 mb-0.5"></i>
|
|
<span>Planning</span>
|
|
</a>
|
|
<a href="/brainstorm.php" class="flex flex-col items-center py-1 <?= in_array($currentPage, ['brainstorm.php', 'brainstorm_canvas.php']) ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 mb-0.5"></i>
|
|
<span>Brainstorm</span>
|
|
</a>
|
|
<a href="/roadmap.php" class="flex flex-col items-center py-1 <?= $currentPage === 'roadmap.php' ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
|
|
<i data-lucide="map" class="w-4 h-4 mb-0.5"></i>
|
|
<span>Roadmap</span>
|
|
</a>
|
|
<a href="/integrations.php" class="flex flex-col items-center py-1 <?= $currentPage === 'integrations.php' ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
|
|
<i data-lucide="layers" class="w-4 h-4 mb-0.5"></i>
|
|
<span>Koppelingen</span>
|
|
</a>
|
|
<?php if ($currentUser['role'] === 'ADMIN'): ?>
|
|
<a href="/users.php" class="flex flex-col items-center py-1 <?= $currentPage === 'users.php' ? 'text-emerald-400 font-bold' : 'text-slate-400' ?>">
|
|
<i data-lucide="users" class="w-4 h-4 mb-0.5"></i>
|
|
<span>Team</span>
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<?php endif; ?>
|
|
|
|
<main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8">
|
|
|