streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maj color develop

Browse Source
This commit is contained in:
streaper2
2026-05-04 21:18:41 +02:00
parent 63b5af4868
commit 1b6d409319
2 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/layout.tsx
View File

@@ -37,11 +37,22 @@ export async function generateMetadata(): Promise<Metadata> {
}; };
} }
const isDev = process.env.NODE_ENV === 'development';
const devBrandOverride: React.CSSProperties | undefined = isDev ? {
'--color-brand-50': '#fef2f2',
'--color-brand-100': '#fee2e2',
'--color-brand-200': '#fecaca',
'--color-brand-500': '#ef4444',
'--color-brand-600': '#dc2626',
'--color-brand-700': '#b91c1c',
'--color-brand-900': '#7f1d1d',
} as React.CSSProperties : undefined;
export default async function RootLayout({ children }: { children: React.ReactNode }) { export default async function RootLayout({ children }: { children: React.ReactNode }) {
const settings = await getSiteSettings(); const settings = await getSiteSettings();
return ( return (
<html lang="fr" className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning> <html lang="fr" className={`${inter.variable} ${playfair.variable}`} style={devBrandOverride} suppressHydrationWarning>
<head> <head>
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
</head> </head>

19
components/Navbar.tsx
View File

@@ -16,12 +16,13 @@ const Navbar = ({ settings }: NavbarProps) => {
const pathname = usePathname() || ''; const pathname = usePathname() || '';
const siteName = settings?.siteName || "Afrohub"; const siteName = settings?.siteName || "Afrohub";
const isDev = process.env.NODE_ENV === 'development';
// Hide Navbar on Dashboard to prevent double navigation, show only on public pages // Hide Navbar on Dashboard to prevent double navigation, show only on public pages
if (pathname.startsWith('/dashboard')) return null; if (pathname.startsWith('/dashboard')) return null;
return ( return (
<nav className="bg-white shadow-sm sticky top-0 z-50"> <nav className={`shadow-sm sticky top-0 z-50 ${isDev ? 'bg-red-600/90 backdrop-blur-sm' : 'bg-white'}`}>
<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 className="flex justify-between h-16"> <div className="flex justify-between h-16">
<div className="flex items-center"> <div className="flex items-center">
@@ -29,19 +30,19 @@ const Navbar = ({ settings }: NavbarProps) => {
<div className="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold font-serif"> <div className="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold font-serif">
{siteName.charAt(0)} {siteName.charAt(0)}
</div> </div>
<span className="font-serif font-bold text-xl text-gray-900">{siteName}</span> <span className={`font-serif font-bold text-xl ${isDev ? 'text-white' : 'text-gray-900'}`}>{siteName}</span>
</Link> </Link>
<div className="hidden sm:ml-8 sm:flex sm:space-x-8"> <div className="hidden sm:ml-8 sm:flex sm:space-x-8">
<Link href="/" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname === '/' ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}> <Link href="/" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname === '/' ? (isDev ? 'border-white text-white' : 'border-brand-500 text-gray-900') : (isDev ? 'border-transparent text-red-100 hover:text-white hover:border-red-200' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300')}`}>
Accueil Accueil
</Link> </Link>
<Link href="/annuaire" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname.startsWith('/annuaire') ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}> <Link href="/annuaire" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname.startsWith('/annuaire') ? (isDev ? 'border-white text-white' : 'border-brand-500 text-gray-900') : (isDev ? 'border-transparent text-red-100 hover:text-white hover:border-red-200' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300')}`}>
Annuaire Annuaire
</Link> </Link>
<Link href="/afrolife" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname.startsWith('/afrolife') ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}> <Link href="/afrolife" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname.startsWith('/afrolife') ? (isDev ? 'border-white text-white' : 'border-brand-500 text-brand-600') : (isDev ? 'border-transparent text-red-100 hover:text-white hover:border-red-200' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300')}`}>
Afro Life Afro Life
</Link> </Link>
<Link href="/blog" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname.startsWith('/blog') ? 'border-brand-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}> <Link href="/blog" className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${pathname.startsWith('/blog') ? (isDev ? 'border-white text-white' : 'border-brand-500 text-gray-900') : (isDev ? 'border-transparent text-red-100 hover:text-white hover:border-red-200' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300')}`}>
Blog Blog
</Link> </Link>
</div> </div>
@@ -55,14 +56,14 @@ const Navbar = ({ settings }: NavbarProps) => {
</Link> </Link>
</> </>
) : ( ) : (
<Link href="/login" className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"> <Link href="/login" className={`inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md focus:outline-none ${isDev ? 'border-white/30 text-white bg-white/10 hover:bg-white/20' : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50'}`}>
<UserIcon className="w-4 h-4 mr-2" /> <UserIcon className="w-4 h-4 mr-2" />
Connexion / Inscription Connexion / Inscription
</Link> </Link>
)} )}
</div> </div>
<div className="-mr-2 flex items-center sm:hidden"> <div className="-mr-2 flex items-center sm:hidden">
<button onClick={() => setIsOpen(!isOpen)} className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> <button onClick={() => setIsOpen(!isOpen)} className={`inline-flex items-center justify-center p-2 rounded-md focus:outline-none ${isDev ? 'text-white hover:text-red-100 hover:bg-white/10' : 'text-gray-400 hover:text-gray-500 hover:bg-gray-100'}`}>
{isOpen ? <X className="block h-6 w-6" /> : <Menu className="block h-6 w-6" />} {isOpen ? <X className="block h-6 w-6" /> : <Menu className="block h-6 w-6" />}
</button> </button>
</div> </div>
@@ -71,7 +72,7 @@ const Navbar = ({ settings }: NavbarProps) => {
{/* Mobile menu */} {/* Mobile menu */}
{isOpen && ( {isOpen && (
<div className="sm:hidden bg-white border-t"> <div className={`sm:hidden border-t ${isDev ? 'bg-red-600/95 border-red-500/30' : 'bg-white'}`}>
<div className="pt-2 pb-3 space-y-1"> <div className="pt-2 pb-3 space-y-1">
<Link href="/" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Accueil</Link> <Link href="/" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Accueil</Link>
<Link href="/annuaire" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Annuaire</Link> <Link href="/annuaire" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300" onClick={() => setIsOpen(false)}>Annuaire</Link>