From 4e65d3f708a3160e1afc837b82cbbf47222d4f01 Mon Sep 17 00:00:00 2001
From: AyrisAI <ayris@ayris.tech>
Date: Thu, 20 Aug 2026 02:59:24 +0300
Subject: [PATCH] feat(web): make category navigation and section headers
 sticky with frosted glass effect

---
 apps/web/src/components/PublicMenuClient.tsx | 22 +++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/PublicMenuClient.tsx b/apps/web/src/components/PublicMenuClient.tsx
index dc3ff63..5d95862 100644
--- a/apps/web/src/components/PublicMenuClient.tsx
+++ b/apps/web/src/components/PublicMenuClient.tsx
@@ -356,9 +356,9 @@ export function PublicMenuClient({
         {/* Sticky Category Navigation Bar */}
         {categories.length > 0 && !searchQuery && (
           <nav
-            className="sticky top-0 z-30 px-4 py-3 backdrop-blur-md border-b transition-colors"
+            className="sticky top-0 z-40 px-4 py-3 backdrop-blur-xl border-b shadow-sm transition-all"
             style={{
-              backgroundColor: `${theme.config.background}E6`,
+              backgroundColor: `${theme.config.background}F2`,
               borderColor: theme.cardBorder,
             }}
           >
@@ -426,25 +426,31 @@ export function PublicMenuClient({
               <section
                 key={category.id}
                 id={`category-${category.id}`}
-                className="scroll-mt-24 space-y-3.5"
+                className="scroll-mt-28 space-y-3.5"
               >
-                {/* Category Heading Banner */}
-                <div className="flex items-center justify-between border-b pb-2" style={{ borderColor: theme.cardBorder }}>
+                {/* Sticky Category Heading Banner */}
+                <div
+                  className="sticky top-[58px] z-20 flex items-center justify-between py-2.5 px-3 -mx-3 rounded-2xl backdrop-blur-xl border-b transition-all shadow-sm"
+                  style={{
+                    backgroundColor: `${theme.config.background}F2`,
+                    borderColor: theme.cardBorder,
+                  }}
+                >
                   <div>
                     <h2
-                      className="text-lg font-bold tracking-tight"
+                      className="text-base sm:text-lg font-extrabold tracking-tight"
                       style={{ color: theme.config.primaryColor }}
                     >
                       {category.name}
                     </h2>
                     {category.description && (
-                      <p className="text-xs mt-0.5" style={{ color: theme.textSecondary }}>
+                      <p className="text-xs mt-0.5 line-clamp-1" style={{ color: theme.textSecondary }}>
                         {category.description}
                       </p>
                     )}
                   </div>
                   <span
-                    className="text-[11px] font-semibold px-2.5 py-0.5 rounded-full"
+                    className="text-[11px] font-bold px-2.5 py-0.5 rounded-full shadow-sm"
                     style={{ backgroundColor: theme.badgeBg, color: theme.badgeText }}
                   >
                     {category.menu_items.length} Ürün