refac

src/components/Sponsors/TopBanner.tsx

@@ -1,30 +1,47 @@
-export const TopBanner = ({ item }) => {
+export const TopBanner = ({item, bannerClassName = 'h-18 ', label = true, description= true,mobile = true }) => {
 	return (
-		<div className="pb-4">
+		<div className="w-full">
-			<div className="mb-2">
+			<div className="flex flex-col justify-center w-full">
+				{label &&
 				<div className="mb-1 text-xs font-semibold text-gray-600 underline dark:text-gray-300">
 					Sponsored by {item.name}
 				</div>
+				}
+
+				<a href={item.url} target="_blank" className="flex items-center justify-center w-full">
+
+					{mobile ? <>
+								<img
+									className={`hidden md:block w-full rounded-xl object-cover ${bannerClassName}`}
+									loading="lazy"
+									alt={item.name}
+									src={item.imgSrc}
+								/>
+
+								<img
+									className={`block w-full rounded-xl md:hidden object-cover ${bannerClassName}`}
+									loading="lazy"
+									alt={item.name}
+									src={item?.mobileImgSrc || item.imgSrc}
+								/>
+					</> : <>
 
-				<a href={item.url} target="_blank">
 					<img
-						className="hidden w-full rounded-xl md:block h-18 object-cover" 
+						className={`w-full rounded-xl object-cover ${bannerClassName}`}
 						loading="lazy"
 						alt={item.name}
 						src={item.imgSrc}
 					/>
 
-					<img
+					</> }
-						className="block w-full rounded-xl md:hidden h-18 object-cover"
-						loading="lazy"
-						alt={item.name}
-						src={item?.mobileImgSrc || item.imgSrc}
-					/>
 				</a>
 
+				{description &&
+
 				<div className="mt-1 line-clamp-1 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">
 					{item.description}
 				</div>
+}
 			</div>
 		</div>
 	);

src/components/TopBanners.tsx

@@ -1,7 +1,7 @@
 import { TopBanner } from "@site/src/components/Sponsors/TopBanner";
 import { useEffect, useState } from "react";
 
-export const TopBanners = () => {
+export const TopBanners = ({bannerClassName = 'h-18', label= true, description= true, mobile = true }) => {
 	const items = [
 		{
 			imgSrc: "/sponsors/banners/n8n-banner.png",
@@ -80,5 +80,5 @@ export const TopBanners = () => {
 	}, []);
 
 
-	return <TopBanner item={items[selectedItemIdx]} />;
+	return <TopBanner bannerClassName={bannerClassName} item={items[selectedItemIdx]} label={label} description={description} mobile={mobile} />;
 };

src/css/custom.css

@@ -34,6 +34,13 @@
 	--ifm-global-shadow-md: 0px; /* Remove shadow on the left */
 }
 
+/** In mobile view, reduce the padding */
+@media screen and (max-width: 996px) {
+	:root {
+		--ifm-navbar-height: 100%;
+	}
+}
+
 [data-theme="light"] {
 	--ifm-menu-color: #000;
 }

src/theme/Navbar/Content/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Content from '@theme-original/Navbar/Content';
+import type ContentType from '@theme/Navbar/Content';
+import type {WrapperProps} from '@docusaurus/types';
+import { TopBanners } from '@site/src/components/TopBanners';
+
+type Props = WrapperProps<typeof ContentType>;
+
+export default function ContentWrapper(props: Props): JSX.Element {
+  return (
+    <>
+
+
+
+
+<div className='flex flex-col w-full'>
+
+     
+
+    <div>
+      
+      <Content {...props} />
+
+    </div>
+
+    <div className=' min-[996px]:hidden mt-3'>
+      <TopBanners bannerClassName={'h-10'} label={false} mobile={false} />
+    </div>
+
+   
+</div>
+
+    </>
+  );
+}