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

Added dark and light theme
All checks were successful
Build frontend / build (push) Successful in 56s
Details

Browse Source 
Added navbar
This commit is contained in:
Rahaf
2026-06-28 16:08:46 +03:00
parent df5801ee25
commit 4f58519bac
6 changed files with 152 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/components/BottomNav.js
View File

@ -2,13 +2,11 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, Building, Calendar, Heart, Bell, Settings, CreditCard, Briefcase } from "lucide-react";
import { Home, Building, Calendar, Settings, CreditCard, Briefcase } from "lucide-react";
import React, { useEffect, useState } from "react";
import { useNotifications } from "@/app/contexts/NotificationsContext";
export default function BottomNav({ isOwner, isOwnerOrAgent }) {
const pathname = usePathname();
const { unreadCount } = useNotifications();
const [isMounted, setIsMounted] = useState(false);
const bookingsHref = isOwner ? "/owner/reservations" : "/reservations";
@ -21,9 +19,7 @@ export default function BottomNav({ isOwner, isOwnerOrAgent }) {
{ href: "/properties", label: "عقاراتنا", icon: Building },
...(isOwnerOrAgent ? [{ href: "/owner/properties", label: "عقاراتي", icon: Briefcase }] : []),
{ href: bookingsHref, label: "الحجوزات", icon: Calendar },
{ href: "/favorites", label: "المفضلة", icon: Heart },
{ href: "/payments", label: "المدفوعات", icon: CreditCard },
{ href: "/notifications", label: "الإشعارات", icon: Bell, badge: isMounted ? unreadCount : 0 },
{ href: "/settings", label: "الإعدادات", icon: Settings },
];
@ -33,35 +29,34 @@ export default function BottomNav({ isOwner, isOwnerOrAgent }) {
};
return (
<nav className="bg-gray-50 pb-4 pt-2">
<div className="flex items-center justify-center gap-3">
{items.map((it) => {
const Icon = it.icon;
const active = isActive(it.href);
return (
<Link
key={it.href}
href={it.href}
className={`relative group flex flex-col items-center justify-center px-2.5 py-2 transition-colors ${active ? "text-amber-600" : "text-gray-700 hover:text-amber-600"}`}
>
<div className="relative">
<Icon className="w-6 h-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>
<div className="absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg px-2.5 py-1.5 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">
{it.label}
</div>
<div className="mt-1 text-xs text-center" aria-hidden>
{it.label}
</div>
</Link>
);
})}
</div>
</nav>
<div className="flex justify-center pb-4 pt-2">
<nav className="bg-gray-50 rounded-3xl px-4 py-2 shadow-[0_4px_24px_rgba(251,146,60,0.25)]">
<div className="flex items-center justify-center gap-1">
{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"}`}
>
<div className="relative">
<Icon className="w-6 h-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>
<div className="mt-1 text-xs text-center" aria-hidden>
{it.label}
</div>
</Link>
);
})}
</div>
</nav>
</div>
);
}