Wartung: UI/UX-Politur fuer MC2.0 (Sidebar-Gruppierung, Kachel-Livedaten, Memory-Splitscreen und Mobile-Touch)

2026-07-09 11:58:16 +02:00
parent 3572667e08
commit eb3caf6476
10 changed files with 417 additions and 279 deletions
@@ -123,25 +123,42 @@ export default function App() {
        </div>
        
        <nav className="flex-1 space-y-1 px-3 py-4 overflow-y-auto">
-          {NAV.map((item) => (
-            <a
-              key={item.id}
-              href={`#${item.id}`}
-              aria-current={view === item.id ? "page" : undefined}
-              className={cn(
-                "flex w-full items-center rounded-md text-sm transition-all cursor-pointer",
-                sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2",
-                view === item.id
-                  ? "bg-primary/15 text-primary shadow-sm shadow-primary/5"
-                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
-              )}
-              title={sidebarCollapsed ? item.label : undefined}
-              aria-label={sidebarCollapsed ? item.label : undefined}
-            >
-              <item.icon className="h-4.5 w-4.5 shrink-0" aria-hidden="true" />
-              {!sidebarCollapsed && <span className="truncate">{item.label}</span>}
-            </a>
-          ))}
+          {(() => {
+            let lastGroup: string | null = null
+            return NAV.map((item) => {
+              const showGroupHeader = item.group !== lastGroup
+              lastGroup = item.group
+              return (
+                <div key={item.id} className="space-y-1">
+                  {showGroupHeader && (
+                    sidebarCollapsed ? (
+                      lastGroup !== NAV[0].group && <div className="my-3 border-t border-border/30" />
+                    ) : (
+                      <div className="mt-5 mb-1.5 px-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground/40 first:mt-0 select-none">
+                        {item.group}
+                      </div>
+                    )
+                  )}
+                  <a
+                    href={`#${item.id}`}
+                    aria-current={view === item.id ? "page" : undefined}
+                    className={cn(
+                      "flex w-full items-center rounded-md text-sm transition-all cursor-pointer",
+                      sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2",
+                      view === item.id
+                        ? "bg-primary/15 text-primary shadow-sm shadow-primary/5"
+                        : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                    )}
+                    title={sidebarCollapsed ? item.label : undefined}
+                    aria-label={sidebarCollapsed ? item.label : undefined}
+                  >
+                    <item.icon className="h-4.5 w-4.5 shrink-0" aria-hidden="true" />
+                    {!sidebarCollapsed && <span className="truncate">{item.label}</span>}
+                  </a>
+                </div>
+              )
+            })
+          })()}
        </nav>

        <div className={cn("py-3 text-xs text-muted-foreground border-t border-border/40 shrink-0", sidebarCollapsed ? "px-2 text-center" : "px-5")}>