Dateien nach "frontend/src" hochladen

frontend/src/App.jsx

@@ -172,9 +172,10 @@ function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick
               DICKEN<span style={{ color:'#4ecdc4' }}>DOCK</span>
             </div>
           </div>}
-          <button onClick={()=>setCollapsed(v=>!v)} style={{ background:'transparent', border:'none',
+          <button onClick={()=>setCollapsed(v=>!v)} style={{
-            color:'rgba(255,255,255,0.3)', cursor:'pointer', padding:4, flexShrink:0,
+            background:'rgba(78,205,196,0.15)', border:'1px solid rgba(78,205,196,0.35)',
-            fontSize:12, lineHeight:1 }} title={collapsed?'Ausklappen':'Einklappen'}>
+            borderRadius:6, color:'#4ecdc4', cursor:'pointer', padding:'4px 8px', flexShrink:0,
+            fontSize:14, lineHeight:1, fontWeight:700 }} title={collapsed?'Ausklappen':'Einklappen'}>
             {collapsed ? '›' : '‹'}
           </button>
         </div>
@@ -196,13 +197,13 @@ function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick
         </button>
         {appsOpen && getGroupedTools().map(([group, tools]) => (
           <div key={group}>
-            {!collapsed && <div style={{ color:'rgba(255,255,255,0.55)', fontSize:9, fontFamily:'monospace',
+            {!collapsed && <div style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
               letterSpacing:2, padding:'8px 12px 3px 12px' }}>{group.toUpperCase()}</div>}
             {tools.map(t => <NavBtn key={t.id} item={t} sub />)}
           </div>
         ))}
 
-        {user?.role==='admin' && <NavBtn item={{ id:'admin', icon:'⚙️', label:'Admin' }} />}
+        {user?.role==='admin' && <NavBtn item={{ id:'admin', Icon:AdminIcon, label:'Einstellungen' }} />}
       </nav>
       {updateInfo?.hasUpdate && (
         <button onClick={onUpdateClick} style={{
@@ -269,7 +270,7 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
   const mainNav = [
     { id:'dashboard', Icon:HomeIcon,  label:'Home' },
     { id:'_apps',     Icon:AppsIcon,  label:'Apps'  },
-    ...(user?.role==='admin' ? [{ id:'admin', Icon:AdminIcon, label:'Admin' }] : []),
+    ...(user?.role==='admin' ? [{ id:'admin', Icon:AdminIcon, label:'Einstellungen' }] : []),
     { id:'_mehr',     Icon:MoreIcon,  label:'Mehr'  },
   ];
 
@@ -280,7 +281,7 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
         <div style={{ paddingBottom:4 }}>
           {getGroupedTools().map(([group, tools]) => (
             <div key={group}>
-              <div style={{ color:'rgba(255,255,255,0.6)', fontSize:9, fontFamily:'monospace',
+              <div style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
                 letterSpacing:2, padding:'12px 20px 5px' }}>{group.toUpperCase()}</div>
               {tools.map(t => (
                 <MI key={t.id} Icon={t.Icon} label={t.label}
@@ -709,8 +710,21 @@ function AdminPanel({ toast, mobile }) {
 
   return (
     <div style={{ padding: mobile ? '14px 12px 90px' : '36px 44px', maxWidth:560 }}>
-      <h1 style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:mobile ? 17 : 22, marginBottom:18 }}>Admin</h1>
+      <h1 style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:mobile?17:22, marginBottom:16 }}>Einstellungen</h1>
 
+      {/* Subnavigation */}
+      <div style={{ display:'flex', gap:6, marginBottom:18 }}>
+        {[['profil','Profil'],['backup','Backup']].map(([k,l]) => (
+          <button key={k} onClick={()=>setSection(k)} style={{
+            padding:'6px 16px', borderRadius:20, fontFamily:'monospace', fontSize:12, cursor:'pointer',
+            border:`1px solid ${section===k?'rgba(78,205,196,0.5)':'rgba(255,255,255,0.1)'}`,
+            background: section===k?'rgba(78,205,196,0.12)':'transparent',
+            color: section===k?'#4ecdc4':'rgba(255,255,255,0.45)',
+          }}>{l}</button>
+        ))}
+      </div>
+
+      {section === 'profil' && <>
       <Sec title="AVATAR">
         <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:12 }}>
           <div style={{ width:60, height:60, borderRadius:'50%', overflow:'hidden', flexShrink:0,
@@ -763,6 +777,9 @@ function AdminPanel({ toast, mobile }) {
         </button>
       </Sec>
 
+      </>}
+
+      {section === 'backup' && <>
       <Sec title="DATENBANK">
         <p style={{ color:'rgba(255,255,255,0.3)', fontSize:12, fontFamily:'monospace', marginBottom:12, lineHeight:1.6 }}>
           Vollständige SQLite-Datenbank sichern oder wiederherstellen.
@@ -781,6 +798,7 @@ function AdminPanel({ toast, mobile }) {
         </div>
         {file && <div style={{ color:'rgba(255,255,255,0.25)', fontSize:10, fontFamily:'monospace', marginTop:5 }}>{file.name}</div>}
       </Sec>
+      </>}
     </div>
   );
 }