fix: Mobile-Optimierung v2 — Header-Controls stacken, Bottom-Nav Mehr-Menü, Split-Layouts responsiv

2026-07-07 21:35:59 +00:00 · 2026-07-07 21:35:59 +00:00 · cd6c73db24
commit cd6c73db24
parent beddb735b0
9 changed files with 261 additions and 100 deletions
--- a/client/src/components/layout/BottomNav.tsx
+++ b/client/src/components/layout/BottomNav.tsx
@ -1,9 +1,9 @@
 /**
 * BottomNav — Mobile Bottom Navigation
- * Zeigt die 5 wichtigsten Seiten als Icons
- * "Mehr" öffnet das volle Menü
+ * 5 primäre Tabs + "Mehr" Drawer für restliche 4 Seiten
 */

+import { useState } from 'react';
 import { Link } from 'wouter';
 import {
  LayoutDashboard,
@ -11,6 +11,12 @@ import {
  FileEdit,
  Calendar,
  BarChart2,
+  MoreHorizontal,
+  CheckSquare,
+  Megaphone,
+  Package,
+  Settings,
+  X,
 } from 'lucide-react';

 interface BottomNavProps {
@ -25,60 +31,161 @@ const primaryNav = [
  { label: 'Analytics', path: '/analytics', icon: BarChart2 },
 ];

-export function BottomNav({ currentPath }: BottomNavProps) {
-  return (
-    <nav
-      className="fixed bottom-0 left-0 right-0 flex items-center justify-around"
-      style={{
-        background: 'var(--atlas-surface)',
-        borderTop: '1px solid var(--atlas-border)',
-        height: '60px',
-        zIndex: 50,
-        paddingBottom: 'env(safe-area-inset-bottom)',
-      }}
-    >
-      {primaryNav.map(item => {
-        const isActive = item.path === '/'
-          ? currentPath === '/'
-          : currentPath.startsWith(item.path);
-        const Icon = item.icon;
+const moreNav = [
+  { label: 'Freigaben', path: '/approvals', icon: CheckSquare },
+  { label: 'Kampagnen', path: '/campaigns', icon: Megaphone },
+  { label: 'Produkte', path: '/products', icon: Package },
+  { label: 'Einstellungen', path: '/settings', icon: Settings },
+];

-        return (
-          <Link key={item.path} href={item.path}>
-            <div
-              className="flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded-lg transition-all"
-              style={{
-                minWidth: '56px',
-                color: isActive ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
-                background: isActive ? 'oklch(0.82 0.18 210 / 0.08)' : 'transparent',
-              }}
-            >
-              <Icon size={20} />
-              <span
+export function BottomNav({ currentPath }: BottomNavProps) {
+  const [moreOpen, setMoreOpen] = useState(false);
+
+  const isMoreActive = moreNav.some(item =>
+    item.path === '/' ? currentPath === '/' : currentPath.startsWith(item.path)
+  );
+
+  return (
+    <>
+      {/* More Drawer Overlay */}
+      {moreOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-50"
+            style={{ background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(4px)' }}
+            onClick={() => setMoreOpen(false)}
+          />
+          <div
+            className="fixed left-0 right-0 z-50 rounded-t-2xl"
+            style={{
+              bottom: '60px',
+              background: 'var(--atlas-surface)',
+              borderTop: '1px solid var(--atlas-border)',
+              animation: 'slideInUp 0.22s cubic-bezier(0.23,1,0.32,1)',
+            }}
+          >
+            {/* Handle */}
+            <div className="flex justify-center pt-3 pb-1">
+              <div className="w-10 h-1 rounded-full" style={{ background: 'var(--atlas-border)' }} />
+            </div>
+            {/* Header */}
+            <div className="flex items-center justify-between px-5 py-2">
+              <span className="text-xs font-semibold" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
+                WEITERE SEITEN
+              </span>
+              <button onClick={() => setMoreOpen(false)} style={{ color: 'var(--muted-foreground)' }}>
+                <X size={16} />
+              </button>
+            </div>
+            {/* Items */}
+            <div className="grid grid-cols-4 gap-1 px-4 pb-6">
+              {moreNav.map(item => {
+                const isActive = item.path === '/'
+                  ? currentPath === '/'
+                  : currentPath.startsWith(item.path);
+                const Icon = item.icon;
+                return (
+                  <Link key={item.path} href={item.path} onClick={() => setMoreOpen(false)}>
+                    <div
+                      className="flex flex-col items-center justify-center gap-1.5 py-3 rounded-xl transition-all"
+                      style={{
+                        background: isActive ? 'oklch(0.82 0.18 210 / 0.12)' : 'var(--atlas-navy)',
+                        border: `1px solid ${isActive ? 'oklch(0.82 0.18 210 / 0.3)' : 'var(--atlas-border)'}`,
+                        color: isActive ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
+                      }}
+                    >
+                      <Icon size={22} />
+                      <span style={{ fontSize: '0.6rem', fontFamily: 'var(--font-body)', fontWeight: isActive ? 600 : 400 }}>
+                        {item.label}
+                      </span>
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Bottom Nav Bar */}
+      <nav
+        className="fixed bottom-0 left-0 right-0 flex items-center justify-around"
+        style={{
+          background: 'var(--atlas-surface)',
+          borderTop: '1px solid var(--atlas-border)',
+          height: '60px',
+          zIndex: 50,
+          paddingBottom: 'env(safe-area-inset-bottom)',
+        }}
+      >
+        {primaryNav.map(item => {
+          const isActive = item.path === '/'
+            ? currentPath === '/'
+            : currentPath.startsWith(item.path);
+          const Icon = item.icon;
+
+          return (
+            <Link key={item.path} href={item.path}>
+              <div
+                className="flex flex-col items-center justify-center gap-0.5 px-2 py-1 rounded-lg transition-all relative"
                style={{
-                  fontSize: '0.6rem',
-                  fontFamily: 'var(--font-body)',
-                  letterSpacing: '0.02em',
-                  fontWeight: isActive ? 600 : 400,
+                  minWidth: '52px',
+                  color: isActive ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
                }}
              >
-                {item.label}
-              </span>
-              {isActive && (
-                <div
-                  className="absolute bottom-0 rounded-full"
+                <Icon size={20} strokeWidth={isActive ? 2.2 : 1.7} />
+                <span
                  style={{
-                    width: '4px',
-                    height: '4px',
-                    background: 'var(--atlas-cyan)',
-                    boxShadow: '0 0 6px var(--atlas-cyan)',
+                    fontSize: '0.58rem',
+                    fontFamily: 'var(--font-body)',
+                    letterSpacing: '0.01em',
+                    fontWeight: isActive ? 600 : 400,
                  }}
-                />
-              )}
-            </div>
-          </Link>
-        );
-      })}
-    </nav>
+                >
+                  {item.label}
+                </span>
+                {isActive && (
+                  <div
+                    className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 rounded-full"
+                    style={{
+                      width: '20px',
+                      height: '2px',
+                      background: 'var(--atlas-cyan)',
+                      boxShadow: '0 0 8px var(--atlas-cyan)',
+                    }}
+                  />
+                )}
+              </div>
+            </Link>
+          );
+        })}
+
+        {/* Mehr Button */}
+        <button
+          onClick={() => setMoreOpen(!moreOpen)}
+          className="flex flex-col items-center justify-center gap-0.5 px-2 py-1 rounded-lg transition-all"
+          style={{
+            minWidth: '52px',
+            color: isMoreActive ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
+          }}
+        >
+          <MoreHorizontal size={20} strokeWidth={isMoreActive ? 2.2 : 1.7} />
+          <span style={{ fontSize: '0.58rem', fontFamily: 'var(--font-body)', fontWeight: isMoreActive ? 600 : 400 }}>
+            Mehr
+          </span>
+          {isMoreActive && (
+            <div
+              className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 rounded-full"
+              style={{
+                width: '20px',
+                height: '2px',
+                background: 'var(--atlas-cyan)',
+                boxShadow: '0 0 8px var(--atlas-cyan)',
+              }}
+            />
+          )}
+        </button>
+      </nav>
+    </>
  );
 }
--- a/client/src/index.css
+++ b/client/src/index.css
@ -643,3 +643,55 @@
    flex-wrap: wrap;
  }
 }
+
+/* ── Mobile Page Header: stacks vertically on small screens ── */
+.atlas-page-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+@media (max-width: 640px) {
+  .atlas-page-header-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  .atlas-page-header-row .atlas-header-controls {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+  .atlas-page-header-row .atlas-header-controls > * {
+    flex: 1 1 auto;
+    min-width: 80px;
+  }
+  /* Compact page title on mobile */
+  .atlas-page-header-row h1 {
+    font-size: 1.25rem !important;
+  }
+  .atlas-page-header-row p {
+    font-size: 0.75rem !important;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+/* ── Split layouts: stack on mobile ── */
+.atlas-split-layout {
+  display: grid;
+  gap: 1rem;
+}
+@media (min-width: 768px) {
+  .atlas-split-layout {
+    grid-template-columns: 1fr 16rem;
+  }
+}
+@media (max-width: 767px) {
+  .atlas-split-layout {
+    grid-template-columns: 1fr;
+  }
+}
--- a/client/src/pages/Analytics.tsx
+++ b/client/src/pages/Analytics.tsx
@ -78,30 +78,32 @@ export default function Analytics() {
  return (
    <div className="p-5 animate-fade-in-up space-y-4">
      {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
        <div>
          <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Analytics</h1>
          <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Verstehe Reichweite, Performance und Affiliate-Umsätze im Detail.</p>
        </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Juni 2025</span>
          </div>
-          {['7 Tage', '30 Tage', 'Benutzerdefiniert'].map(p => (
-            <button
-              key={p}
-              onClick={() => setTimePeriod(p)}
-              className="text-xs px-3 py-1.5 rounded transition-all"
-              style={{
-                background: timePeriod === p ? 'var(--atlas-cyan)' : 'var(--atlas-surface)',
-                color: timePeriod === p ? 'var(--atlas-navy)' : 'var(--muted-foreground)',
-                border: `1px solid ${timePeriod === p ? 'var(--atlas-cyan)' : 'var(--atlas-border)'}`,
-                fontWeight: timePeriod === p ? 600 : 400,
-              }}
-            >
-              {p}
-            </button>
-          ))}
+          <div className="flex gap-1">
+            {['7 Tage', '30 Tage', 'Benutzerdefiniert'].map(p => (
+              <button
+                key={p}
+                onClick={() => setTimePeriod(p)}
+                className="text-xs px-2 py-1.5 rounded transition-all"
+                style={{
+                  background: timePeriod === p ? 'var(--atlas-cyan)' : 'var(--atlas-surface)',
+                  color: timePeriod === p ? 'var(--atlas-navy)' : 'var(--muted-foreground)',
+                  border: `1px solid ${timePeriod === p ? 'var(--atlas-cyan)' : 'var(--atlas-border)'}`,
+                  fontWeight: timePeriod === p ? 600 : 400,
+                }}
+              >
+                {p}
+              </button>
+            ))}
+          </div>
        </div>
      </div>

--- a/client/src/pages/Approvals.tsx
+++ b/client/src/pages/Approvals.tsx
@ -66,12 +66,12 @@ export default function Approvals() {
  return (
    <div className="p-5 animate-fade-in-up space-y-4">
      {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
        <div>
          <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Freigaben</h1>
          <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Prüfe, priorisiere und genehmige Inhalte vor der Veröffentlichung.</p>
        </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
          <span className="text-xs px-2 py-1 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)' }}>26. Mai 2025</span>
          <select className="text-xs px-2 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)' }}>
            <option>Alle Plattformen</option>
@ -122,9 +122,9 @@ export default function Approvals() {
        ))}
      </div>

-      <div className="flex gap-4">
+      <div className="atlas-split-layout">
        {/* Queue Table */}
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0">
          <div className="atlas-card overflow-hidden">
            <div className="p-3" style={{ borderBottom: '1px solid var(--atlas-border)' }}>
              <span className="text-sm font-semibold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>
@ -210,7 +210,7 @@ export default function Approvals() {
        </div>

        {/* Right: Preview + Audit */}
-        <div className="w-64 flex-shrink-0 space-y-3">
+        <div className="space-y-3">
          {/* Schnellvorschau */}
          <div className="atlas-card overflow-hidden">
            <div className="p-3" style={{ borderBottom: '1px solid var(--atlas-border)' }}>
--- a/client/src/pages/Calendar.tsx
+++ b/client/src/pages/Calendar.tsx
@ -90,7 +90,7 @@ export default function Calendar() {
  return (
    <div className="p-5 animate-fade-in-up space-y-4">
      {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
        <div>
          <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>
            Kalender & Freigaben
@ -99,12 +99,12 @@ export default function Calendar() {
            Plane, manage und genehmige Content über alle Plattformen.
          </p>
        </div>
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
-            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Jun 2025</span>
+        <div className="atlas-header-controls">
+          <div className="flex items-center gap-1 px-2 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
+            <button className="atlas-btn-ghost p-0.5"><ChevronLeft size={13} /></button>
+            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Jun</span>
+            <button className="atlas-btn-ghost p-0.5"><ChevronRight size={13} /></button>
          </div>
-          <button className="atlas-btn-ghost p-1.5"><ChevronLeft size={14} /></button>
-          <button className="atlas-btn-ghost p-1.5"><ChevronRight size={14} /></button>
          <div className="flex rounded overflow-hidden" style={{ border: '1px solid var(--atlas-border)' }}>
            {(['Woche', 'Monat'] as const).map(v => (
              <button
--- a/client/src/pages/Campaigns.tsx
+++ b/client/src/pages/Campaigns.tsx
@ -63,21 +63,21 @@ export default function Campaigns() {
  return (
    <div className="p-5 animate-fade-in-up space-y-4">
      {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
        <div>
          <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Kampagnen</h1>
          <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Plane, bündele und steuere kanalübergreifende Content-Offensiven.</p>
        </div>
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
-            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Jun 2025</span>
+        <div className="atlas-header-controls">
+          <div className="flex items-center gap-1 px-2 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}>
+            <button className="atlas-btn-ghost p-0.5"><ChevronLeft size={13} /></button>
+            <span className="text-xs" style={{ color: 'var(--foreground)' }}>26. Mai – 1. Jun</span>
+            <button className="atlas-btn-ghost p-0.5"><ChevronRight size={13} /></button>
          </div>
-          <button className="atlas-btn-ghost p-1.5"><ChevronLeft size={14} /></button>
-          <button className="atlas-btn-ghost p-1.5"><ChevronRight size={14} /></button>
          <select className="text-xs px-2 py-1.5 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--foreground)' }}>
            <option>Diese Woche</option>
          </select>
-          <button className="atlas-btn-primary text-xs gap-1.5"><Plus size={13} /> Neue Kampagne</button>
+          <button className="atlas-btn-primary text-xs gap-1.5"><Plus size={13} /> Neu</button>
        </div>
      </div>

--- a/client/src/pages/Products.tsx
+++ b/client/src/pages/Products.tsx
@ -63,12 +63,12 @@ export default function Products() {
  return (
    <div className="p-5 animate-fade-in-up space-y-4">
      {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
        <div>
          <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Produkte</h1>
          <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Verwalte Produktdaten, Affiliate-Links und Content-Potenziale.</p>
        </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
          <span className="text-xs px-2 py-1 rounded" style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)', color: 'var(--muted-foreground)' }}>7 Tage</span>
        </div>
      </div>
@ -105,24 +105,24 @@ export default function Products() {
            {tab}
          </button>
        ))}
-        <div className="ml-auto flex items-center gap-2">
-          <div className="relative">
+        <div className="flex items-center gap-2 w-full sm:w-auto sm:ml-auto">
+          <div className="relative flex-1 sm:flex-none">
            <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2" style={{ color: 'var(--muted-foreground)' }} />
            <input
-              className="atlas-input pl-7 text-xs"
+              className="atlas-input pl-7 text-xs w-full"
              placeholder="Produkte suchen..."
              value={search}
              onChange={e => setSearch(e.target.value)}
-              style={{ width: '180px' }}
+              style={{ minWidth: '140px' }}
            />
          </div>
-          <button className="atlas-btn-ghost p-1.5"><Filter size={13} /></button>
+          <button className="atlas-btn-ghost p-1.5 flex-shrink-0"><Filter size={13} /></button>
        </div>
      </div>

-      <div className="flex gap-4">
+      <div className="atlas-split-layout">
        {/* Product Table */}
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0">
          <div className="atlas-card overflow-hidden">
            <div className="atlas-table-scroll"><table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
@ -219,7 +219,7 @@ export default function Products() {
        </div>

        {/* Right Sidebar */}
-        <div className="w-56 flex-shrink-0 space-y-3">
+        <div className="space-y-3">
          <div className="atlas-card p-3">
            <div className="text-xs font-semibold mb-2" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Top Produkte für Content</div>
            <div className="flex gap-2 mb-2">
--- a/client/src/pages/Settings.tsx
+++ b/client/src/pages/Settings.tsx
@ -56,12 +56,12 @@ export default function Settings() {
  return (
    <div className="p-5 animate-fade-in-up space-y-4">
      {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
        <div>
          <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>Einstellungen</h1>
          <p className="text-sm mt-0.5" style={{ color: 'var(--muted-foreground)' }}>Verwalte Kanäle, Integrationen, Branding und Systemregeln.</p>
        </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
          <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: 'var(--font-mono)' }}>26. Mai 2025, 09:41</span>
          <button className="atlas-btn-ghost p-1.5"><RefreshCw size={13} /></button>
        </div>
--- a/client/src/pages/WarRoom.tsx
+++ b/client/src/pages/WarRoom.tsx
@ -176,7 +176,7 @@ export default function WarRoom() {
  return (
    <div className="p-5 space-y-5 animate-fade-in-up">
      {/* Page Header */}
-      <div className="flex items-center justify-between">
+      <div className="atlas-page-header-row">
        <div>
          <h1 className="text-xl font-bold" style={{ fontFamily: 'var(--font-display)', color: 'var(--foreground)' }}>
            War Room
@ -185,7 +185,7 @@ export default function WarRoom() {
            Zentrale Übersicht & Steuerung deiner Content-Operationen
          </p>
        </div>
-        <div className="flex items-center gap-2">
+        <div className="atlas-header-controls">
          <div 
            className="flex items-center gap-1.5 px-3 py-1.5 rounded"
            style={{ background: 'var(--atlas-surface)', border: '1px solid var(--atlas-border)' }}