Rubix Home page development

src/components/NavBar/NavBar.jsx

@@ -0,0 +1,51 @@
+/* eslint-disable no-unused-vars */
+import { Box } from "@chakra-ui/react";
+import { Outlet, Link, useLocation } from "react-router-dom";
+
+const NavBar = () => {
+  const location = useLocation();
+  return (
+    <>
+      <Box
+        display="flex"
+        color={"#fff"}
+        justifyContent={"space-around"}
+        alignItems={"center"}
+        backgroundColor={"transparent"}
+        boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
+        position={"fixed"}
+        zIndex={"999"}
+        width={"100%"}
+        top={"0px"}
+        padding={"5px"}
+      >
+        <Link to="/">
+          <Box
+            display={"flex"}
+            alignItems={"baseline"}
+            justifyContent={"center"}
+          >
+            <h1>Rubix</h1>
+          </Box>
+        </Link>
+
+        <Box
+          display={"flex"}
+          gap={"49px"}
+          alignItems={"center"}
+          sx={{
+            "@media (max-width: 1024px)": {
+              gap: "22px",
+            },
+          }}
+        >
+          <Link to="/">Homepage</Link>
+          <Link to="/LearnPage">Learn</Link>
+        </Box>
+      </Box>
+      <Outlet />
+    </>
+  );
+};
+
+export default NavBar;