feat: add a feature flagged blank navbar (#4365)

* add some initial infra for blank navbar

* add blank navbar

* add new files

* use web3status

* remove unused mobile flag

* remove colors
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/components/NavBar/Navbar.css.ts

+import { style } from '@vanilla-extract/css'
+
+import { sprinkles } from '../../nft/css/sprinkles.css'
+
+export const nav = style([
+  sprinkles({
+    paddingX: '20',
+    paddingY: '12',
+    width: 'full',
+    height: '72',
+    zIndex: '2',
+    borderStyle: 'solid',
+  }),
+  {
+    borderWidth: '0.5px',
+    backdropFilter: 'blur(24px)',
+  },
+])
+
+export const mobileWalletContainer = style([
+  sprinkles({
+    position: 'fixed',
+    display: 'flex',
+    bottom: '0',
+    right: '1/2',
+    marginY: '0',
+    marginX: 'auto',
+  }),
+  {
+    transform: 'translate(50%,-50%)',
+  },
+])

src/components/NavBar/Navbar.tsx

+import Web3Status from 'components/Web3Status'
+import { useWindowSize } from 'hooks/useWindowSize'
+
+import { breakpoints } from '../../nft/css/sprinkles.css'
+import * as styles from './Navbar.css'
+
+const MobileNavbar = () => {
+  return (
+    <>
+      <nav className={styles.nav} />
+      <div className={styles.mobileWalletContainer}>
+        <Web3Status />
+      </div>
+    </>
+  )
+}
+
+const Navbar = () => {
+  const { width: windowWidth } = useWindowSize()
+
+  if (windowWidth && windowWidth < breakpoints.desktopXl) {
+    return <MobileNavbar />
+  }
+
+  return <nav className={styles.nav} />
+}
+
+export default Navbar

src/components/NavBar/index.ts

+import Navbar from './Navbar'
+
+export default Navbar

src/pages/App.tsx

@@ -5,6 +5,7 @@ import Loader from 'components/Loader'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
 import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
+import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { lazy, Suspense, useEffect } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
@@ -17,6 +18,7 @@ import { useAnalyticsReporter } from '../components/analytics'
 import ErrorBoundary from '../components/ErrorBoundary'
 import Header from '../components/Header'
 import Polling from '../components/Header/Polling'
+import Navbar from '../components/NavBar'
 import Popups from '../components/Popups'
 import { useIsExpertMode } from '../state/user/hooks'
 import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader'
@@ -46,17 +48,15 @@ const AppWrapper = styled.div`
   align-items: flex-start;
 `
 
-const BodyWrapper = styled.div`
+const BodyWrapper = styled.div<{ navBarFlag: NavBarVariant }>`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 120px 16px 0px 16px;
+  padding: ${({ navBarFlag }) => (navBarFlag === NavBarVariant.Enabled ? `72px 16px 0px 16px` : `120px 16px 0px 16px`)};
   align-items: center;
   flex: 1;
-  z-index: 1;
-
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    padding: 4rem 8px 16px 8px;
+    padding: 52px 8px 16px 8px;
   `};
 `
 
@@ -105,6 +105,7 @@ const LazyLoadSpinner = () => (
 export default function App() {
   const isLoaded = useFeatureFlagsIsLoaded()
   const exploreFlag = useExploreFlag()
+  const navBarFlag = useNavBarFlag()
 
   const { pathname } = useLocation()
   const currentPage = getCurrentPageFromLocation(pathname)
@@ -140,10 +141,8 @@ export default function App() {
       <ApeModeQueryParamReader />
       <AppWrapper>
         <Trace page={currentPage}>
-          <HeaderWrapper>
-            <Header />
-          </HeaderWrapper>
-          <BodyWrapper>
+          <HeaderWrapper>{navBarFlag === NavBarVariant.Enabled ? <Navbar /> : <Header />}</HeaderWrapper>
+          <BodyWrapper navBarFlag={navBarFlag}>
             <Popups />
             <Polling />
             <TopLevelModals />