Added bottom navbar

2026-06-04 22:54:34 +03:00
parent d11f105dfc
commit 9fdeadaa61
2 changed files with 71 additions and 11 deletions
--- a/app/components/BottomNav.js
+++ b/app/components/BottomNav.js
@ -0,0 +1,57 @@
+"use client";
+
+import Link from "next/link";
+import { Home, Building, Calendar, Heart, Bell, Settings } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { useNotifications } from "@/app/contexts/NotificationsContext";
+
+export default function BottomNav({ isOwner }) {
+  const { unreadCount } = useNotifications();
+  const [isMounted, setIsMounted] = useState(false);
+  const bookingsHref = isOwner ? "/owner/reservations" : "/reservations";
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const items = [
+    { href: "/", label: "الرئيسية", icon: Home },
+    { href: "/properties", label: "عقاراتنا", icon: Building },
+    { href: bookingsHref, label: "الحجوزات", icon: Calendar },
+    { href: "/favorites", label: "المفضلة", icon: Heart },
+    { href: "/notifications", label: "الإشعارات", icon: Bell, badge: isMounted ? unreadCount : 0 },
+    { href: "/settings", label: "الإعدادات", icon: Settings },
+  ];
+
+  return (
+    <nav className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50">
+      <div className="bg-white/95 backdrop-blur-sm border border-gray-200 rounded-3xl shadow-lg px-2 py-2 flex items-center gap-3">
+        {items.map((it) => {
+          const Icon = it.icon;
+          return (
+            <Link
+              key={it.href}
+              href={it.href}
+              className="relative group flex flex-col items-center justify-center px-2.5 py-2 text-gray-700 hover:text-amber-600 transition-colors"
+            >
+              <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>
+  );
+}