fix: Nav - Scroll und einklappbare Gruppen wiederhergestellt

frontend/src/App.jsx

@@ -158,6 +158,8 @@ function Login({ onLogin }) {
 function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns=0 }) {
   const [appsOpen, setAppsOpen] = useState(true);
   const [collapsed, setCollapsed] = useState(false);
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+  const toggleGroup = (group) => setCollapsedGroups(prev => ({ ...prev, [group]: !prev[group] }));
 
   const NavBtn = ({ item, sub=false }) => {
     const ic = active===item.id ? '#4ecdc4' : 'rgba(255,255,255,0.55)';
@@ -228,7 +230,7 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns
           </div>
         )}
       </div>
-      <nav style={{ flex:1, padding:'0 8px' }}>
+      <nav style={{ flex:1, padding:'0 8px', overflowY:'auto', overflowX:'hidden' }}>
         <NavBtn item={{ id:'dashboard', Icon:HomeIcon, label:'Dashboard' }} />
 
         {/* Apps Sektion mit Gruppenüberschriften */}
@@ -245,13 +247,26 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns
           {!collapsed && <span style={{ flex:1, color:'rgba(255,255,255,0.65)' }}>Apps</span>}
           {!collapsed && <ChevronIcon size={13} color="rgba(255,255,255,0.35)" dir={appsOpen?'down':'right'}/>}
         </button>
-        {appsOpen && getGroupedTools().map(([group, tools]) => (
+        {appsOpen && getGroupedTools().map(([group, tools]) => {
-          <div key={group}>
+          const isGroupCollapsed = !!collapsedGroups[group];
-            {!collapsed && <div style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
+          return (
-              letterSpacing:2, padding:'8px 12px 3px 12px' }}>{group.toUpperCase()}</div>}
+            <div key={group}>
-            {tools.map(t => <NavBtn key={t.id} item={t} sub />)}
+              {!collapsed && (
-          </div>
+                <button onClick={() => toggleGroup(group)} style={{
-        ))}
+                  width:'100%', display:'flex', alignItems:'center', gap:4,
+                  background:'none', border:'none', cursor:'pointer',
+                  padding:'8px 12px 3px 12px',
+                }}>
+                  <span style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace', letterSpacing:2, flex:1, textAlign:'left' }}>
+                    {group.toUpperCase()}
+                  </span>
+                  <ChevronIcon size={10} color="rgba(78,205,196,0.5)" dir={isGroupCollapsed ? 'right' : 'down'} />
+                </button>
+              )}
+              {!isGroupCollapsed && tools.map(t => <NavBtn key={t.id} item={t} sub />)}
+            </div>
+          );
+        })}
 
         <NavBtn item={{ id:'admin', Icon:AdminIcon, label:'Einstellungen' }} />
       </nav>
@@ -276,6 +291,7 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns
 function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns=0 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [appsOpen, setAppsOpen] = useState(false);
+  const [mobileCollapsedGroups, setMobileCollapsedGroups] = useState({});
   const NAV_H = 56;
 
   const MI = ({Icon, icon, label, onClick, color='rgba(255,255,255,0.85)', dot=false}) => {
@@ -335,18 +351,26 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTur
     <>
       {/* Apps Sheet mit Gruppenüberschriften */}
       <Sheet open={appsOpen} onClose={()=>setAppsOpen(false)}>
-        <div style={{ paddingBottom:4 }}>
+        <div style={{ overflowY:'auto', maxHeight:'60vh', paddingBottom:8 }}>
-          {getGroupedTools().map(([group, tools]) => (
+          {getGroupedTools().map(([group, tools]) => {
-            <div key={group}>
+            const isGrpCollapsed = !!mobileCollapsedGroups[group];
-              <div style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
+            return (
-                letterSpacing:2, padding:'12px 20px 5px' }}>{group.toUpperCase()}</div>
+              <div key={group}>
-              {tools.map(t => (
+                <button onClick={() => setMobileCollapsedGroups(prev => ({ ...prev, [group]: !prev[group] }))}
-                <MI key={t.id} Icon={t.Icon}
+                  style={{ width:'100%', display:'flex', alignItems:'center', gap:6,
-                  label={t.label} dot={t.id==='gebietseroberung' && hexWarsTurns>0}
+                    background:'none', border:'none', cursor:'pointer', padding:'12px 20px 5px' }}>
-                  onClick={() => { setActive(t.id); setAppsOpen(false); }} />
+                  <span style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
-              ))}
+                    letterSpacing:2, flex:1, textAlign:'left' }}>{group.toUpperCase()}</span>
-            </div>
+                  <ChevronIcon size={10} color="rgba(78,205,196,0.5)" dir={isGrpCollapsed ? 'right' : 'down'} />
-          ))}
+                </button>
+                {!isGrpCollapsed && tools.map(t => (
+                  <MI key={t.id} Icon={t.Icon}
+                    label={t.label} dot={t.id==='gebietseroberung' && hexWarsTurns>0}
+                    onClick={() => { setActive(t.id); setAppsOpen(false); }} />
+                ))}
+              </div>
+            );
+          })}
         </div>
       </Sheet>