meshkee-websites/nini-naderi
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the category mega menu text-only and fully frosted.

Browse Source 
Hide page content behind the menu with a near-solid blur panel.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-13 14:22:15 +03:30
co-authored by Cursor
parent 39d85512c5
commit 1a2b62463e
2 changed files with 11 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+4 -4
View File
@@ -82,10 +82,10 @@ body {
} }
.glass-box { .glass-box {
background: rgb(255 255 255 / 0.58); background: rgb(255 255 255 / 0.42);
backdrop-filter: blur(18px); backdrop-filter: blur(36px);
-webkit-backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(36px);
border: 1px solid rgb(255 255 255 / 0.72); border: 1px solid rgb(255 255 255 / 0.55);
} }
.font-display { .font-display {
src/components/Header.tsx
+7 -15
View File
@@ -5,7 +5,6 @@ import { useState } from "react";
import { categories, navLinks } from "@/data/content"; import { categories, navLinks } from "@/data/content";
import { toFaDigits } from "@/lib/format"; import { toFaDigits } from "@/lib/format";
import { IconBag, IconChevronDown, IconClose, IconHeart, IconMenu, IconSearch, IconUser } from "./Icons"; import { IconBag, IconChevronDown, IconClose, IconHeart, IconMenu, IconSearch, IconUser } from "./Icons";
import { Placeholder } from "./Placeholder";
export function Header() { export function Header() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@@ -19,7 +18,7 @@ export function Header() {
}; };
return ( return (
<header className="sticky top-0 z-40 border-b border-white/60 bg-white/55 backdrop-blur-xl"> <header className="sticky top-0 z-40 border-b border-white/50 bg-white/40 backdrop-blur-2xl">
<div className="container-nn"> <div className="container-nn">
<div className="flex h-[72px] items-center gap-3"> <div className="flex h-[72px] items-center gap-3">
<button <button
@@ -158,8 +157,8 @@ export function Header() {
function MegaMenu({ onPick }: { onPick: () => void }) { function MegaMenu({ onPick }: { onPick: () => void }) {
return ( return (
<div className="absolute top-full right-0 z-50 w-[min(56rem,calc(100vw-2rem))] pt-2"> <div className="absolute top-full right-0 z-50 w-[min(40rem,calc(100vw-2rem))] pt-2">
<div className="glass-box rounded-3xl p-5 shadow-card"> <div className="rounded-3xl border border-white/80 bg-white/95 p-5 shadow-card backdrop-blur-[80px]">
<div className="mb-4 flex items-end justify-between"> <div className="mb-4 flex items-end justify-between">
<div> <div>
<p className="font-display text-xs text-cyan-600">Categories</p> <p className="font-display text-xs text-cyan-600">Categories</p>
@@ -169,23 +168,16 @@ function MegaMenu({ onPick }: { onPick: () => void }) {
مشاهده همه مشاهده همه
</a> </a>
</div> </div>
<div className="grid grid-cols-4 gap-3"> <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
{categories.map((category) => ( {categories.map((category) => (
<a <a
key={category.id} key={category.id}
href="#categories" href="#categories"
onClick={onPick} onClick={onPick}
className="rounded-2xl bg-white/70 p-2 text-center transition hover:-translate-y-0.5 hover:bg-white" className="rounded-2xl px-3 py-3 text-right transition hover:bg-white/45"
> >
<Placeholder <p className="text-sm font-bold text-ink">{category.title}</p>
src={category.image} <p className="mt-1 text-[11px] text-muted">{toFaDigits(category.count)} مدل</p>
alt={category.title}
width={160}
height={160}
rounded="rounded-xl"
/>
<p className="mt-2 text-xs font-bold text-ink">{category.title}</p>
<p className="text-[11px] text-muted">{toFaDigits(category.count)} مدل</p>
</a> </a>
))} ))}
</div> </div>