From 9fdeadaa615731fdbcb3a78063362dfdfa5dfb98 Mon Sep 17 00:00:00 2001
From: Rahaf <User@DESKTOP-JSF2AL8>
Date: Thu, 4 Jun 2026 22:54:34 +0300
Subject: [PATCH] Added bottom navbar

---
 app/ClientLayout.js         | 25 +++++++++-------
 app/components/BottomNav.js | 57 +++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 11 deletions(-)
 create mode 100644 app/components/BottomNav.js

diff --git a/app/ClientLayout.js b/app/ClientLayout.js
index 96da8eb..1a00b3a 100644
--- a/app/ClientLayout.js
+++ b/app/ClientLayout.js
@@ -7,7 +7,7 @@ import Image from "next/image";
 import { NavLink, MobileNavLink } from "./components/NavLinks";
 import { FavoritesProvider } from '@/app/contexts/FavoritesContext';
 import { NotificationsProvider } from '@/app/contexts/NotificationsContext';
-import FloatingSidebar from '@/app/components/FloatingSidebar';
+import BottomNav from './components/BottomNav';
 import {
   Globe,
   LogIn,
@@ -162,7 +162,7 @@ export default function ClientLayout({ children }) {
 
   return (
     <>
-      {!isAuthPage && (
+      {!isAuthPage && !isAuthenticated && (
         <nav className="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-b border-gray-200 z-50 transition-all duration-300 shadow-sm">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div
@@ -806,16 +806,19 @@ export default function ClientLayout({ children }) {
         </nav>
       )}
 
-      <main
-        className={`${!isAuthPage && !isProfilePage ? "pt-20" : ""} min-h-screen bg-gradient-to-b from-gray-50 to-white ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
-      >
-        <NotificationsProvider>
-          <FavoritesProvider>
+      <NotificationsProvider>
+        <FavoritesProvider>
+          <main
+            className={`${!isAuthPage && !isProfilePage && !isAuthenticated ? "pt-20" : ""} min-h-screen bg-gradient-to-b from-gray-50 to-white ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
+          >
             {children}
-            <FloatingSidebar isRTL={currentLanguage === 'ar'} isAdmin={isAdmin} />
-          </FavoritesProvider>
-        </NotificationsProvider>
-      </main>
+          </main>
+
+          {isAuthenticated && !isAuthPage && (
+            <BottomNav isOwner={isOwner} />
+          )}
+        </FavoritesProvider>
+      </NotificationsProvider>
 
       {!isAuthPage && !isProfilePage && (
         <footer className="bg-gray-900 text-white py-12">
diff --git a/app/components/BottomNav.js b/app/components/BottomNav.js
new file mode 100644
index 0000000..aa09f8d
--- /dev/null
+++ 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>
+  );
+}