create adaptive breadcrumbs

src/App.js

@@ -1,16 +1,15 @@
 import './App.scss';
 import {Router, Route, Link, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
-import Header from "./components/Header";
-import Footer from "./components/Footer";
+import MainPage from "./pages/MainPage";
+
 
 const history = createHistory();
 
 function App() {
   return (
       <Router history={history}>
-          <Header/>
-          <Footer/>
+        <MainPage/>
       </Router>
   )
 }

src/components/Breadcrumbs.jsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link from "react-router-dom/es/Link";
+import Stack from '@mui/material/Stack';
+import {Typography, useMediaQuery} from "@mui/material";
+import background from "../img/breadcrumbs/bg-breadcrumbs.png";
+
+const Breadcrumb = ({links=['this page']}) => {
+    const matches = useMediaQuery('(max-width:899px)');
+
+    let arr = links.map(i => {
+        let link = Array.from(i).map(j => j === ' ' ? '-' : j).join('').toLowerCase()
+        return  <Link
+                    style={{
+                        color: "#fff",
+                        textDecoration: "none",
+                        fontSize: "13px"
+                    }}
+                    to={`/${link}`}> {i.toUpperCase()}
+                </Link>
+    });
+    arr.unshift(<Link style={{
+        color: "#fff",
+        textDecoration: "none",
+        fontSize: "13px"
+    }} to="/"> MAIN PAGE </Link>)
+
+    return (
+        <article
+            style={{
+                background: `url(${background}) center repeat`,
+                padding: "40px 0",
+                height: "260px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                position: "relative"
+            }}
+        >
+            <Typography
+                fontWeight={300}
+                color="#fff"
+                variant={matches ? "h4" : "h3"}
+            >
+                {links[links.length-1].toUpperCase()}
+            </Typography>
+            <Stack
+                spacing={2}
+                position="absolute"
+                bottom="50px"
+            >
+                <Breadcrumbs color="#fff" separator="›" aria-label="breadcrumb">
+                    {arr}
+                </Breadcrumbs>
+            </Stack>
+        </article>
+    );
+}
+export default Breadcrumb;

src/components/Header.jsx

@@ -94,7 +94,7 @@ const Header = () => {
     }
 
     return (
-        <AppBar sx={{padding: '10px 0'}} className='Header' position="fixed" enableColorOnDark={true}>
+        <AppBar sx={{padding: '10px 0', backgroundColor: 'rgb(131,179,175)'}} className='Header' position="fixed" enableColorOnDark={true}>
             <Container maxWidth="xl">
                 <Toolbar disableGutters>
                     {/*Основной логотип*/}

src/pages/MainPage.jsx

@@ -0,0 +1,18 @@
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+
+const MainPage = () => {
+    return (
+        <>
+            <Header/>
+            <main>
+                <article>
+
+                </article>
+            </main>
+            <Footer/>
+        </>
+    )
+}
+
+export default MainPage

src/scss/Breadcrumbs.scss

@@ -0,0 +1 @@
+

src/scss/Header.scss

@@ -1,5 +1,4 @@
 .Header {
-  padding: 10px 0;
   &__Logo {
     font-family: inherit;
     text-decoration: none;