From ab20bd764b67e015e73b3957c6229e11c4bcecd3 Mon Sep 17 00:00:00 2001
From: Mathis Kirchner <mathis.kirchner.mk@gmail.com>
Date: Sun, 11 Jan 2026 11:30:00 +0100
Subject: [PATCH] implement draft blur navbar

---
 .../main_menu/custom_navigation_bar.dart      | 61 ++++++++++++++++---
 1 file changed, 53 insertions(+), 8 deletions(-)

diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart
index 9c5c846..d3b7007 100644
--- a/lib/presentation/views/main_menu/custom_navigation_bar.dart
+++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart
@@ -73,14 +73,59 @@ class _CustomNavigationBarState extends State<CustomNavigationBar>
       backgroundColor: CustomTheme.backgroundColor,
       body: tabs[currentIndex],
       extendBody: true,
-      bottomNavigationBar: ClipRRect(
-        child: BackdropFilter(
-          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
-          child: Container(
-            decoration: BoxDecoration(
-              color: CustomTheme.boxColor.withValues(alpha: 0.8),
+      bottomNavigationBar: SizedBox(
+        height: 70 + MediaQuery.of(context).padding.bottom,
+        child: Stack(
+          children: [
+            // Dynamisch generierte Blur-Layer für ultra-smooth Übergang
+            ...List.generate(35, (index) {
+              // Verwende kubische Kurve für noch natürlicheren, weicheren Übergang
+              final progress = index / 34.0; // 0.0 bis 1.0
+              final cubic = progress * progress * progress; // Kubische Kurve
+              final blurStrength = 0.5 + (cubic * 50.0); // Sehr sanft von 0.5 bis 50.5
+
+              // Höhe geht jetzt komplett von 100% bis 0% (ganz nach unten)
+              // Mit extra Dichte am unteren Ende für weicheren Übergang
+              final heightFactor = index < 25
+                  ? 1.0 - (progress * 0.7)  // Erste 25 Layer: 100% bis 30%
+                  : 0.3 - ((index - 25) / 34.0); // Letzte 10 Layer: 30% bis 0% (dichter)
+
+              return Positioned(
+                left: 0,
+                right: 0,
+                bottom: 0,
+                height: (70 + MediaQuery.of(context).padding.bottom) * heightFactor.clamp(0.05, 1.0),
+                child: ClipRect(
+                  child: BackdropFilter(
+                    filter: ImageFilter.blur(
+                      sigmaX: blurStrength,
+                      sigmaY: blurStrength,
+                    ),
+                    child: Container(
+                      color: Colors.transparent,
+                    ),
+                  ),
+                ),
+              );
+            }),
+            // Gradient-Overlay
+            Positioned.fill(
+              child: Container(
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.bottomCenter,
+                    end: Alignment.topCenter,
+                    colors: [
+                      CustomTheme.boxColor.withValues(alpha: 1),
+                      CustomTheme.boxColor.withValues(alpha: 0.0),
+                    ],
+                    stops: const [0.4, 1],
+                  ),
+                ),
+              ),
             ),
-            child: SafeArea(
+            // Navbar-Inhalt
+            SafeArea(
               child: SizedBox(
                 height: 70,
                 child: Row(
@@ -118,7 +163,7 @@ class _CustomNavigationBarState extends State<CustomNavigationBar>
                 ),
               ),
             ),
-          ),
+          ],
         ),
       ),
     );