import { useState } from 'react';
import { Outlet, useNavigate } from 'react-router';
import {
AppShell,
Sidebar,
TopBar,
} from '@cameleer/design-system';
import { useAuth } from '../auth/useAuth';
import { EnvironmentTree } from './EnvironmentTree';
// Simple SVG logo mark for the sidebar header
function CameleerLogo() {
return (
);
}
// Nav icon helpers
function DashboardIcon() {
return (
);
}
function EnvIcon() {
return (
);
}
function LicenseIcon() {
return (
);
}
function ObsIcon() {
return (
);
}
function UserIcon() {
return (
);
}
function PlatformIcon() {
return (
);
}
export function Layout() {
const navigate = useNavigate();
const { username, logout, isPlatformAdmin } = useAuth();
const [envSectionOpen, setEnvSectionOpen] = useState(true);
const [collapsed, setCollapsed] = useState(false);
const sidebar = (
setCollapsed((c) => !c)}>
}
title="Cameleer SaaS"
onClick={() => navigate('/')}
/>
{/* Dashboard */}
}
label="Dashboard"
open={false}
onToggle={() => navigate('/')}
>
{null}
{/* Environments — expandable tree */}
}
label="Environments"
open={envSectionOpen}
onToggle={() => setEnvSectionOpen((o) => !o)}
>
{/* License */}
}
label="License"
open={false}
onToggle={() => navigate('/license')}
>
{null}
{/* Platform Admin section */}
{isPlatformAdmin && (
}
label="Platform"
open={false}
onToggle={() => navigate('/admin/tenants')}
>
{null}
)}
{/* Link to the observability SPA (direct port, not via Traefik prefix) */}
}
label="View Dashboard"
onClick={() => window.open('http://localhost:8081', '_blank', 'noopener')}
/>
{/* User info + logout */}
}
label={username ?? 'Account'}
onClick={logout}
/>
);
return (
);
}