refactor: centralize Navbar in _app.js (#2560)

Co-authored-by: Akshat Nema <[email protected]>
asyncapi · Feb 28, 2024 · 297340c · 297340c
1 parent 3cb3a42
commit 297340c
Show file tree

Hide file tree

Showing 13 changed files with 6 additions and 55 deletions.
diff --git a/components/layout/BlogLayout.js b/components/layout/BlogLayout.js
@@ -5,10 +5,8 @@ import moment from 'moment';
 import Head from '../Head';
 import BlogContext from '../../context/BlogContext';
 import TOC from '../TOC';
-import NavBar from '../navigation/NavBar';
 import Container from './Container';
 import AuthorAvatars from '../AuthorAvatars';
-import StickyNavbar from '../navigation/StickyNavbar';
 import AnnouncementHero from '../campaigns/AnnoucementHero';
 
 export default function BlogLayout({ post, children }) {
@@ -22,9 +20,6 @@ export default function BlogLayout({ post, children }) {
 
   return (
     <BlogContext.Provider value={{ post }}>
-      <StickyNavbar data-testid="BlogLayout-Navbar">
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
       <AnnouncementHero className="my-4 mx-8" />
       <Container cssBreakingPoint="lg" flex flexReverse>
         <TOC

diff --git a/components/layout/DocsLayout.js b/components/layout/DocsLayout.js
@@ -7,10 +7,8 @@ import TOC from '../TOC';
 import DocsNav from '../navigation/DocsNav';
 import DocsMobileMenu from '../navigation/DocsMobileMenu';
 import DocsButton from '../buttons/DocsButton';
-import NavBar from '../navigation/NavBar';
 import ArrowRight from '../icons/ArrowRight';
 import Feedback from '../Feedback';
-import StickyNavbar from '../navigation/StickyNavbar';
 import Heading from '../typography/Heading';
 import AnnouncementHero from '../campaigns/AnnoucementHero';
 import { SearchButton, DOCS_INDEX_NAME } from '../AlgoliaSearch';
@@ -72,9 +70,6 @@ export default function DocsLayout({ post, navItems = {}, children }) {
 
   return (
     <DocsContext.Provider value={{ post, navItems }}>
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
       <div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
         {showMenu && (
           <DocsMobileMenu

diff --git a/components/layout/GenericLayout.js b/components/layout/GenericLayout.js
@@ -1,8 +1,6 @@
 import Head from '../Head';
-import NavBar from '../navigation/NavBar';
 import Container from './Container';
 import AnnouncementHero from '../campaigns/AnnoucementHero';
-import StickyNavbar from '../navigation/StickyNavbar';
 
 export default function GenericLayout({
   title,
@@ -20,9 +18,6 @@ export default function GenericLayout({
   return (
     <div data-testid="GenericLayout">
       <Head title={title} description={description} image={image} />
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
       <Container wide={wide}>
         <div data-testid="GenericLayout-banner">
         <AnnouncementHero

diff --git a/components/layout/GenericPostLayout.js b/components/layout/GenericPostLayout.js
@@ -2,10 +2,8 @@ import { useRouter } from 'next/router'
 import ErrorPage from 'next/error'
 import Head from '../Head'
 import GenericPostContext from '../../context/GenericPostContext'
-import NavBar from '../navigation/NavBar'
 import Container from './Container'
 import AnnouncementHero from '../campaigns/AnnoucementHero'
-import StickyNavbar from '../navigation/StickyNavbar'
 
 export default function GenericPostLayout({ post, children }) {
   if (!post) return <ErrorPage statusCode={404} />
@@ -18,9 +16,6 @@ export default function GenericPostLayout({ post, children }) {
 
   return (
     <GenericPostContext.Provider value={{ post }}>
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
       <AnnouncementHero className="text-center m-4" small={true} />
       <Container>
         <main

diff --git a/components/layout/GenericWideLayout.js b/components/layout/GenericWideLayout.js
@@ -1,5 +1,4 @@
 import Head from '../Head'
-import NavBar from '../navigation/NavBar'
 import AnnouncementHero from '../campaigns/AnnoucementHero'
 import Row from './Row'
 
@@ -18,9 +17,6 @@ export default function GenericWideLayout({
   return (
     <>
       <Head title={title} description={description} image={image} />
-      <div className="sticky top-0 w-full bg-white border-b border-gray-300 z-50">
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </div>
       <Row>
         <AnnouncementHero className="text-center m-4" small={true} />
         {children}

diff --git a/components/layout/JobsLayout.js b/components/layout/JobsLayout.js
@@ -2,11 +2,9 @@ import { useRouter } from 'next/router'
 import ErrorPage from 'next/error'
 import Head from '../Head'
 import JobsContext from '../../context/JobsContext'
-import NavBar from '../navigation/NavBar'
 import Container from './Container'
 import JobSummary from '../JobSummary'
 import ApplyJobButton from '../buttons/ApplyJob'
-import StickyNavbar from '../navigation/StickyNavbar'
 
 export default function JobsLayout({ post, children }) {
   if (!post) return <ErrorPage statusCode={404} />;
@@ -19,10 +17,6 @@ export default function JobsLayout({ post, children }) {
 
   return (
     <JobsContext.Provider value={{ post }}>
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
-
       <Container cssBreakingPoint="lg" flex flexReverse>
         <div className="">
           <JobSummary

diff --git a/components/navigation/MobileNavMenu.js b/components/navigation/MobileNavMenu.js
@@ -19,7 +19,7 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
     setOpen(menu);
   }
   return (
-    <div className="fixed top-0 z-60 inset-x-0 py-2 transition transform origin-top-right max-h-full lg:hidden overflow-y-scroll">
+    <div className="fixed top-0 z-60 inset-x-0 py-2 transition transform origin-top-right max-h-full lg:hidden overflow-y-auto">
       <div className="rounded-lg shadow-lg">
         <div className="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
           <div className="pt-5 pb-6 px-5 space-y-6">

diff --git a/pages/404.js b/pages/404.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import NavBar from '../components/navigation/NavBar';
-import StickyNavbar from '../components/navigation/StickyNavbar';
 import Heading from '../components/typography/Heading';
 import AnnouncementHero from '../components/campaigns/AnnoucementHero';
 import Button from '../components/buttons/Button';
@@ -9,9 +7,6 @@ function ErrorPage() {
   const image = '/img/illustrations/illustration.webp';
   return (
     <div className="text-center">
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
 
       <div className='items-center justify-center mt-20 flex-col md:flex-row'>
           <div>

diff --git a/pages/[lang]/index.js b/pages/[lang]/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Container from '../../components/layout/Container';
-import NavBar from '../../components/navigation/NavBar';
 import Hero from '../../components/Hero';
 import NewsletterSubscribe from '../../components/NewsletterSubscribe';
 import Sponsors from '../../components/sponsors/Sponsors';
@@ -20,7 +19,6 @@ import TextLink from '../../components/typography/TextLink';
 import GoldSponsors from '../../components/sponsors/GoldSponsors';
 import SilverSponsors from '../../components/sponsors/SilverSponsors';
 import SupportUs from '../../components/SupportUs/SupportUs';
-import StickyNavbar from '../../components/navigation/StickyNavbar';
 import GoogleCalendarButton from '../../components/buttons/GoogleCalendarButton';
 import ICSFileButton from '../../components/buttons/ICSFileButton';
 import SubscribeButton from '../../components/buttons/SubscribeButton';
@@ -38,10 +36,6 @@ function HomePage() {
   return (
     <>
       <Head />
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
-
       <main id="main-content" className="scroll-mt-5">
         <Container wide>
           <Hero className="mb-24" />

diff --git a/pages/_app.js b/pages/_app.js
@@ -15,6 +15,8 @@ import {
 } from "../lib/i18n";
 import loadLocales from "../lib/locales";
 import '../styles/globals.css'
+import StickyNavbar from '../components/navigation/StickyNavbar';
+import NavBar from '../components/navigation/NavBar';
 
 function App({ Component, pageProps, router }) {
 
@@ -36,6 +38,9 @@ function App({ Component, pageProps, router }) {
           <AlgoliaSearch>
             <div className="flex flex-col min-h-screen">
               <Banner />
+              <StickyNavbar>
+                <NavBar className="block max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8" />
+              </StickyNavbar>
               <Layout>
                 <Component {...pageProps} />
                 <ScrollButton />

diff --git a/pages/finance.js b/pages/finance.js
@@ -1,8 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import Head from "next/head";
 import Container from "../components/layout/Container";
-import StickyNavbar from "../components/navigation/StickyNavbar";
-import NavBar from "../components/navigation/NavBar";
 import AsyncAPISummary from "../components/FinancialSummary/AsyncAPISummary";
 import SponsorshipTiers from "../components/FinancialSummary/SponsorshipTiers";
 import OtherFormsComponent from "../components/FinancialSummary/OtherFormsComponent";
@@ -38,9 +36,6 @@ export default function FinancialSummary() {
         <title>{title}</title>
         <meta name="description" content={description} />
       </Head>
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
       <AsyncAPISummary/>
       <SponsorshipTiers/>
       <OtherFormsComponent/>

diff --git a/pages/index.js b/pages/index.js
@@ -10,9 +10,6 @@ function HomePage() {
   return (
     <>
       <Head />
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
       <div className="h-screen">
         <div className="flex animate-pulse w-fit mx-auto my-60 gap-4 text-black">
           <img src={loader} className="mx-auto w-16" />

diff --git a/pages/newsletter/index.js b/pages/newsletter/index.js
@@ -1,16 +1,11 @@
-import NavBar from "../../components/navigation/NavBar";
 import Head from "../../components/Head";
 import Container from '../../components/layout/Container'
-import StickyNavbar from "../../components/navigation/StickyNavbar"
 import NewsletterSubscribe from '../../components/NewsletterSubscribe'
 
 export default function NewsletterIndexPage() {
   return (
     <div>
       <Head title="Newsletter"/>
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
       <div className="py-12 mt-12">
         <Container wide>
           <NewsletterSubscribe />