Make Navbar Sticky

src/components/LayoutWithRouting.tsx

@@ -13,32 +13,31 @@ type RouteProps = {
 } & RouteComponentProps
 const Route: React.FC<RouteProps> = ({ Component, ...pathProps }) => {
   return (
-    <ErrorBoundary
-      FallbackComponent={ViewErrorFallback}
-      onReset={() => {
-        navigate('/')
-      }}
-    >
-      <Component {...pathProps} />
-    </ErrorBoundary>
+    <MainContainer>
+      <ErrorBoundary
+        FallbackComponent={ViewErrorFallback}
+        onReset={() => {
+          navigate('/')
+        }}
+      >
+        <Component {...pathProps} />
+      </ErrorBoundary>
+    </MainContainer>
   )
 }
 
 const LayoutWithRouting: React.FC = () => (
   <>
     <GlobalStyle />
-    <Router primary>
-      <Navbar default />
+
+    <Navbar default />
+    <Router primary={false}>
+      <Route default Component={HomeView} />
+      <Route path={routes.video()} Component={VideoView} />
+      <Route path={routes.search()} Component={SearchView} />
+      <Route Component={BrowseView} path={routes.browse()} />
+      <Route Component={ChannelView} path={routes.channel()} />
     </Router>
-    <MainContainer>
-      <Router primary={false}>
-        <Route default Component={HomeView} />
-        <Route path={routes.video()} Component={VideoView} />
-        <Route path={routes.search()} Component={SearchView} />
-        <Route Component={BrowseView} path={routes.browse()} />
-        <Route Component={ChannelView} path={routes.channel()} />
-      </Router>
-    </MainContainer>
   </>
 )
 

src/components/Navbar/Navbar.style.tsx

@@ -8,7 +8,7 @@ import { Link } from '@reach/router'
 type NavbarStyleProps = {
   hasFocus: boolean
 }
-
+export const NAVBAR_HEIGHT = 69
 export const Logo = styled(UnstyledLogo)`
   width: ${sizes.b12}px;
   height: ${sizes.b12}px;
@@ -77,6 +77,9 @@ export const StyledLink = styled(Link)`
 `
 
 export const Header = styled.header<NavbarStyleProps>`
+  position: sticky;
+  top: 0;
+  z-index: 99;
   display: grid;
   width: 100%;
 

src/components/Navbar/index.ts

@@ -1,2 +1,3 @@
 import Navbar from './Navbar'
+export { NAVBAR_HEIGHT } from './Navbar.style'
 export default Navbar

src/views/BrowseView.tsx

@@ -4,6 +4,7 @@ import { RouteComponentProps } from '@reach/router'
 import { ErrorBoundary } from 'react-error-boundary'
 
 import { ErrorFallback } from '@/components'
+import { NAVBAR_HEIGHT } from '@/components/Navbar'
 import { CategoryPicker, InfiniteVideoGrid, Typography } from '@/shared/components'
 import { colors, sizes } from '@/shared/theme'
 import { useQuery } from '@apollo/client'
@@ -52,7 +53,7 @@ const Header = styled(Typography)`
 const StyledCategoryPicker = styled(CategoryPicker)`
   z-index: 10;
   position: sticky;
-  top: 0;
+  top: ${NAVBAR_HEIGHT}px;
   padding: ${sizes.b5}px ${sizes.b8}px ${sizes.b2}px;
   margin: 0 calc(-1 * var(--global-horizontal-padding));
   background-color: ${colors.black};