Component navbar

.eslintrc.js

-module.exports = {
+module.export = {
     "env": {
         "browser": true,
         "es2021": true

src/components/Navbar.jsx

+import * as React from "react";
+import PropTypes from "prop-types";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import useScrollTrigger from "@mui/material/useScrollTrigger";
+import Slide from "@mui/material/Slide";
+
+import { NavLink } from "./styled";
+
+function HideOnScroll(props) {
+  const { children, window } = props;
+  const trigger = useScrollTrigger({
+    target: window ? window() : undefined,
+  });
+
+  return (
+    <Slide appear={false} direction="down" in={!trigger}>
+      {children}
+    </Slide>
+  );
+}
+
+HideOnScroll.propTypes = {
+  children: PropTypes.element.isRequired,
+  window: PropTypes.func,
+};
+
+export default function Navbar(props) {
+  return (
+    <HideOnScroll {...props}>
+      <AppBar sx={{ background: "#074B6B", px: 5 }}>
+        <Toolbar>
+          <Typography 
+            variant="h6"
+            component="div"
+            sx={{ flexGrow: 1 }}
+          >
+            Logo
+          </Typography>
+          <NavLink href="#" edge="end" >Productos</NavLink>
+          <NavLink href="#">Quiénes somos</NavLink>
+          <NavLink href="#">Blog</NavLink>
+          <NavLink href="#">Clientes</NavLink>
+          <NavLink href="#">Contáctanos</NavLink>
+        </Toolbar>
+      </AppBar>
+    </HideOnScroll>
+  );
+}

src/components/styled.js

+import styled from "styled-components";
+
+export const NavLink = styled.a`
+  color: #ffffff;
+  margin-left: 20px;
+  text-decoration: inherit;
+  color: inherit;
+  cursor: auto;
+  &:hover {
+    border-bottom: 2px solid #42C3D8;
+    cursor: pointer;
+  }
+`;

src/layouts/MainLayout.jsx

+import * as React from "react";
+import Toolbar from "@mui/material/Toolbar";
+import CssBaseline from "@mui/material/CssBaseline";
+import Container from "@mui/material/Container";
+import PropTypes from "prop-types";
+
+import Navbar from "../components/Navbar";
+
+MainLayout.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export default function MainLayout({ children }) {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Navbar  />
+      <Toolbar />
+      <Container>
+        { children }
+      </Container>
+      
+    </React.Fragment>
+  );
+}

src/views/Home.jsx

+import React from "react";
+
+const Home = () => {
+  return (
+    <div>Listo</div>
+  );
+};
+
+export default Home;