amer2004/SweetHome
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed NavButtom
All checks were successful
Build frontend / build (push) Successful in 59s
Details

Browse Source
This commit is contained in:
hamzaobed7
2026-08-08 14:22:34 +03:00
parent e3e9aa81a8
commit 793ec51c9a
1 changed files with 48 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/components/BottomNav.js
View File

@ -39,27 +39,66 @@ export default function BottomNav({ isOwner, isOwnerOrAgent }) {
};
return (
<div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center pb-4 pt-2 pointer-events-none">
<nav className="bg-gray-50 rounded-3xl px-4 py-2 shadow-[0_4px_24px_rgba(251,146,60,0.25)] pointer-events-auto">
<div className="flex items-center justify-center gap-1">
<div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center px-4 pb-3 pt-4 pointer-events-none">
<nav
className="
w-fit max-w-full
rounded-3xl
bg-gray-50
px-2 py-2 sm:px-3
shadow-[0_4px_24px_rgba(251,146,60,0.25)]
pointer-events-auto
"
>
<div className="flex items-center justify-center gap-0.5 sm:gap-1 overflow-hidden ">
{items.map((it) => {
const Icon = it.icon;
const active = isActive(it.href);
return (
<Link
key={it.href}
href={it.href}
className={`relative flex flex-col items-center justify-center px-3 py-2 rounded-xl transition-all duration-200 ease-out hover:shadow-md hover:bg-white/80 ${active ? "bg-white shadow-sm text-amber-600" : "text-gray-700 hover:text-amber-600"}`}
className={`
relative
flex
min-w-[58px] sm:min-w-[0px]
flex-col
items-center
justify-center
rounded-xl
px-2 py-1.5
sm:px-1 sm:py-4
transition-all
duration-200
ease-out
align-middle
${active ? "bg-white shadow-sm text-amber-600" : "text-gray-700 hover:bg-white/80 hover:text-amber-600 hover:shadow-md"}
`}
>
<div className="relative">
<Icon className="w-6 h-6" />
<Icon className="h-5 w-5 sm:h-6 sm:w-6" />
{it.badge > 0 && (
<div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">{it.badge > 9 ? "9+" : it.badge}</div>
<div
className="
absolute -right-2 -top-2
flex h-6 w-7 sm:h-5 sm:w-5
items-center justify-center
rounded-full
bg-red-500
text-[9px] sm:text-xs
font-bold
text-white
"
>
{it.badge > 9 ? "9+" : it.badge}
</div>
)}
</div>
<div className="mt-1 text-xs text-center" aria-hidden>
{it.label}
</div>
<div className="mt-0.5 text-[10px] sm:mt-1 sm:text-xs">{it.label}</div>
</Link>
);
})}