Added API for notifications and edit style

app/components/FloatingSidebar.js

@@ -5,9 +5,11 @@ import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { Heart, Bell, CreditCard, Shield, UserPlus } from 'lucide-react';
 import { useFavorites } from '@/app/contexts/FavoritesContext';
+import { useNotifications } from '@/app/contexts/NotificationsContext';
 
 export default function FloatingSidebar({ isRTL, isAdmin }) {
   const { favorites } = useFavorites();
+  const { unreadCount } = useNotifications();
   const [tooltip, setTooltip] = useState(null);
   let timeoutId = null;
 
@@ -150,13 +152,15 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
               >
                 <div className="relative">
                   <Bell className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
-                  <motion.span
-                    initial={{ scale: 0 }}
-                    animate={{ scale: 1 }}
-                    className="absolute -right-1 -top-1 w-5 h-5 bg-linear-to-r from-red-500 to-red-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
-                  >
-                    3
-                  </motion.span>
+                  {unreadCount > 0 && (
+                    <motion.span
+                      initial={{ scale: 0 }}
+                      animate={{ scale: 1 }}
+                      className="absolute -right-1 -top-1 w-5 h-5 bg-linear-to-r from-red-500 to-red-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
+                    >
+                      {unreadCount}
+                    </motion.span>
+                  )}
                 </div>
               </Link>
               {renderTooltip('notifications', 'الإشعارات')}