import { useState, useEffect } from "react";
import { PURPLE, PURPLE_LIGHT, TABS } from "../constants/index.js";
import { version, updateCheckUrl } from "../../package.json";
import { useApp } from "../context/AppContext.jsx";
const TAB_ICONS = [
,
,
,
,
];
const GEBRUIKERS_ICON = (
);
const DATA_ICON = (
);
const LOGOUT_ICON = (
);
function Tooltip({ label, collapsed }) {
if (!collapsed) return null;
return (
{label}
);
}
function SidebarItem({ active, onClick, icon, label, T, collapsed }) {
const [hovered, setHovered] = useState(false);
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
title={collapsed ? label : undefined}
style={{
position: "relative",
display: "flex", alignItems: "center",
gap: collapsed ? 0 : 10,
padding: "9px 12px", borderRadius: 8, cursor: "pointer", marginBottom: 6,
justifyContent: collapsed ? "center" : "flex-start",
background: active ? `${PURPLE}18` : "transparent",
color: active ? PURPLE_LIGHT : T.muted,
fontWeight: active ? 600 : 500,
fontSize: 13,
transition: "background 0.15s, color 0.15s",
}}>
{icon}
{!collapsed && {label}}
{hovered && }
);
}
export default function NavBar() {
const {
tab, setTab,
setShowUsers,
T,
logout,
doBackup, doRestore,
} = useApp();
const [nieuweVersie, setNieuweVersie] = useState(null);
const [dataOpen, setDataOpen] = useState(false);
const [collapsed, setCollapsed] = useState(false);
const W = collapsed ? 56 : 220;
useEffect(() => {
if (!updateCheckUrl) return;
fetch(updateCheckUrl)
.then((r) => r.json())
.then((data) => {
const latest = data?.tag_name?.replace(/^v/, "");
if (latest && latest !== version) setNieuweVersie(latest);
})
.catch(() => {});
}, []);
return (
{/* Logo + collapse knop */}
{!collapsed ? (
) : (
)}
{/* Navigatie */}
{/* Onderste sectie */}
{/* Update melding */}
{nieuweVersie && !collapsed && (
Nieuwe versie: v{nieuweVersie}
Huidig: v{version}
)}
{nieuweVersie && collapsed && (
)}
{/* Uitloggen */}
{LOGOUT_ICON}}
label="Log out"
T={T}
collapsed={collapsed}
/>