ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): make category navigation and section headers sticky with frosted glass effect

Browse Source
This commit is contained in:
AyrisAI
2026-08-20 02:59:24 +03:00
parent 89c2f62995
commit 4e65d3f708
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/PublicMenuClient.tsx
+14 -8
View File
@@ -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"
>
{/* 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,
}}
>
{/* Category Heading Banner */}
<div className="flex items-center justify-between border-b pb-2" style={{ 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