From c3446e4f53421d1b2106cb9799881d89a1c13175 Mon Sep 17 00:00:00 2001
From: Dicken <dicken@noreply.localhost>
Date: Tue, 26 May 2026 11:14:24 +0200
Subject: [PATCH] Dateien nach "frontend/src" hochladen

---
 frontend/src/App.jsx | 51 ++++++++++++++++++++++++++------------------
 frontend/src/lib.js  |  2 +-
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9b683ec..414a38d 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -160,25 +160,34 @@ function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick
   };
 
   return (
-    <aside style={{ width:collapsed?60:210, minHeight:'100vh', background:'#0d0d0f',
+    <aside style={{ width:collapsed?56:210, minHeight:'100vh', background:'#0d0d0f',
       borderRight:'1px solid rgba(255,255,255,0.06)', display:'flex', flexDirection:'column', flexShrink:0,
-      transition:'width 0.2s ease', overflow:'hidden' }}>
-      <div style={{ padding:'14px 12px', borderBottom:'1px solid rgba(255,255,255,0.06)', marginBottom:8 }}>
-        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
-          <div style={{ width:30, height:30, background:'linear-gradient(135deg,#4ecdc4,#ff6b9d)',
-            borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, flexShrink:0 }}>⚒</div>
-          {!collapsed && <div style={{flex:1,minWidth:0}}>
-            <div style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:13, fontWeight:700, whiteSpace:'nowrap' }}>
-              DICKEN<span style={{ color:'#4ecdc4' }}>DOCK</span>
+      transition:'width 0.2s ease', overflow:'hidden', position:'relative' }}>
+      <div style={{ padding:'12px 8px', borderBottom:'1px solid rgba(255,255,255,0.06)', marginBottom:8 }}>
+        {collapsed ? (
+          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
+            <div style={{ width:30, height:30, background:'linear-gradient(135deg,#4ecdc4,#ff6b9d)',
+              borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', fontSize:14 }}>⚒</div>
+            <button onClick={()=>setCollapsed(false)} style={{
+              background:'rgba(78,205,196,0.2)', border:'1px solid rgba(78,205,196,0.5)',
+              borderRadius:6, color:'#4ecdc4', cursor:'pointer', padding:'4px 6px',
+              fontSize:14, lineHeight:1, fontWeight:700, width:'100%' }}>›</button>
+          </div>
+        ) : (
+          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+            <div style={{ width:30, height:30, background:'linear-gradient(135deg,#4ecdc4,#ff6b9d)',
+              borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, flexShrink:0 }}>⚒</div>
+            <div style={{flex:1,minWidth:0}}>
+              <div style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:13, fontWeight:700, whiteSpace:'nowrap' }}>
+                DICKEN<span style={{ color:'#4ecdc4' }}>DOCK</span>
+              </div>
             </div>
-          </div>}
-          <button onClick={()=>setCollapsed(v=>!v)} style={{
-            background:'rgba(78,205,196,0.15)', border:'1px solid rgba(78,205,196,0.35)',
-            borderRadius:6, color:'#4ecdc4', cursor:'pointer', padding:'4px 8px', flexShrink:0,
-            fontSize:14, lineHeight:1, fontWeight:700 }} title={collapsed?'Ausklappen':'Einklappen'}>
-            {collapsed ? '›' : '‹'}
-          </button>
-        </div>
+            <button onClick={()=>setCollapsed(true)} style={{
+              background:'rgba(78,205,196,0.15)', border:'1px solid rgba(78,205,196,0.4)',
+              borderRadius:6, color:'#4ecdc4', cursor:'pointer', padding:'4px 8px', flexShrink:0,
+              fontSize:14, lineHeight:1, fontWeight:700 }}>‹</button>
+          </div>
+        )}
       </div>
       <nav style={{ flex:1, padding:'0 8px' }}>
         <NavBtn item={{ id:'dashboard', Icon:HomeIcon, label:'Dashboard' }} />
@@ -724,7 +733,7 @@ function AdminPanel({ toast, mobile }) {
         ))}
       </div>
 
-      {section === 'profil' && <>
+      {section === 'profil' && <div>
       <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,
@@ -777,9 +786,9 @@ function AdminPanel({ toast, mobile }) {
         </button>
       </Sec>
 
-      </>}
+      </div>}
 
-      {section === 'backup' && <>
+      {section === 'backup' && <div>
       <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.
@@ -798,7 +807,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>}
     </div>
   );
 }
diff --git a/frontend/src/lib.js b/frontend/src/lib.js
index 584a3c1..66788ea 100644
--- a/frontend/src/lib.js
+++ b/frontend/src/lib.js
@@ -40,7 +40,7 @@ export const S = {
   },
   // Abschnitts-Überschrift
   head: {
-    color: 'rgba(255,255,255,0.3)', fontSize: 10,
+    color: 'rgba(255,255,255,0.6)', fontSize: 10,
     fontFamily: 'monospace', letterSpacing: 2, marginBottom: 14,
   },
 };