Change navbar and footer to a reusable component

docs/src/components/FooterBackground/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import usePageType from '@site/src/hooks/usePageType';
+import { useColorMode } from '@docusaurus/theme-common';
+
+import Moon from '@site/src/components/Moon/MoonIcon';
+import DarkMoon from '@site/src/components/Moon/MoonIconDark';
+import styles from './styles.module.css';
+
+const FooterBackground = () => {
+  const { isLanding } = usePageType();
+  const currentSvgComponent =
+    useColorMode().colorMode === 'dark' ? <DarkMoon /> : <Moon />;
+
+  return (
+    <div className={styles.moonContainer}>
+      {isLanding && (
+        <>{ExecutionEnvironment.canUseViewport && currentSvgComponent}</>
+      )}
+    </div>
+  );
+};
+
+export default FooterBackground;

docs/src/components/FooterBackground/styles.module.css

@@ -0,0 +1,8 @@
+.moonContainer {
+  position: relative;
+  margin-top: 106px;
+}
+
+[class*='footerLanding'] {
+  margin-top: -106px;
+}

docs/src/components/Hero/LandingBackground/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Planets from '@site/src/components/Hero/Planets';
+import Stars from '@site/src/components/Hero/Stars';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import styles from './styles.module.css';
+
+const LandingBackground = () => {
+  return (
+    <div className={styles.heroBackground}>
+      {ExecutionEnvironment.canUseViewport && (
+        <>
+          <Planets />
+          <Stars />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default LandingBackground;

docs/src/components/Hero/LandingBackground/styles.module.css

@@ -0,0 +1,42 @@
+.heroBackground {
+  position: absolute;
+  top: 0;
+
+  background: linear-gradient(
+    180deg,
+    var(--swm-blue-light-40) 0%,
+    var(--swm-blue-light-20) 23%,
+    #ffffff 46%
+  );
+  width: 100%;
+  height: 130vh;
+  min-height: 70vw;
+  overflow: hidden;
+  z-index: -20;
+}
+
+[data-theme='dark'] .heroBackground {
+  background: none;
+  background-color: var(--swm-navy-dark-140);
+}
+
+@media (max-width: 996px) {
+  [class*='logoWrapperLanding'] {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .heroBackground {
+    height: 70vh;
+  }
+}
+
+@media (max-width: 420px) {
+  .navbarLanding {
+    padding: 0 1.5rem;
+  }
+}

docs/src/pages/index.js

@@ -4,6 +4,8 @@ import styles from './styles.module.css';
 import Wave from '@site/src/components/Wave';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import HomepageStartScreen from '@site/src/components/Hero/StartScreen';
+import LandingBackground from '@site/src/components/Hero/LandingBackground';
+import FooterBackground from '../components/FooterBackground';
 import Playground from '@site/src/components/Playground';
 import GestureFeatures from '@site/src/components/GestureFeatures';
 import Testimonials from '@site/src/components/Testimonials';
@@ -18,6 +20,7 @@ function Home() {
     <Layout
       title={`React Native Gesture Handler`}
       description="Declarative API exposing platform native touch and gesture system to React Native.">
+      <LandingBackground />
       <div className={styles.container}>
         <HomepageStartScreen />
         <Playground />
@@ -31,6 +34,7 @@ function Home() {
         <Sponsors />
         <HireUsSection />
       </div>
+      <FooterBackground />
     </Layout>
   );
 }

docs/src/theme/Footer/Layout/index.js

@@ -1,26 +1,16 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import { useColorMode } from '@docusaurus/theme-common';
-
-import Moon from '@site/src/components/Moon/MoonIcon';
-import DarkMoon from '@site/src/components/Moon/MoonIconDark';
 import usePageType from '@site/src/hooks/usePageType';
 
 export default function FooterLayout({ style, links, logo, copyright }) {
   const { isLanding } = usePageType();
-  const currentSvgComponent =
-    useColorMode().colorMode === 'dark' ? <DarkMoon /> : <Moon />;
 
   return (
     <footer
       className={clsx('footer', isLanding && styles.footerLanding, {
         'footer--dark': style === 'dark',
       })}>
-      {isLanding && (
-        <>{ExecutionEnvironment.canUseViewport && currentSvgComponent}</>
-      )}
       <div className="container container-fluid">
         {links}
         {(logo || copyright) && (

docs/src/theme/Navbar/Layout/index.js

@@ -7,9 +7,6 @@ import {
 } from '@docusaurus/theme-common/internal';
 import { translate } from '@docusaurus/Translate';
 import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
-import Planets from '@site/src/components/Hero/Planets';
-import Stars from '@site/src/components/Hero/Stars';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import styles from './styles.module.css';
 import usePageType from '@site/src/hooks/usePageType';
 
@@ -23,19 +20,6 @@ function NavbarBackdrop(props) {
   );
 }
 
-const LandingBackground = () => {
-  return (
-    <div className={styles.heroBackground}>
-      {ExecutionEnvironment.canUseViewport && (
-        <>
-          <Planets />
-          <Stars />
-        </>
-      )}
-    </div>
-  );
-};
-
 export default function NavbarLayout({ children }) {
   const {
     navbar: { hideOnScroll, style },
@@ -46,7 +30,6 @@ export default function NavbarLayout({ children }) {
 
   return (
     <div>
-      {isLanding && <LandingBackground />}
       <nav
         ref={navbarRef}
         aria-label={translate({

docs/src/theme/Navbar/Layout/styles.module.css

@@ -16,46 +16,3 @@
   padding-top: 2rem;
   padding: 0 1.25rem 0 1.5rem;
 }
-
-.heroBackground {
-  position: absolute;
-  top: 0;
-
-  background: linear-gradient(
-    180deg,
-    var(--swm-blue-light-40) 0%,
-    var(--swm-blue-light-20) 23%,
-    #ffffff 46%
-  );
-  width: 100%;
-  height: 130vh;
-  min-height: 70vw;
-  overflow: hidden;
-  z-index: -20;
-}
-
-[data-theme='dark'] .heroBackground {
-  background: none;
-  background-color: var(--swm-navy-dark-140);
-}
-
-@media (max-width: 996px) {
-  [class*='logoWrapperLanding'] {
-    width: 50px;
-    height: 50px;
-    display: flex;
-    justify-content: center;
-  }
-}
-
-@media (max-width: 768px) {
-  .heroBackground {
-    height: 70vh;
-  }
-}
-
-@media (max-width: 420px) {
-  .navbarLanding {
-    padding: 0 1.5rem;
-  }
-}