new desigh test2 #deploy

src/features/event/components/EventFormInline.tsx

@@ -522,6 +522,32 @@ const EventFormInline: React.FC<EventFormInlineProps> = ({ onSuccess, onCancel,
     );
   };
 
+  const MobileTabButton = ({
+    tab,
+    label,
+    Icon,
+  }: {
+    tab: 'stammdaten' | 'promotion' | 'artists';
+    label: string;
+    Icon: React.ComponentType<{ className?: string }>;
+  }) => {
+    const isActive = activeTab === tab;
+    return (
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className={`flex-1 h-10 justify-center gap-2 rounded-xl transition-colors ${
+          isActive ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-primary/5 hover:text-foreground'
+        }`}
+        onClick={() => setActiveTab(tab)}
+      >
+        <Icon className="h-4 w-4" />
+        <span className="text-sm">{label}</span>
+      </Button>
+    );
+  };
+
   return (
     <div className="rounded-lg border p-4">
       <form onSubmit={handleSubmit} className="relative">
@@ -537,20 +563,32 @@ const EventFormInline: React.FC<EventFormInlineProps> = ({ onSuccess, onCancel,
           {error && <div className="text-sm text-destructive pt-1">{error}</div>}
         </div>
 
-        <div className="flex gap-4 pt-4">
+        {isMobile && (
-          <aside className={`sticky top-20 self-start shrink-0 ${sidebarWidthClass} transition-[width] duration-200`}>
+          <div className="sticky top-[52px] z-20 -mx-4 px-4 py-2 border-b bg-background">
-            <div className="rounded-2xl border bg-background p-2 shadow-sm">
+            <div className="flex gap-2">
-              {navExpanded && <div className="text-xs text-muted-foreground px-2 pb-2">Menü</div>}
+              <MobileTabButton tab="stammdaten" label="Event" Icon={CalendarDays} />
-
+              <MobileTabButton tab="promotion" label="Promotion" Icon={Megaphone} />
-              <div className="space-y-1">
+              <MobileTabButton tab="artists" label="Künstler" Icon={Users} />
-                <NavItemButton tab="stammdaten" label="Stammdaten" Icon={CalendarDays} />
-                <NavItemButton tab="promotion" label="Promotion" Icon={Megaphone} />
-                <NavItemButton tab="artists" label="Künstler" Icon={Users} />
-              </div>
             </div>
-          </aside>
+          </div>
+        )}
 
-          <div className="flex-1 min-w-0">
+        <div className={isMobile ? 'pt-4' : 'flex gap-4 pt-4'}>
+          {!isMobile && (
+            <aside className={`sticky top-20 self-start shrink-0 ${sidebarWidthClass} transition-[width] duration-200`}>
+              <div className="rounded-2xl border bg-background p-2 shadow-sm">
+                {navExpanded && <div className="text-xs text-muted-foreground px-2 pb-2">Menü</div>}
+
+                <div className="space-y-1">
+                  <NavItemButton tab="stammdaten" label="Stammdaten" Icon={CalendarDays} />
+                  <NavItemButton tab="promotion" label="Promotion" Icon={Megaphone} />
+                  <NavItemButton tab="artists" label="Künstler" Icon={Users} />
+                </div>
+              </div>
+            </aside>
+          )}
+
+          <div className={isMobile ? '' : 'flex-1 min-w-0'}>
             {activeTab === 'stammdaten' && (
               <EventStammdatenSection
                 form={form}