reworked navigation
This commit is contained in:
bobban committed
1 parent
069553f0eb
commit
ffc33ed95e
2 files changed
+255
-81
No files matched your search
+118
-2
@@ -44,12 +44,123 @@ body {
|
||||
.app-header {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 14px 24px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
height: 52px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Primary nav tabs in the top bar */
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-header h1 { font-size: 18px; font-weight: 600; }
|
||||
.nav-tab:hover { color: var(--text); }
|
||||
|
||||
.nav-tab.active {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
/* User menu dropdown */
|
||||
.user-menu-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-menu-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px 4px 5px;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.user-menu-trigger:hover { background: var(--hover); }
|
||||
|
||||
.user-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-menu-caret { font-size: 9px; color: var(--text-muted); }
|
||||
|
||||
.user-menu-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||||
min-width: 160px;
|
||||
z-index: 200;
|
||||
overflow: hidden;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.user-menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.user-menu-item:hover { background: var(--hover); }
|
||||
.user-menu-item--danger { color: #e05252; }
|
||||
.user-menu-item--danger:hover { background: rgba(224, 82, 82, 0.08); }
|
||||
|
||||
.user-menu-divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
@@ -57,6 +168,11 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* When no sidebar is present (Dashboard, Secrets, IPAM) */
|
||||
.layout.no-sidebar .main {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* ===== Sidebar ===== */
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
|
||||
+137
-79
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { getProviders, getZones, getRecords, syncRecords, addRecord, updateRecord, deleteRecord, getMe, setToken } from './api/dns';
|
||||
import RecordsTable from './components/RecordsTable';
|
||||
import AddRecordForm from './components/AddRecordForm';
|
||||
@@ -29,6 +29,12 @@ function formatSyncedAt(iso) {
|
||||
// ─── Main app (shown when authenticated) ─────────────────────────────────────
|
||||
|
||||
function AppShell({ currentUser, onLogout }) {
|
||||
// ── Top-level section nav ────────────────────────────────────────────────
|
||||
const [section, setSection] = useState('dashboard'); // dashboard|dns|secrets|ipam|admin
|
||||
const [adminView, setAdminView] = useState('settings'); // settings|audit|diag|profile
|
||||
const [dnsView, setDnsView] = useState('domains'); // domains | (provider is selected)
|
||||
|
||||
// ── DNS state ────────────────────────────────────────────────────────────
|
||||
const [providers, setProviders] = useState([]);
|
||||
const [selectedProvider, setSelectedProvider] = useState(null);
|
||||
const [zones, setZones] = useState([]);
|
||||
@@ -38,16 +44,40 @@ function AppShell({ currentUser, onLogout }) {
|
||||
const [loadingZones, setLoadingZones] = useState(false);
|
||||
const [loadingRecords, setLoadingRecords] = useState(false);
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
const [view, setView] = useState('dashboard');
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingRecord, setEditingRecord] = useState(null);
|
||||
const { colors: providerColors } = useProviderColors();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState(null);
|
||||
const [error, setError] = useState('');
|
||||
const [filter, setFilter] = useState('');
|
||||
|
||||
const { colors: providerColors } = useProviderColors();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const [error, setError] = useState('');
|
||||
const [userMenuOpen, setUserMenuOpen] = useState(false);
|
||||
const userMenuRef = useRef(null);
|
||||
|
||||
// Close user menu on outside click
|
||||
useEffect(() => {
|
||||
function handler(e) {
|
||||
if (userMenuRef.current && !userMenuRef.current.contains(e.target)) {
|
||||
setUserMenuOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, []);
|
||||
|
||||
function switchSection(s) {
|
||||
setSection(s);
|
||||
setSelectedProvider(null);
|
||||
setSelectedZone(null);
|
||||
setDnsView('domains');
|
||||
setFilter('');
|
||||
setError('');
|
||||
}
|
||||
|
||||
const hasSidebar = section === 'dns' || section === 'admin';
|
||||
|
||||
useEffect(() => {
|
||||
getProviders()
|
||||
.then(setProviders)
|
||||
@@ -83,6 +113,7 @@ function AppShell({ currentUser, onLogout }) {
|
||||
function selectZone(zone) {
|
||||
setSelectedZone(zone);
|
||||
setFilter('');
|
||||
setDnsView('provider');
|
||||
loadRecords(selectedProvider, zone);
|
||||
}
|
||||
|
||||
@@ -140,44 +171,85 @@ function AppShell({ currentUser, onLogout }) {
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
{/* ── Top bar ─────────────────────────────────────────────────────── */}
|
||||
<header className="app-header">
|
||||
<h1>🦥 Sloth Manager</h1>
|
||||
|
||||
<nav className="nav-tabs">
|
||||
{[
|
||||
{ id: 'dashboard', label: '🏠 Dashboard' },
|
||||
{ id: 'dns', label: '🌐 DNS' },
|
||||
{ id: 'secrets', label: '🔑 Secrets' },
|
||||
{ id: 'ipam', label: '📡 IPAM' },
|
||||
{ id: 'admin', label: '⚙️ Admin' },
|
||||
].map(({ id, label }) => (
|
||||
<button
|
||||
key={id}
|
||||
className={`nav-tab ${section === id ? 'active' : ''}`}
|
||||
onClick={() => switchSection(id)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="header-user">
|
||||
<button className="btn-theme" onClick={toggleTheme} title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}>
|
||||
{theme === 'dark' ? '☀️' : '🌙'}
|
||||
</button>
|
||||
<div className="user-menu-wrapper" ref={userMenuRef}>
|
||||
<button
|
||||
className="user-menu-trigger"
|
||||
onClick={() => setUserMenuOpen(o => !o)}
|
||||
>
|
||||
<span className="user-avatar">{currentUser.username[0].toUpperCase()}</span>
|
||||
<span className="header-username">{currentUser.username}</span>
|
||||
<button className="btn-logout" onClick={onLogout}>Sign out</button>
|
||||
<span className="user-menu-caret">{userMenuOpen ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
{userMenuOpen && (
|
||||
<div className="user-menu-dropdown">
|
||||
<button
|
||||
className="user-menu-item"
|
||||
onClick={() => { setSection('admin'); setAdminView('profile'); setUserMenuOpen(false); }}
|
||||
>
|
||||
👤 My Profile
|
||||
</button>
|
||||
<div className="user-menu-divider" />
|
||||
<button
|
||||
className="user-menu-item user-menu-item--danger"
|
||||
onClick={() => { setUserMenuOpen(false); onLogout(); }}
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="layout">
|
||||
<aside className="sidebar">
|
||||
{/* Overview */}
|
||||
<div className="sidebar-section">
|
||||
<button
|
||||
className={`sidebar-item ${view === 'dashboard' && !selectedProvider ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('dashboard'); }}
|
||||
>
|
||||
🏠 Overview
|
||||
</button>
|
||||
</div>
|
||||
{/* ── Body ─────────────────────────────────────────────────────────── */}
|
||||
<div className={`layout ${hasSidebar ? '' : 'no-sidebar'}`}>
|
||||
|
||||
{/* DNS */}
|
||||
{/* Sidebar — DNS */}
|
||||
{section === 'dns' && (
|
||||
<aside className="sidebar">
|
||||
<div className="sidebar-section">
|
||||
<h2>DNS</h2>
|
||||
<button
|
||||
className={`sidebar-item ${view === 'domains' && !selectedProvider ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('domains'); }}
|
||||
className={`sidebar-item ${dnsView === 'domains' && !selectedProvider ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setDnsView('domains'); }}
|
||||
>
|
||||
🌍 All Domains
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-section">
|
||||
<h2>Providers</h2>
|
||||
{providers.length === 0 && <p className="hint">No providers configured.<br />Set up your .env file.</p>}
|
||||
{providers.map(p => (
|
||||
<button
|
||||
key={p.id}
|
||||
className={`sidebar-item ${selectedProvider === p.id ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(p.id); setView('dashboard'); }}
|
||||
onClick={() => { setSelectedProvider(p.id); setSelectedZone(null); setDnsView('provider'); }}
|
||||
>
|
||||
{p.name}
|
||||
</button>
|
||||
@@ -186,7 +258,7 @@ function AppShell({ currentUser, onLogout }) {
|
||||
|
||||
{selectedProvider && (
|
||||
<div className="sidebar-section">
|
||||
<h2>Zones / Domains</h2>
|
||||
<h2>Zones</h2>
|
||||
{loadingZones && <p className="hint">Loading…</p>}
|
||||
{zones.map(z => (
|
||||
<button
|
||||
@@ -199,50 +271,30 @@ function AppShell({ currentUser, onLogout }) {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Tools */}
|
||||
<div className="sidebar-section">
|
||||
<h2>Tools</h2>
|
||||
<button
|
||||
className={`sidebar-item ${view === 'secrets' ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('secrets'); }}
|
||||
>
|
||||
🔑 Secrets
|
||||
</button>
|
||||
<button
|
||||
className={`sidebar-item ${view === 'ipam' ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('ipam'); }}
|
||||
>
|
||||
🖥️ IP Addresses
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* System */}
|
||||
<div className="sidebar-footer">
|
||||
By <a href="https://bobbantech.com" target="_blank" rel="noreferrer">bobbantech</a>
|
||||
</div>
|
||||
</aside>
|
||||
)}
|
||||
|
||||
{/* Sidebar — Admin */}
|
||||
{section === 'admin' && (
|
||||
<aside className="sidebar">
|
||||
<div className="sidebar-section">
|
||||
<h2>System</h2>
|
||||
{[
|
||||
{ id: 'settings', label: '⚙️ Settings' },
|
||||
{ id: 'audit', label: '📋 Audit Log' },
|
||||
{ id: 'diag', label: '🔬 Diagnostics' },
|
||||
].map(({ id, label }) => (
|
||||
<button
|
||||
className={`sidebar-item ${view === 'audit' ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('audit'); }}
|
||||
key={id}
|
||||
className={`sidebar-item ${adminView === id ? 'active' : ''}`}
|
||||
onClick={() => setAdminView(id)}
|
||||
>
|
||||
📋 Audit Log
|
||||
</button>
|
||||
<button
|
||||
className={`sidebar-item ${view === 'diag' ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('diag'); }}
|
||||
>
|
||||
🔬 Diagnostics
|
||||
</button>
|
||||
<button
|
||||
className={`sidebar-item ${view === 'settings' ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('settings'); }}
|
||||
>
|
||||
⚙️ Settings
|
||||
</button>
|
||||
<button
|
||||
className={`sidebar-item ${view === 'profile' ? 'active' : ''}`}
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('profile'); }}
|
||||
>
|
||||
👤 My Profile
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="sidebar-footer">
|
||||
@@ -250,13 +302,15 @@ function AppShell({ currentUser, onLogout }) {
|
||||
{' · '}
|
||||
<button
|
||||
className="sidebar-footer-link"
|
||||
onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('privacy'); }}
|
||||
onClick={() => window.dispatchEvent(new CustomEvent('show-privacy'))}
|
||||
>
|
||||
Privacy
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
)}
|
||||
|
||||
{/* ── Main content ───────────────────────────────────────────────── */}
|
||||
<main className="main">
|
||||
{error && (
|
||||
<div className="error-banner">
|
||||
@@ -265,25 +319,25 @@ function AppShell({ currentUser, onLogout }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!selectedProvider && view === 'settings' && <SettingsPage currentUser={currentUser} />}
|
||||
{!selectedProvider && view === 'profile' && <ProfilePage currentUser={currentUser} />}
|
||||
{!selectedProvider && view === 'domains' && (
|
||||
{/* Dashboard */}
|
||||
{section === 'dashboard' && <Dashboard />}
|
||||
|
||||
{/* Secrets */}
|
||||
{section === 'secrets' && <SecretsPage />}
|
||||
|
||||
{/* IPAM */}
|
||||
{section === 'ipam' && <IpamPage />}
|
||||
|
||||
{/* DNS */}
|
||||
{section === 'dns' && !selectedProvider && dnsView === 'domains' && (
|
||||
<DomainsPage onNavigate={(provider, zoneId, zoneName) => {
|
||||
setSelectedProvider(provider);
|
||||
setView('dashboard');
|
||||
// wait for zones to load then select
|
||||
setDnsView('provider');
|
||||
setSelectedZone({ id: zoneId, name: zoneName });
|
||||
loadRecords(provider, { id: zoneId, name: zoneName });
|
||||
}} />
|
||||
)}
|
||||
{!selectedProvider && view === 'secrets' && <SecretsPage />}
|
||||
{!selectedProvider && view === 'ipam' && <IpamPage />}
|
||||
{!selectedProvider && view === 'audit' && <AuditPage />}
|
||||
{!selectedProvider && view === 'diag' && <DiagnosticsPage />}
|
||||
{!selectedProvider && view === 'dashboard' && <Dashboard />}
|
||||
{!selectedProvider && view === 'privacy' && <PrivacyPage />}
|
||||
|
||||
{selectedProvider && !selectedZone && (
|
||||
{section === 'dns' && selectedProvider && !selectedZone && (
|
||||
<ProviderOverview
|
||||
provider={selectedProvider}
|
||||
providerMeta={providers.find(p => p.id === selectedProvider)}
|
||||
@@ -291,8 +345,7 @@ function AppShell({ currentUser, onLogout }) {
|
||||
onSelectZone={selectZone}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedZone && (
|
||||
{section === 'dns' && selectedZone && (
|
||||
<>
|
||||
<div className="records-header">
|
||||
<div>
|
||||
@@ -317,7 +370,6 @@ function AppShell({ currentUser, onLogout }) {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loadingRecords
|
||||
? <p className="hint">Loading…</p>
|
||||
: !syncedAt
|
||||
@@ -326,6 +378,12 @@ function AppShell({ currentUser, onLogout }) {
|
||||
}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Admin */}
|
||||
{section === 'admin' && adminView === 'settings' && <SettingsPage currentUser={currentUser} />}
|
||||
{section === 'admin' && adminView === 'audit' && <AuditPage />}
|
||||
{section === 'admin' && adminView === 'diag' && <DiagnosticsPage />}
|
||||
{section === 'admin' && adminView === 'profile' && <ProfilePage currentUser={currentUser} />}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in new issue
Block a user