hamzeh/SweetHomeWeb
1
0
Fork 0
forked from amer2004/SweetHome
Code Pull Requests Activity

Edit style navbar, bottom nav

Browse Source
This commit is contained in:
Rahaf
2026-06-28 16:57:02 +03:00
parent d7ef0977ad
commit 253e1b7542
4 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
app/ClientLayout.js
View File

@ -137,6 +137,7 @@ export default function ClientLayout({ children }) {
].includes(pathname);
const isProfilePage = pathname === "/profile";
const isHomePage = pathname === "/";
const isOwner = user?.role === UserRole.OWNER;
const isAgent = user?.role === UserRole.AGENT;
@ -165,7 +166,7 @@ export default function ClientLayout({ children }) {
return (
<div className="min-h-screen flex flex-col">
{!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">
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isHomePage ? "bg-transparent backdrop-blur-sm" : "bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm"}`}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div
className={`flex justify-between items-center h-20 ${currentLanguage === "ar" ? "flex-row-reverse" : ""}`}
@ -181,9 +182,9 @@ export default function ClientLayout({ children }) {
priority
/>
</div>
<span className="text-3xl font-bold text-gray-800 hidden md:block">
<span className={`text-3xl font-bold hidden md:block ${isHomePage ? "text-white" : "text-gray-800"}`}>
{t("brandNamePart1")}
<span className="text-amber-600">
<span className={isHomePage ? "text-amber-400" : "text-amber-600"}>
{t("brandNamePart2")}
</span>
</span>
@ -196,7 +197,7 @@ export default function ClientLayout({ children }) {
>
{/* Download App Dropdown */}
<div className="relative group">
<button className="flex items-center gap-2 px-3 py-2 text-gray-700 hover:text-amber-600 hover:bg-amber-50 rounded-lg transition-all">
<button className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${isHomePage ? "text-white/80 hover:text-amber-300 hover:bg-white/10" : "text-gray-700 hover:text-amber-600 hover:bg-amber-50"}`}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M11 2a3 3 0 0 0-3 3v6.5a.5.5 0 0 0 1 0V5a2 2 0 1 1 4 0v6.5a.5.5 0 0 0 1 0V5a3 3 0 0 0-3-3z"/>
<path d="M1.5 12.5A1.5 1.5 0 0 0 3 14h10a1.5 1.5 0 0 0 0-3H3a1.5 1.5 0 0 0-1.5 1.5z"/>
@ -233,31 +234,31 @@ export default function ClientLayout({ children }) {
</div>
</div>
<NavLink href="/">الرئيسية</NavLink>
<NavLink href="/properties">عقاراتنا</NavLink>
<NavLink light={isHomePage} href="/">الرئيسية</NavLink>
<NavLink light={isHomePage} href="/properties">عقاراتنا</NavLink>
{isOwner && (
<>
<NavLink href="/owner/properties">
<NavLink light={isHomePage} href="/owner/properties">
<span className="flex items-center gap-2">
<Building className="w-4 h-4" />
عقاراتي
</span>
</NavLink>
<NavLink href="/owner/reservations">
<NavLink light={isHomePage} href="/owner/reservations">
<span className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
الحجوزات
</span>
</NavLink>
{/* <NavLink href="/owner/calendar">
{/* <NavLink light={isHomePage} href="/owner/calendar">
<span className="flex items-center gap-2">
<CalendarDays className="w-4 h-4" />
التقويم
</span>
</NavLink> */}
<NavLink href="/owner/profits">
<NavLink light={isHomePage} href="/owner/profits">
<span className="flex items-center gap-2">
<TrendingUp className="w-4 h-4" />
الأرباح
@ -268,13 +269,13 @@ export default function ClientLayout({ children }) {
{!user && !isAuthPage && (
<>
<NavLink href="/login">
<NavLink light={isHomePage} href="/login">
<span className="flex items-center gap-2">
<LogIn className="w-4 h-4" />
تسجيل الدخول
</span>
</NavLink>
<NavLink href="/auth/choose-role">
<NavLink light={isHomePage} href="/auth/choose-role">
<span className="flex items-center gap-2">
<UserPlus className="w-4 h-4" />
إنشاء حساب
@ -629,21 +630,21 @@ export default function ClientLayout({ children }) {
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
className="md:hidden bg-white border-t border-gray-200 shadow-lg"
className={`md:hidden border-t shadow-lg ${isHomePage ? "bg-black/60 backdrop-blur-md border-white/10" : "bg-white border-gray-200"}`}
>
<div className="px-2 pt-2 pb-3 space-y-1">
<MobileNavLink href="/" onClick={closeMobileMenu}>
<MobileNavLink light={isHomePage} href="/" onClick={closeMobileMenu}>
{t("home")}
</MobileNavLink>
<MobileNavLink href="/properties" onClick={closeMobileMenu}>
<MobileNavLink light={isHomePage} href="/properties" onClick={closeMobileMenu}>
{t("ourProducts")}
</MobileNavLink>
{/* Download App - Mobile */}
<div className="border-t border-gray-200 my-2"></div>
<p className="px-3 py-1 text-xs text-gray-400 font-medium">تحميل التطبيق</p>
<div className={`border-t my-2 ${isHomePage ? "border-white/10" : "border-gray-200"}`}></div>
<p className={`px-3 py-1 text-xs font-medium ${isHomePage ? "text-white/50" : "text-gray-400"}`}>تحميل التطبيق</p>
<a href="/files/SweetHome.apk" download onClick={closeMobileMenu}
className="flex items-center gap-2 px-3 py-2 rounded-md text-green-600 hover:bg-green-50 transition-colors">
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${isHomePage ? "text-green-400 hover:bg-white/10" : "text-green-600 hover:bg-green-50"}`}>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
<path d="M2.76 3.061a.5.5 0 0 1 .679.2l1.283 2.352A8.9 8.9 0 0 1 8 5a8.9 8.9 0 0 1 3.278.613l1.283-2.352a.5.5 0 1 1 .878.478l-1.252 2.295C14.475 7.266 16 9.477 16 12H0c0-2.523 1.525-4.734 3.813-5.966L2.56 3.74a.5.5 0 0 1 .2-.678ZM5 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2m6 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
</svg>
@ -655,12 +656,11 @@ export default function ClientLayout({ children }) {
</svg>
<span className="text-sm">iOS - قريباً</span>
</div>
<div className="border-t border-gray-200 my-2"></div>
<div className={`border-t my-2 ${isHomePage ? "border-white/10" : "border-gray-200"}`}></div>
{isOwner && (
<>
<MobileNavLink
href="/owner/properties"
<MobileNavLink light={isHomePage} href="/owner/properties"
onClick={closeMobileMenu}
>
<span className="flex items-center gap-2">
@ -668,7 +668,7 @@ export default function ClientLayout({ children }) {
عقاراتي
</span>
</MobileNavLink>
<MobileNavLink
<MobileNavLink light={isHomePage}
href="/owner/reservations"
onClick={closeMobileMenu}
>
@ -677,7 +677,7 @@ export default function ClientLayout({ children }) {
الحجوزات
</span>
</MobileNavLink>
<MobileNavLink
<MobileNavLink light={isHomePage}
href="/owner/calendar"
onClick={closeMobileMenu}
>
@ -686,7 +686,7 @@ export default function ClientLayout({ children }) {
التقويم
</span>
</MobileNavLink>
<MobileNavLink
<MobileNavLink light={isHomePage}
href="/owner/profits"
onClick={closeMobileMenu}
>
@ -700,14 +700,14 @@ export default function ClientLayout({ children }) {
{!user && (
<>
<div className="border-t border-gray-200 my-2"></div>
<MobileNavLink href="/login" onClick={closeMobileMenu}>
<div className={`border-t my-2 ${isHomePage ? "border-white/10" : "border-gray-200"}`}></div>
<MobileNavLink light={isHomePage} href="/login" onClick={closeMobileMenu}>
<span className="flex items-center gap-2">
<LogIn className="w-4 h-4" />
تسجيل الدخول
</span>
</MobileNavLink>
<MobileNavLink
<MobileNavLink light={isHomePage}
href="/auth/choose-role"
onClick={closeMobileMenu}
>
@ -725,23 +725,23 @@ export default function ClientLayout({ children }) {
)}
<main
className={`${!isAuthPage && !isProfilePage && !isAuthenticated ? "pt-20" : ""} flex-1 flex flex-col bg-gray-50 overflow-x-hidden ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
className={`${!isAuthPage && !isProfilePage && !isAuthenticated ? "pt-20" : ""} flex-1 flex flex-col bg-gray-50 overflow-x-hidden ${currentLanguage === "ar" ? "text-right" : "text-left"} ${isHomePage ? "relative" : ""} ${isAuthenticated && !isAuthPage ? "pb-20" : ""}`}
>
{!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 justify-between px-4 py-2 ${isHomePage ? "absolute top-0 left-0 right-0 z-20 bg-transparent backdrop-blur-3xl" : "border-b border-gray-200/20 bg-white/10 backdrop-blur-lg"}`}>
<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'}`}>
<span className={`text-sm font-semibold px-3 py-1 rounded-lg ${!isAuthenticated ? (isHomePage ? 'bg-white/20 text-white' : 'bg-gray-200 text-gray-600') : isOwner ? (isHomePage ? 'bg-amber-500/30 text-amber-200' : 'bg-amber-100 text-amber-700') : (isHomePage ? 'bg-blue-500/30 text-blue-200' : '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">
<Link href="/favorites" className={`relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors ${isHomePage ? "text-white/80 hover:text-amber-300 hover:bg-white/10" : "text-gray-600 hover:text-amber-600 hover:bg-gray-100"}`}>
<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">
<Link href="/notifications" className={`relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors ${isHomePage ? "text-white/80 hover:text-amber-300 hover:bg-white/10" : "text-gray-600 hover:text-amber-600 hover:bg-gray-100"}`}>
<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">
@ -752,7 +752,7 @@ export default function ClientLayout({ children }) {
الإشعارات
</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">
<button onClick={toggleTheme} className={`relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors ${isHomePage ? "text-white/80 hover:text-amber-300 hover:bg-white/10" : "text-gray-600 hover:text-amber-600 hover:bg-gray-100"}`}>
{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' ? 'وضع نهاري' : 'وضع ليلي'}