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

14
app/components/NavLinks.js
View File

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