fix(islamic-website): add & pass classname props to header

haqq-network · Jan 15, 2024 · 1c57fd5 · 1c57fd5
1 parent 02af546
commit 1c57fd5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/apps/islamic-website/app/[locale]/layout.tsx b/apps/islamic-website/app/[locale]/layout.tsx
@@ -6,7 +6,7 @@ import { CookieConsentModal } from '../../components/cookie-consent-modal/cookie
 import { NextIntlClientProvider } from 'next-intl';
 import { Container } from '@haqq/islamic-website-ui-kit';
 import Script from 'next/script';
-import Header, { MobileHeader } from '../../components/header/header';
+import Header from '../../components/header/header';
 import { Footer } from '../../components/footer/footer';
 import { SOCIAL_LINKS } from '../../social-links';
 import { alexandriaFont, handjetFont, vcrFont } from '../../fonts';
@@ -80,12 +80,7 @@ export default async function LocaleLayout({
         <body className="bg-islamic-bg-black font-alexandria flex min-h-screen flex-col text-white antialiased">
           {isScamBannerShow && <ScamBanner />}
 
-          <div className="block lg:hidden">
-            <MobileHeader locale={locale} isBannerVisible={isScamBannerShow} />
-          </div>
-          <div className="hidden lg:block">
-            <Header locale={locale} isBannerVisible={isScamBannerShow} />
-          </div>
+          <Header locale={locale} isBannerVisible={isScamBannerShow} />
 
           <main className="flex-1">{children}</main>
           <Footer socialLinks={SOCIAL_LINKS} />

diff --git a/apps/islamic-website/components/header/header.tsx b/apps/islamic-website/components/header/header.tsx
@@ -156,27 +156,39 @@ export function LanguageLink({
 export default function Header({
   isBannerVisible = false,
   locale,
+  className,
 }: {
   isBannerVisible?: boolean;
   locale: LocaleType;
+  className?: string;
 }) {
   const isTabletMedia = useMediaQuery({
     query: `(max-width: 1023px)`,
   });
 
   return isTabletMedia ? (
-    <MobileHeader locale={locale} isBannerVisible={isBannerVisible} />
+    <MobileHeader
+      className={className}
+      locale={locale}
+      isBannerVisible={isBannerVisible}
+    />
   ) : (
-    <DesktopHeader locale={locale} isBannerVisible={isBannerVisible} />
+    <DesktopHeader
+      className={className}
+      locale={locale}
+      isBannerVisible={isBannerVisible}
+    />
   );
 }
 
 export function MobileHeader({
   isBannerVisible = false,
   locale,
+  className,
 }: {
   isBannerVisible?: boolean;
   locale: LocaleType;
+  className?: string;
 }) {
   const [isMobileMenuOpen, setIsMobileMenuOpened] = useState(false);
   const [isBlurred, setBlurred] = useState(false);
@@ -218,6 +230,7 @@ export function MobileHeader({
           isBannerVisible
             ? 'h-[calc(72px+64px)] md:h-[calc(72px+40px)]'
             : 'h-[72px]',
+          className,
         )}
       />
       <header
@@ -287,9 +300,11 @@ export function MobileHeader({
 export function DesktopHeader({
   isBannerVisible = false,
   locale,
+  className,
 }: {
   isBannerVisible?: boolean;
   locale: LocaleType;
+  className?: string;
 }) {
   const [isBlurred, setBlurred] = useState(false);
 
@@ -324,6 +339,7 @@ export function DesktopHeader({
         'transform-gpu transition-all duration-150 will-change-auto',
         isBlurred && 'translate-y-[-16px]',
         isBannerVisible ? 'top-[40px]' : 'top-[0px]',
+        className,
       )}
     >
       <div className="pb-[10px] pt-[26px]">