remade frontend

frontend/src/Components/Navbar/Navbar.module.scss

@@ -0,0 +1,5 @@
+.navbar {
+  display: grid;
+  grid-template-columns: 10% 80% 10%;
+  padding: 5px 10px;
+}

frontend/src/Components/Navbar/Navbar.tsx

@@ -0,0 +1,33 @@
+import { Navbar as BsNavbar, Container } from "react-bootstrap";
+// import styles from "./Navbar.module.scss";
+import Searchbar from "../Searchbar/Searchbar";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+
+const Navbar = () => {
+  const [searchText, setSearchText] = useState<string>("");
+  const navigate = useNavigate();
+
+  function onSearch() {
+    navigate(`/search?search=${searchText}`);
+    setSearchText("");
+  }
+
+  return (
+    <BsNavbar expand="lg" className={"bg-light "}>
+      <Container>
+        <Link to={"/"} style={{ textDecoration: "none" }}>
+          <BsNavbar.Brand>JellyGlass</BsNavbar.Brand>
+        </Link>
+        <BsNavbar.Toggle />
+        <BsNavbar.Collapse>
+          <Container className="justify-content-center d-flex">
+            <Searchbar text={searchText} setText={setSearchText} onSearch={onSearch} />
+          </Container>
+        </BsNavbar.Collapse>
+      </Container>
+    </BsNavbar>
+  )
+}
+
+export default Navbar;