feat: sticky header with stepper for step 3, sidebar aligns under header
All checks were successful
Staging Build / build (push) Successful in 2m49s

This commit is contained in:
DanielS
2026-07-10 15:58:14 +02:00
parent 21550f1389
commit d37a6b4348
2 changed files with 14 additions and 6 deletions

View File

@@ -663,10 +663,19 @@ export function OrderWizard({
}
return (
<div className="max-w-5xl mx-auto py-12 px-4">
{/* Progress Stepper */}
{step !== 3 && (
<div className="max-w-5xl mx-auto px-4">
{/* Sticky Header — Stepper für Step 3, normaler Stepper für andere Steps */}
{step === 3 ? (
<div className="sticky top-0 z-30 w-full bg-slate-950/80 backdrop-blur-md pt-6 pb-4 border-b border-white/5 mb-6">
<div className="text-center mb-4">
<p className="text-slate-400 text-sm">Schritt 3 von 4 Software konfigurieren</p>
</div>
<ProgressStepper step={step} basketItemsCount={basketItems.length} />
</div>
) : (
<div className="pt-12">
<ProgressStepper step={step} basketItemsCount={basketItems.length} />
</div>
)}
<AnimatePresence mode="wait">
@@ -732,7 +741,6 @@ export function OrderWizard({
exit={{ opacity: 0, x: -20 }}
className="space-y-6"
>
<ProgressStepper step={step} basketItemsCount={basketItems.length} />
<StepSoftware
visibleCategories={visibleCategories}
products={products}

View File

@@ -69,7 +69,7 @@ export function SummarySidebar({
prevStep,
}: SummarySidebarProps) {
return (
<div className="sticky top-[24vh] max-h-[70vh] flex flex-col">
<div className="sticky top-32 max-h-[70vh] flex flex-col">
<Card className="glass-dark border-primary/20 backdrop-blur-lg bg-slate-950/75 flex flex-col max-h-[70vh]">
<CardHeader className="shrink-0">
<CardTitle className="text-white">Zusammenfassung</CardTitle>