Added dark and light theme

Added navbar

app/ClientLayout.js

@@ -5,8 +5,6 @@ import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import Image from "next/image";
 import { NavLink, MobileNavLink } from "./components/NavLinks";
-import { FavoritesProvider } from '@/app/contexts/FavoritesContext';
-import { NotificationsProvider } from '@/app/contexts/NotificationsContext';
 import BottomNav from './components/BottomNav';
 import {
   Globe,
@@ -35,6 +33,8 @@ import {
   Clock,
   DollarSign,
   Star,
+  Moon,
+  Sun,
   FileText,
 } from "lucide-react";
 import { useState, useEffect, useRef } from "react";
@@ -43,6 +43,8 @@ import AuthService from "./services/AuthService";
 import { UserRole, UserRoleLabels } from "./enums/UserRole";
 import "./i18n/config";
 import NotificationHandler from "./components/NotificationHandler";
+import { useTheme } from '@/app/contexts/ThemeContext';
+import { useNotifications } from '@/app/contexts/NotificationsContext';
 
 export default function ClientLayout({ children }) {
   const { t, i18n } = useTranslation();
@@ -54,6 +56,8 @@ export default function ClientLayout({ children }) {
   const [isMounted, setIsMounted] = useState(false);
   const currentYear = new Date().getFullYear();
   const menuRef = useRef(null);
+  const { theme, toggleTheme } = useTheme();
+  const { unreadCount } = useNotifications();
 
   useEffect(() => {
     setIsMounted(true);
@@ -575,6 +579,15 @@ export default function ClientLayout({ children }) {
               </div>
 
               <div className="md:hidden flex items-center gap-3">
+                <motion.button
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                  onClick={toggleTheme}
+                  className="flex items-center justify-center w-10 h-10 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors"
+                  aria-label="Toggle theme"
+                >
+                  {theme === 'dark' ? <Sun className="w-5 h-5 text-gray-700" /> : <Moon className="w-5 h-5 text-gray-700" />}
+                </motion.button>
                 <motion.button
                   whileHover={{ scale: 1.1, rotate: 360 }}
                   whileTap={{ scale: 0.9 }}
@@ -711,11 +724,43 @@ export default function ClientLayout({ children }) {
         </nav>
       )}
 
-      <NotificationsProvider>
-        <FavoritesProvider>
-          <main
+      <main
             className={`${!isAuthPage && !isProfilePage && !isAuthenticated ? "pt-20" : ""} flex-1 flex flex-col bg-gray-50 ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
           >
+            {!isAuthPage && (
+              <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-gray-50/90 backdrop-blur-sm">
+                <div className="flex items-center gap-2">
+                  <span className={`text-sm font-semibold px-3 py-1 rounded-lg ${!isAuthenticated ? 'bg-gray-200 text-gray-600' : isOwner ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700'}`}>
+                    {!isAuthenticated ? 'زائر' : isOwner ? 'مالك' : 'عميل'}
+                  </span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <Link href="/favorites" className="relative group flex items-center justify-center w-9 h-9 text-gray-600 hover:text-amber-600 hover:bg-gray-100 rounded-full transition-colors">
+                    <Heart className="w-5 h-5" />
+                    <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">
+                      المفضلة
+                    </div>
+                  </Link>
+                  <Link href="/notifications" className="relative group flex items-center justify-center w-9 h-9 text-gray-600 hover:text-amber-600 hover:bg-gray-100 rounded-full transition-colors">
+                    <Bell className="w-5 h-5" />
+                    {isMounted && unreadCount > 0 && (
+                      <div className="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
+                        {unreadCount > 9 ? '9+' : unreadCount}
+                      </div>
+                    )}
+                    <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">
+                      الإشعارات
+                    </div>
+                  </Link>
+                  <button onClick={toggleTheme} className="relative group flex items-center justify-center w-9 h-9 text-gray-600 hover:text-amber-600 hover:bg-gray-100 rounded-full transition-colors">
+                    {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+                    <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">
+                      {theme === 'dark' ? 'وضع نهاري' : 'وضع ليلي'}
+                    </div>
+                  </button>
+                </div>
+              </div>
+            )}
             <div className="flex-1">
               {children}
             </div>
@@ -723,8 +768,6 @@ export default function ClientLayout({ children }) {
               <BottomNav isOwner={isOwner} isOwnerOrAgent={isOwnerOrAgent} />
             )}
           </main>
-        </FavoritesProvider>
-      </NotificationsProvider>
 
       {pathname === "/" && (
         <footer className="bg-gray-900 text-white py-12">