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); ].includes(pathname);
const isProfilePage = pathname === "/profile"; const isProfilePage = pathname === "/profile";
const isHomePage = pathname === "/";
const isOwner = user?.role === UserRole.OWNER; const isOwner = user?.role === UserRole.OWNER;
const isAgent = user?.role === UserRole.AGENT; const isAgent = user?.role === UserRole.AGENT;
@ -165,7 +166,7 @@ export default function ClientLayout({ children }) {
return ( return (
<div className="min-h-screen flex flex-col"> <div className="min-h-screen flex flex-col">
{!isAuthPage && !isAuthenticated && ( {!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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div <div
className={`flex justify-between items-center h-20 ${currentLanguage === "ar" ? "flex-row-reverse" : ""}`} className={`flex justify-between items-center h-20 ${currentLanguage === "ar" ? "flex-row-reverse" : ""}`}
@ -181,9 +182,9 @@ export default function ClientLayout({ children }) {
priority priority
/> />
</div> </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")} {t("brandNamePart1")}
<span className="text-amber-600"> <span className={isHomePage ? "text-amber-400" : "text-amber-600"}>
{t("brandNamePart2")} {t("brandNamePart2")}
</span> </span>
</span> </span>
@ -196,7 +197,7 @@ export default function ClientLayout({ children }) {
> >
{/* Download App Dropdown */} {/* Download App Dropdown */}
<div className="relative group"> <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"> <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="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"/> <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>
</div> </div>
<NavLink href="/">الرئيسية</NavLink> <NavLink light={isHomePage} href="/">الرئيسية</NavLink>
<NavLink href="/properties">عقاراتنا</NavLink> <NavLink light={isHomePage} href="/properties">عقاراتنا</NavLink>
{isOwner && ( {isOwner && (
<> <>
<NavLink href="/owner/properties"> <NavLink light={isHomePage} href="/owner/properties">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<Building className="w-4 h-4" /> <Building className="w-4 h-4" />
عقاراتي عقاراتي
</span> </span>
</NavLink> </NavLink>
<NavLink href="/owner/reservations"> <NavLink light={isHomePage} href="/owner/reservations">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<Calendar className="w-4 h-4" /> <Calendar className="w-4 h-4" />
الحجوزات الحجوزات
</span> </span>
</NavLink> </NavLink>
{/* <NavLink href="/owner/calendar"> {/* <NavLink light={isHomePage} href="/owner/calendar">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<CalendarDays className="w-4 h-4" /> <CalendarDays className="w-4 h-4" />
التقويم التقويم
</span> </span>
</NavLink> */} </NavLink> */}
<NavLink href="/owner/profits"> <NavLink light={isHomePage} href="/owner/profits">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<TrendingUp className="w-4 h-4" /> <TrendingUp className="w-4 h-4" />
الأرباح الأرباح
@ -268,13 +269,13 @@ export default function ClientLayout({ children }) {
{!user && !isAuthPage && ( {!user && !isAuthPage && (
<> <>
<NavLink href="/login"> <NavLink light={isHomePage} href="/login">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<LogIn className="w-4 h-4" /> <LogIn className="w-4 h-4" />
تسجيل الدخول تسجيل الدخول
</span> </span>
</NavLink> </NavLink>
<NavLink href="/auth/choose-role"> <NavLink light={isHomePage} href="/auth/choose-role">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<UserPlus className="w-4 h-4" /> <UserPlus className="w-4 h-4" />
إنشاء حساب إنشاء حساب
@ -629,21 +630,21 @@ export default function ClientLayout({ children }) {
initial={{ opacity: 0, y: -10 }} initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }} 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"> <div className="px-2 pt-2 pb-3 space-y-1">
<MobileNavLink href="/" onClick={closeMobileMenu}> <MobileNavLink light={isHomePage} href="/" onClick={closeMobileMenu}>
{t("home")} {t("home")}
</MobileNavLink> </MobileNavLink>
<MobileNavLink href="/properties" onClick={closeMobileMenu}> <MobileNavLink light={isHomePage} href="/properties" onClick={closeMobileMenu}>
{t("ourProducts")} {t("ourProducts")}
</MobileNavLink> </MobileNavLink>
{/* Download App - Mobile */} {/* Download App - Mobile */}
<div className="border-t border-gray-200 my-2"></div> <div className={`border-t my-2 ${isHomePage ? "border-white/10" : "border-gray-200"}`}></div>
<p className="px-3 py-1 text-xs text-gray-400 font-medium">تحميل التطبيق</p> <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} <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"> <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"/> <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> </svg>
@ -655,12 +656,11 @@ export default function ClientLayout({ children }) {
</svg> </svg>
<span className="text-sm">iOS - قريباً</span> <span className="text-sm">iOS - قريباً</span>
</div> </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 && ( {isOwner && (
<> <>
<MobileNavLink <MobileNavLink light={isHomePage} href="/owner/properties"
href="/owner/properties"
onClick={closeMobileMenu} onClick={closeMobileMenu}
> >
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
@ -668,7 +668,7 @@ export default function ClientLayout({ children }) {
عقاراتي عقاراتي
</span> </span>
</MobileNavLink> </MobileNavLink>
<MobileNavLink <MobileNavLink light={isHomePage}
href="/owner/reservations" href="/owner/reservations"
onClick={closeMobileMenu} onClick={closeMobileMenu}
> >
@ -677,7 +677,7 @@ export default function ClientLayout({ children }) {
الحجوزات الحجوزات
</span> </span>
</MobileNavLink> </MobileNavLink>
<MobileNavLink <MobileNavLink light={isHomePage}
href="/owner/calendar" href="/owner/calendar"
onClick={closeMobileMenu} onClick={closeMobileMenu}
> >
@ -686,7 +686,7 @@ export default function ClientLayout({ children }) {
التقويم التقويم
</span> </span>
</MobileNavLink> </MobileNavLink>
<MobileNavLink <MobileNavLink light={isHomePage}
href="/owner/profits" href="/owner/profits"
onClick={closeMobileMenu} onClick={closeMobileMenu}
> >
@ -700,14 +700,14 @@ export default function ClientLayout({ children }) {
{!user && ( {!user && (
<> <>
<div className="border-t border-gray-200 my-2"></div> <div className={`border-t my-2 ${isHomePage ? "border-white/10" : "border-gray-200"}`}></div>
<MobileNavLink href="/login" onClick={closeMobileMenu}> <MobileNavLink light={isHomePage} href="/login" onClick={closeMobileMenu}>
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<LogIn className="w-4 h-4" /> <LogIn className="w-4 h-4" />
تسجيل الدخول تسجيل الدخول
</span> </span>
</MobileNavLink> </MobileNavLink>
<MobileNavLink <MobileNavLink light={isHomePage}
href="/auth/choose-role" href="/auth/choose-role"
onClick={closeMobileMenu} onClick={closeMobileMenu}
> >
@ -725,23 +725,23 @@ export default function ClientLayout({ children }) {
)} )}
<main <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 && ( {!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"> <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 ? 'مالك' : 'عميل'} {!isAuthenticated ? 'زائر' : isOwner ? 'مالك' : 'عميل'}
</span> </span>
</div> </div>
<div className="flex items-center gap-3"> <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" /> <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 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> </div>
</Link> </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" /> <Bell className="w-5 h-5" />
{isMounted && unreadCount > 0 && ( {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"> <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> </div>
</Link> </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" />} {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"> <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' ? 'وضع نهاري' : 'وضع ليلي'} {theme === 'dark' ? 'وضع نهاري' : 'وضع ليلي'}

4
app/components/BottomNav.js
View File

@ -29,8 +29,8 @@ export default function BottomNav({ isOwner, isOwnerOrAgent }) {
}; };
return ( return (
<div className="flex justify-center pb-4 pt-2"> <div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center pb-4 pt-2 pointer-events-none">
<nav className="bg-gray-50 rounded-3xl px-4 py-2 shadow-[0_4px_24px_rgba(251,146,60,0.25)]"> <nav className="bg-gray-50 rounded-3xl px-4 py-2 shadow-[0_4px_24px_rgba(251,146,60,0.25)] pointer-events-auto">
<div className="flex items-center justify-center gap-1"> <div className="flex items-center justify-center gap-1">
{items.map((it) => { {items.map((it) => {
const Icon = it.icon; const Icon = it.icon;

14
app/components/NavLinks.js
View File

@ -3,7 +3,7 @@ import { usePathname } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
import { LogIn, UserPlus } from 'lucide-react'; import { LogIn, UserPlus } from 'lucide-react';
export function NavLink({ href, children }) { export function NavLink({ href, children, light }) {
const pathname = usePathname(); const pathname = usePathname();
const isActive = pathname === href || pathname.startsWith(href + '/'); const isActive = pathname === href || pathname.startsWith(href + '/');
return ( return (
@ -11,19 +11,19 @@ export function NavLink({ href, children }) {
href={href} href={href}
className={`px-5 py-3 rounded-lg font-semibold transition-all duration-300 text-lg relative group ${ className={`px-5 py-3 rounded-lg font-semibold transition-all duration-300 text-lg relative group ${
isActive isActive
? 'text-amber-600 bg-amber-50' ? light ? 'text-amber-300 bg-white/10' : 'text-amber-600 bg-amber-50'
: 'text-gray-700 hover:text-amber-600 hover:bg-gray-100' : light ? 'text-white/90 hover:text-amber-300 hover:bg-white/10' : 'text-gray-700 hover:text-amber-600 hover:bg-gray-100'
}`} }`}
> >
{children} {children}
<span className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 transition-all duration-300 ${ <span className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 transition-all duration-300 ${
isActive ? 'w-4/5 bg-amber-600' : 'w-0 bg-amber-600 group-hover:w-4/5' isActive ? 'w-4/5 bg-amber-400' : 'w-0 bg-amber-400 group-hover:w-4/5'
}`}></span> }`}></span>
</Link> </Link>
); );
} }
export function MobileNavLink({ href, children, onClick }) { export function MobileNavLink({ href, children, onClick, light }) {
const pathname = usePathname(); const pathname = usePathname();
const isActive = pathname === href || pathname.startsWith(href + '/'); const isActive = pathname === href || pathname.startsWith(href + '/');
return ( return (
@ -32,8 +32,8 @@ export function MobileNavLink({ href, children, onClick }) {
onClick={onClick} onClick={onClick}
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${ className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
isActive isActive
? 'text-amber-600 bg-amber-50' ? light ? 'text-amber-300 bg-white/10' : 'text-amber-600 bg-amber-50'
: 'text-gray-700 hover:text-amber-600 hover:bg-gray-50' : light ? 'text-white/80 hover:text-amber-300 hover:bg-white/10' : 'text-gray-700 hover:text-amber-600 hover:bg-gray-50'
}`} }`}
> >
{children} {children}

2
app/page.js
View File

@ -275,7 +275,7 @@ export default function HomePage() {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<section className="relative min-h-screen flex items-center justify-center overflow-hidden"> <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">
<motion.div <motion.div
className="absolute inset-0 bg-cover bg-center bg-no-repeat" className="absolute inset-0 bg-cover bg-center bg-no-repeat"