253 lines
9.4 KiB
JavaScript
253 lines
9.4 KiB
JavaScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import { Heart, Bell, CreditCard, Shield, UserPlus, Settings, CalendarDays, Star, FileText } from 'lucide-react';
|
|
import { useFavorites } from '@/app/contexts/FavoritesContext';
|
|
import { useNotifications } from '@/app/contexts/NotificationsContext';
|
|
import AuthService from '@/app/services/AuthService';
|
|
|
|
export default function FloatingSidebar({ isRTL, isAdmin }) {
|
|
const { favorites } = useFavorites();
|
|
const { unreadCount } = useNotifications();
|
|
const [tooltip, setTooltip] = useState(null);
|
|
let timeoutId = null;
|
|
|
|
const showTooltip = (id) => {
|
|
timeoutId = setTimeout(() => {
|
|
setTooltip(id);
|
|
}, 300);
|
|
};
|
|
|
|
const hideTooltip = () => {
|
|
clearTimeout(timeoutId);
|
|
setTooltip(null);
|
|
};
|
|
|
|
if (!AuthService.isAuthenticated()) return null;
|
|
|
|
const positionStyle = {
|
|
left: '16px',
|
|
top: 0,
|
|
bottom: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
};
|
|
|
|
const cardVariants = {
|
|
initial: { opacity: 0, x: 20 },
|
|
animate: { opacity: 1, x: 0, transition: { duration: 0.4, ease: 'easeOut' } },
|
|
};
|
|
|
|
const buttonVariants = {
|
|
rest: { scale: 1, backgroundColor: 'rgba(255,255,255,0)' },
|
|
hover: { scale: 1.05, backgroundColor: 'rgba(245,158,11,0.1)', transition: { duration: 0.2 } },
|
|
tap: { scale: 0.95 },
|
|
};
|
|
|
|
const renderTooltip = (id, label) => {
|
|
if (tooltip !== id) return null;
|
|
return (
|
|
<div className="absolute left-full mr-3 top-1/2 -translate-y-1/2 px-3 py-2 bg-gray-800 text-white text-sm rounded-lg whitespace-nowrap z-20 shadow-lg">
|
|
{label}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
className="fixed z-50 pointer-events-none"
|
|
style={positionStyle}
|
|
variants={cardVariants}
|
|
initial="initial"
|
|
animate="animate"
|
|
>
|
|
<div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg border border-gray-200/60 py-4 px-3 flex flex-col gap-4 transition-all duration-300 hover:shadow-xl hover:bg-white/95 max-h-[75vh] overflow-y-auto pointer-events-auto">
|
|
{isAdmin ? (
|
|
<>
|
|
<motion.div
|
|
className="relative group"
|
|
variants={buttonVariants}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onMouseEnter={() => showTooltip('addAdmin')}
|
|
onMouseLeave={hideTooltip}
|
|
>
|
|
<Link
|
|
href="/admin/add-admin"
|
|
className="flex items-center justify-center w-14 h-14 rounded-xl bg-amber-50 border border-amber-200 text-amber-600 hover:bg-amber-100 transition-colors"
|
|
>
|
|
<UserPlus className="w-7 h-7" />
|
|
</Link>
|
|
{renderTooltip('addAdmin', 'إضافة أدمن')}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="relative group"
|
|
variants={buttonVariants}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onMouseEnter={() => showTooltip('editPrivacy')}
|
|
onMouseLeave={hideTooltip}
|
|
>
|
|
<Link
|
|
href="/admin/privacy"
|
|
className="flex items-center justify-center w-14 h-14 rounded-xl bg-slate-50 border border-slate-200 text-slate-700 hover:bg-slate-100 transition-colors"
|
|
>
|
|
<Shield className="w-7 h-7" />
|
|
</Link>
|
|
{renderTooltip('editPrivacy', 'تعديل سياسة الخصوصية')}
|
|
</motion.div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<motion.div
|
|
className="relative group"
|
|
variants={buttonVariants}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onMouseEnter={() => showTooltip('favorites')}
|
|
onMouseLeave={hideTooltip}
|
|
>
|
|
<Link
|
|
href="/favorites"
|
|
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
|
|
>
|
|
<div className="relative">
|
|
<Heart className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
|
|
{favorites.length > 0 && (
|
|
<motion.span
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="absolute -right-1 -top-1 w-6 h-6 bg-linear-to-r from-amber-500 to-amber-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
|
|
>
|
|
{favorites.length}
|
|
</motion.span>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
{renderTooltip('favorites', 'المفضلة')}
|
|
</motion.div>
|
|
<motion.div
|
|
className="relative group"
|
|
variants={buttonVariants}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onMouseEnter={() => showTooltip('notifications')}
|
|
onMouseLeave={hideTooltip}
|
|
>
|
|
<Link
|
|
href="/notifications"
|
|
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
|
|
>
|
|
<div className="relative">
|
|
<Bell className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
|
|
{unreadCount > 0 && (
|
|
<motion.span
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="absolute -right-1 -top-1 w-6 h-6 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', 'الإشعارات')}
|
|
</motion.div>
|
|
<motion.div
|
|
className="relative group"
|
|
variants={buttonVariants}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onMouseEnter={() => showTooltip('payments')}
|
|
onMouseLeave={hideTooltip}
|
|
>
|
|
<Link
|
|
href="/payments"
|
|
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
|
|
>
|
|
<CreditCard className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
|
|
</Link>
|
|
{renderTooltip('payments', 'المدفوعات')}
|
|
</motion.div>
|
|
<motion.div
|
|
className="relative group"
|
|
variants={buttonVariants}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onMouseEnter={() => showTooltip('booked')}
|
|
onMouseLeave={hideTooltip}
|
|
>
|
|
<Link
|
|
href="/booked-properties"
|
|
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
|
|
>
|
|
<CalendarDays className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
|
|
</Link>
|
|
{renderTooltip('booked', 'حجوزاتي')}
|
|
</motion.div>
|
|
<motion.div
|
|
className="relative group"
|
|
variants={buttonVariants}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onMouseEnter={() => showTooltip('myRates')}
|
|
onMouseLeave={hideTooltip}
|
|
>
|
|
<Link
|
|
href="/my-rates"
|
|
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
|
|
>
|
|
<Star className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
|
|
</Link>
|
|
{renderTooltip('myRates', 'تقييماتي')}
|
|
</motion.div>
|
|
<motion.div
|
|
className="relative group"
|
|
variants={buttonVariants}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onMouseEnter={() => showTooltip('reports')}
|
|
onMouseLeave={hideTooltip}
|
|
>
|
|
<Link
|
|
href="/reports"
|
|
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
|
|
>
|
|
<FileText className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
|
|
</Link>
|
|
{renderTooltip('reports', 'البلاغات')}
|
|
</motion.div>
|
|
<motion.div
|
|
className="relative group"
|
|
variants={buttonVariants}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onMouseEnter={() => showTooltip('settings')}
|
|
onMouseLeave={hideTooltip}
|
|
>
|
|
<Link
|
|
href="/settings"
|
|
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
|
|
>
|
|
<Settings className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
|
|
</Link>
|
|
{renderTooltip('settings', 'الإعدادات')}
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
} |