make navbar sticky

KavetiRohith · Sep 14, 2023 · 0883325 · 0883325
1 parent 9b46c8d
commit 0883325
Showing 1 changed file with 24 additions and 8 deletions.
diff --git 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,22 +42,30 @@ 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}
           />
         </GridItem>
       </Show>
       <GridItem area="main">
-        <Box paddingLeft={3}>
+        <Box paddingLeft={3} marginTop={20}>
           <GameHeading gameQuery={gameQuery} />
           <HStack spacing={5} marginBottom={5}>
             <PlatformSelector