reworked navigation

frontend/src/App.css

@@ -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;

frontend/src/App.js

@@ -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,123 +171,146 @@ 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>
-          <span className="header-username">{currentUser.username}</span>
+          <div className="user-menu-wrapper" ref={userMenuRef}>
-          <button className="btn-logout" onClick={onLogout}>Sign out</button>
+            <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>
+              <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">
+      {/* ── Body ─────────────────────────────────────────────────────────── */}
-        <aside className="sidebar">
+      <div className={`layout ${hasSidebar ? '' : 'no-sidebar'}`}>
-          {/* Overview */}
-          <div className="sidebar-section">
-            <button
-              className={`sidebar-item ${view === 'dashboard' && !selectedProvider ? 'active' : ''}`}
-              onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('dashboard'); }}
-            >
-              🏠 Overview
-            </button>
-          </div>
 
-          {/* DNS */}
+        {/* Sidebar — DNS */}
-          <div className="sidebar-section">
+        {section === 'dns' && (
-            <h2>DNS</h2>
+          <aside className="sidebar">
-            <button
-              className={`sidebar-item ${view === 'domains' && !selectedProvider ? 'active' : ''}`}
-              onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('domains'); }}
-            >
-              🌍 All Domains
-            </button>
-            {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'); }}
-              >
-                {p.name}
-              </button>
-            ))}
-          </div>
-
-          {selectedProvider && (
             <div className="sidebar-section">
-              <h2>Zones / Domains</h2>
+              <button
-              {loadingZones && <p className="hint">Loading…</p>}
+                className={`sidebar-item ${dnsView === 'domains' && !selectedProvider ? 'active' : ''}`}
-              {zones.map(z => (
+                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={z.id}
+                  key={p.id}
-                  className={`sidebar-item ${selectedZone?.id === z.id ? 'active' : ''}`}
+                  className={`sidebar-item ${selectedProvider === p.id ? 'active' : ''}`}
-                  onClick={() => selectZone(z)}
+                  onClick={() => { setSelectedProvider(p.id); setSelectedZone(null); setDnsView('provider'); }}
                 >
-                  {z.name}
+                  {p.name}
                 </button>
               ))}
             </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 */}
+            {selectedProvider && (
-          <div className="sidebar-section">
+              <div className="sidebar-section">
-            <h2>System</h2>
+                <h2>Zones</h2>
-            <button
+                {loadingZones && <p className="hint">Loading…</p>}
-              className={`sidebar-item ${view === 'audit' ? 'active' : ''}`}
+                {zones.map(z => (
-              onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('audit'); }}
+                  <button
-            >
+                    key={z.id}
-              📋 Audit Log
+                    className={`sidebar-item ${selectedZone?.id === z.id ? 'active' : ''}`}
-            </button>
+                    onClick={() => selectZone(z)}
-            <button
+                  >
-              className={`sidebar-item ${view === 'diag' ? 'active' : ''}`}
+                    {z.name}
-              onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('diag'); }}
+                  </button>
-            >
+                ))}
-              🔬 Diagnostics
+              </div>
-            </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
-            </button>
-          </div>
 
-          <div className="sidebar-footer">
+            <div className="sidebar-footer">
-            By <a href="https://bobbantech.com" target="_blank" rel="noreferrer">bobbantech</a>
+              By <a href="https://bobbantech.com" target="_blank" rel="noreferrer">bobbantech</a>
-            {' · '}
+            </div>
-            <button
+          </aside>
-              className="sidebar-footer-link"
+        )}
-              onClick={() => { setSelectedProvider(null); setSelectedZone(null); setView('privacy'); }}
-            >
-              Privacy
-            </button>
-          </div>
-        </aside>
 
+        {/* Sidebar — Admin */}
+        {section === 'admin' && (
+          <aside className="sidebar">
+            <div className="sidebar-section">
+              {[
+                { id: 'settings', label: '⚙️ Settings'    },
+                { id: 'audit',    label: '📋 Audit Log'   },
+                { id: 'diag',     label: '🔬 Diagnostics' },
+              ].map(({ id, label }) => (
+                <button
+                  key={id}
+                  className={`sidebar-item ${adminView === id ? 'active' : ''}`}
+                  onClick={() => setAdminView(id)}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+
+            <div className="sidebar-footer">
+              By <a href="https://bobbantech.com" target="_blank" rel="noreferrer">bobbantech</a>
+              {' · '}
+              <button
+                className="sidebar-footer-link"
+                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} />}
+          {/* Dashboard */}
-          {!selectedProvider && view === 'profile'  && <ProfilePage currentUser={currentUser} />}
+          {section === 'dashboard' && <Dashboard />}
-          {!selectedProvider && view === 'domains'   && (
+
+          {/* Secrets */}
+          {section === 'secrets' && <SecretsPage />}
+
+          {/* IPAM */}
+          {section === 'ipam' && <IpamPage />}
+
+          {/* DNS */}
+          {section === 'dns' && !selectedProvider && dnsView === 'domains' && (
             <DomainsPage onNavigate={(provider, zoneId, zoneName) => {
               setSelectedProvider(provider);
-              setView('dashboard');
+              setDnsView('provider');
-              // wait for zones to load then select
               setSelectedZone({ id: zoneId, name: zoneName });
               loadRecords(provider, { id: zoneId, name: zoneName });
             }} />
           )}
-          {!selectedProvider && view === 'secrets'   && <SecretsPage />}
+          {section === 'dns' && selectedProvider && !selectedZone && (
-          {!selectedProvider && view === 'ipam'      && <IpamPage />}
-          {!selectedProvider && view === 'audit'    && <AuditPage />}
-          {!selectedProvider && view === 'diag'     && <DiagnosticsPage />}
-          {!selectedProvider && view === 'dashboard' && <Dashboard />}
-          {!selectedProvider && view === 'privacy'   && <PrivacyPage />}
-
-          {selectedProvider && !selectedZone && (
             <ProviderOverview
               provider={selectedProvider}
               providerMeta={providers.find(p => p.id === selectedProvider)}
@@ -291,8 +345,7 @@ function AppShell({ currentUser, onLogout }) {
               onSelectZone={selectZone}
             />
           )}
-
+          {section === 'dns' && selectedZone && (
-          {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>