From 0883325f2b072108fc090541f46a2bd71183c279 Mon Sep 17 00:00:00 2001
From: KavetiRohith <rohitkaveti@gmail.com>
Date: Thu, 14 Sep 2023 02:51:11 -0700
Subject: [PATCH] make navbar sticky

---
 src/App.tsx | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 084e565..7bfe3d6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,11 @@
-import { Box, Grid, GridItem, HStack, Show } from "@chakra-ui/react";
+import {
+  Box,
+  Grid,
+  GridItem,
+  HStack,
+  Show,
+  useColorMode,
+} from "@chakra-ui/react";
 import { useState } from "react";
 import NavBar from "./components/NavBar";
 import GameGrid from "./components/GameGrid";
@@ -21,6 +28,7 @@ function App() {
   const [gameQuery, setGameQuery] = useState<GameQuery>({
     page: 1,
   } as GameQuery);
+  const { colorMode } = useColorMode();
 
   return (
     <Grid
@@ -34,14 +42,22 @@ function App() {
       }}
     >
       <GridItem area="nav">
-        <NavBar
-          onSearch={(searchQuery) =>
-            setGameQuery({ ...gameQuery, searchQuery })
-          }
-        />
+        <Box
+          position="fixed"
+          top="0"
+          width="100%"
+          zIndex="sticky"
+          backgroundColor={colorMode === "dark" ? "gray.900" : "white"}
+        >
+          <NavBar
+            onSearch={(searchQuery) =>
+              setGameQuery({ ...gameQuery, searchQuery })
+            }
+          />
+        </Box>
       </GridItem>
       <Show above="lg">
-        <GridItem area="aside" paddingX={5}>
+        <GridItem area="aside" paddingX={5} marginTop={20}>
           <GenreList
             onSelectGenre={(genre) => setGameQuery({ ...gameQuery, genre })}
             selectedGenre={gameQuery.genre}
@@ -49,7 +65,7 @@ function App() {
         </GridItem>
       </Show>
       <GridItem area="main">
-        <Box paddingLeft={3}>
+        <Box paddingLeft={3} marginTop={20}>
           <GameHeading gameQuery={gameQuery} />
           <HStack spacing={5} marginBottom={5}>
             <PlatformSelector