feat: add logo and sticky navbar

src/components/Header/Header.scss

 @use "styles/index" as *;
 
 .header {
+  &-logo {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    @include desktop {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
   &-toolbar {
-    padding: 0 !important;
+    padding: 0;
     justify-content: center;
 
     @include desktop {
-      padding: 0 20px !important;
+      padding: 0 20px;
       justify-content: flex-start;
     }
 
-    &__iconDrawer {
-      display: none !important;
+    &__tablet {
+      display: none;
 
       @include desktop {
-        display: inline-flex !important;
+        display: block;
+      }
+
+      .iconDrawer {
       }
     }
 

src/components/Header/HeaderLogo.tsx

+import { Box } from "@mui/material";
+import { PageUrl } from "configuration/enum";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const HeaderLogo = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Box className="header-logo" onClick={() => navigate(PageUrl.ROOT)}>
+      <img
+        src="https://meu-solutions.com/wp-content/uploads/2020/08/MeU-logo-newest-08-150.png"
+        alt="logo"
+      />
+    </Box>
+  );
+};
+
+export default HeaderLogo;

src/components/Header/index.tsx

@@ -4,8 +4,6 @@ import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
-import Button from "@mui/material/Button";
-import HomeIcon from "@mui/icons-material/Home";
 import Sidenav from "../Sidenav";
 import { Typography } from "@mui/material";
 import { useAppDispatch, useAppSelector } from "app/hooks";
@@ -13,6 +11,8 @@ import { getCategories } from "./headerSlice";
 import { handleLoading } from "app/globalSlice";
 import { headerSelector } from "app/selectors";
 import { useNavigate } from "react-router-dom";
+import { PageUrl } from "configuration/enum";
+import HeaderLogo from "./HeaderLogo";
 
 export default function Header() {
   const dispatch = useAppDispatch();
@@ -43,12 +43,13 @@ export default function Header() {
   };
 
   return (
-    <Box sx={{ display: "flex" }} className="header">
+    <>
       <AppBar
         component="nav"
         position="sticky"
-        sx={{ background: "transparent", overflow: "hidden" }}
+        sx={{ background: "white", overflow: "hidden" }}
       >
+        <Box className="header">
           <Toolbar
             sx={{
               display: "flex",
@@ -57,24 +58,25 @@ export default function Header() {
             }}
             className="header-toolbar"
           >
+            <Box className="header-toolbar__tablet">
               <IconButton
                 color="inherit"
                 aria-label="open drawer"
                 edge="start"
                 onClick={handleDrawerToggle}
                 sx={{ mr: 2 }}
-            className="header-toolbar__iconDrawer"
+                className="iconDrawer"
               >
                 <MenuIcon />
               </IconButton>
+              <HeaderLogo />
+            </Box>
             <Box
               sx={{ gap: 2 }}
               ref={headerRef}
               className="header-toolbar__navbar"
             >
-            <Button sx={{ padding: 0, minWidth: "auto", color: "#000" }}>
-              <HomeIcon />
-            </Button>
+              <HeaderLogo />
               <Box
                 className="header-list"
                 component="ul"
@@ -126,12 +128,13 @@ export default function Header() {
               </Box>
             </Box>
           </Toolbar>
+        </Box>
       </AppBar>
       <Sidenav
         handleDrawerToggle={handleDrawerToggle}
         navItems={categoryData}
         mobileOpen={mobileOpen}
       />
-    </Box>
+    </>
   );
 }

src/index.tsx

+import { StyledEngineProvider } from "@mui/material";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux/es/exports";
@@ -10,7 +11,9 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <Provider store={store}>
+    <StyledEngineProvider injectFirst>
       <Routers />
+    </StyledEngineProvider>
   </Provider>
 );