✨ Make fancy transparent navbar

src/components/carousel.tsx

@@ -68,7 +68,7 @@ export default function TechCrewCarousel({
             <img
               src={slide.src}
               alt={slide.caption}
-              className={`object-cover h-auto min-h-[18rem] ${slideClasses}`}
+              className={`object-cover h-auto min-h-[20rem] ${slideClasses}`}
             />
           </div>
 

src/css/custom.css

@@ -78,4 +78,24 @@ h2 {
 
 svg {
   @apply inline;
+}
+
+.navbar__items--right {
+  @apply hidden 2xs:flex;
+}
+
+.navbar-home {
+  @apply sm:fixed left-0 right-0 duration-300 transition-all;
+}
+
+.navbar-home-top {
+  @apply sm:bg-transparent sm:shadow-none;
+}
+
+.navbar-home-top .navbar__items--right {
+  @apply sm:opacity-0 sm:4xl:opacity-100;
+}
+
+.navbar-home-top .navbar__link, .navbar-home-top .navbar__title, .navbar-home-top .navbar__toggle, .navbar-home-top .navbar__items {
+  @apply sm:text-white;
 }

src/pages/index.tsx

@@ -22,7 +22,7 @@ export default function Home(): JSX.Element {
           />
         </div>
 
-        <div className="absolute top-12 right-16 2xs:right-20 sm:right-24 bottom-32 left-16 2xs:left-20 sm:left-24">
+        <div className="absolute top-14 xs:top-20 right-16 2xs:right-20 sm:right-24 bottom-32 left-16 2xs:left-20 sm:left-24">
           <div className="max-w-screen-xl mx-auto text-white h-full">
             <div className="flex flex-col xs:flex-row gap-2 xs:gap-4 xs:items-center h-full">
               <img
@@ -44,7 +44,7 @@ export default function Home(): JSX.Element {
         </div>
       </header>
 
-      <main className="-mt-16 2xs:-mt-12 xs:-mt-28 sm:-mt-32">
+      <main className="-mt-16 2xs:-mt-12 xs:-mt-24 sm:-mt-28">
         <section className="relative my-4 mx-8 sm:mx-12 md:mx-16">
           <div className="max-w-screen-xl mx-auto p-6 dark:bg-neutral-800 bg-gray-200 flex gap-4 flex-wrap">
             <div className="w-80 flex-grow">

src/theme/Navbar/Layout/index.tsx

@@ -0,0 +1,68 @@
+import React, { type ComponentProps, useState } from 'react';
+import clsx from 'clsx';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
+import { translate } from '@docusaurus/Translate';
+import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
+import type { Props } from '@theme/Navbar/Layout';
+
+import { useLocation } from '@docusaurus/router';
+import { useScrollPosition } from '@docusaurus/theme-common/internal';
+
+function NavbarBackdrop(props: ComponentProps<'div'>) {
+  return (
+    <div
+      role="presentation"
+      {...props}
+      className={clsx('navbar-sidebar__backdrop', props.className)}
+    />
+  );
+}
+
+function useTransparentNavbar(enabled: boolean) {
+  const [transparentNavbar, setTransparentNavbar] = useState(enabled);
+
+  if (enabled) {
+    useScrollPosition(({ scrollY: scrollTop }, lastPosition) => {
+      if (scrollTop < 40) {
+        if (!transparentNavbar) setTransparentNavbar(true);
+      } else {
+        if (transparentNavbar) setTransparentNavbar(false);
+      }
+    });
+  }
+
+  return { transparentNavbar };
+}
+
+export default function NavbarLayout({ children }: Props): JSX.Element {
+  const {
+    navbar: { style },
+  } = useThemeConfig();
+  const location = useLocation();
+  const isHome = location?.pathname === '/';
+
+  const mobileSidebar = useNavbarMobileSidebar();
+  const { transparentNavbar } = useTransparentNavbar(isHome);
+
+  return (
+    <nav
+      aria-label={translate({
+        id: 'theme.NavBar.navAriaLabel',
+        message: 'Main',
+        description: 'The ARIA label for the main navigation',
+      })}
+      className={clsx('navbar', 'navbar--fixed-top', {
+        'navbar--dark': style === 'dark',
+        'navbar--primary': style === 'primary',
+        'navbar-sidebar--show': mobileSidebar.shown,
+        'navbar-home': isHome,
+        'navbar-home-top': isHome && transparentNavbar,
+      })}
+    >
+      {children}
+      <NavbarBackdrop onClick={mobileSidebar.toggle} />
+      <NavbarMobileSidebar />
+    </nav>
+  );
+}