Minor changes

src/App.js

@@ -4,6 +4,7 @@ import { Helmet } from 'react-helmet-async';
 import i18next from 'i18next';
 import history from './store/utils/history';
 import AppRoutes from './AppRoutes';
+import Header from './components/Header/Header';
 
 const App = () => (
     <>
@@ -13,6 +14,7 @@ const App = () => (
             {i18next.t('app.title')}
           </title>
         </Helmet>
+          <Header/>
             <main className="l-page">
                 <AppRoutes />
             </main>

src/components/MUI/NavbarComponent.js → src/components/Header/Header.js

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from "react";
-import { SearchInput } from "./NavbarComponent.styled";
+import { HeaderContainer, SearchInput } from "./Header.styled";
 import {
   AppBar,
   Badge,
@@ -16,7 +16,7 @@ import MailIcon from "@mui/icons-material/EmailOutlined";
 import Autorenew from "@mui/icons-material/Autorenew";
 import AccountCircle from "@mui/icons-material/PersonOutlineOutlined";
 import SearchIcon from "@mui/icons-material/Search";
-import Drawer from "./DrawerComponent";
+import Drawer from "../MUI/DrawerComponent";
 import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton";
 import { PRIMARY_YELLOW_COLOR } from "../../constants/stylesConstants";
 import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
@@ -25,7 +25,7 @@ import { MyPosts } from "../Popovers/MyPosts/MyPosts";
 import { MyMessages } from "../Popovers/MyMessages/MyMessages";
 import { MyProfile } from "../Popovers/MyProfile/MyProfile";
 
-const NavbarComponent = () => {
+const Header = () => {
   const [openDrawer, setOpenDrawer] = useState(false);
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("md"));
@@ -45,15 +45,7 @@ const NavbarComponent = () => {
 
   const drawerContent = useMemo(
     () => (
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          mt: 4,
-        }}
-      >
+      <HeaderContainer>
         <PrimaryButton
           type="submit"
           variant="contained"
@@ -107,7 +99,7 @@ const NavbarComponent = () => {
             <Typography sx={{ ml: 2 }}>Moj profil</Typography>
           </IconButton>
         </Box>
-      </Box>
+      </HeaderContainer>
     ),
     [handleToggleDrawer]
   );
@@ -302,4 +294,4 @@ const NavbarComponent = () => {
   );
 };
 
-export default NavbarComponent;
+export default Header;

src/components/Header/Header.styled.js

@@ -0,0 +1,24 @@
+import { Box, TextField } from "@mui/material";
+import styled from "styled-components";
+
+export const SearchInput = styled(TextField)`
+  margin-left: 3.8rem;
+  background-color: #f4f4f4;
+  width: 45%;
+  max-width: 100%;
+  @media (max-width: 1100px) {
+    width: 36%;
+  }
+  @media (max-width: 900px) {
+    width: 54%;
+  }
+  @media (max-width: 600px) {
+    width: 36%;
+  }
+`;
+export const HeaderContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;

src/components/MUI/Examples/ModalsExample.js

@@ -1,63 +1,63 @@
-import React, { useState } from 'react';
-import { Button, Divider, Paper, Typography } from '@mui/material';
-import DialogComponent from '../DialogComponent';
-import DrawerComponent from '../DrawerComponent';
-import PopoverComponent from '../PopoverComponent';
+import React from 'react';
+// import { Button, Divider, Paper, Typography } from '@mui/material';
+// import DialogComponent from '../DialogComponent';
+// import DrawerComponent from '../DrawerComponent';
+// import PopoverComponent from '../PopoverComponent';
 
 const Modals = () => {
-	const [dialogOpen, setDialogOpen] = useState(false);
-	const [drawerOpen, setDrawerOpen] = useState(false);
-	const [popoverOpen, setPopoverOpen] = useState(false);
-	const [anchorEl, setAnchorEl] = useState(null);
+	// const [dialogOpen, setDialogOpen] = useState(false);
+	// const [drawerOpen, setDrawerOpen] = useState(false);
+	// const [popoverOpen, setPopoverOpen] = useState(false);
+	// const [anchorEl, setAnchorEl] = useState(null);
 
-	return (
-		<Paper
-			sx={{
-				p: 2,
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-            elevation={5}
-		>
-			<Typography variant="h4" gutterBottom align="center">
-				Modals Example
-			</Typography>
-			<Divider />
-			<Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
-			<Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button>
-			<Button
-				onClick={(e) => {
-					setPopoverOpen(true);
-					setAnchorEl(e.currentTarget);
-				}}
-			>
-				Open Popover
-			</Button>
-			<DialogComponent
-				title="Dialog Title"
-				content={<Typography>Dialog Content</Typography>}
-				open={dialogOpen}
-				onClose={() => setDialogOpen(false)}
-				maxWidth="md"
-				fullWidth
-				responsive
-			/>
-			<DrawerComponent
-				anchor="left"
-				content={<Typography sx={{ p: 2 }}>Drawer Content</Typography>}
-				open={drawerOpen}
-				toggleOpen={() => setDrawerOpen(!drawerOpen)}
-			/>
-			<PopoverComponent
-				anchorEl={anchorEl}
-				open={popoverOpen}
-				onClose={() => {
-					setPopoverOpen(false);
-					setAnchorEl(null);
-				}}
-				content={<Typography sx={{ p: 2 }}>Popover Content</Typography>}
-			/>
-		</Paper>
+	return (<></>
+		// <Paper
+		// 	sx={{
+		// 		p: 2,
+		// 		display: 'flex',
+		// 		flexDirection: 'column',
+		// 	}}
+        //     elevation={5}
+		// >
+		// 	<Typography variant="h4" gutterBottom align="center">
+		// 		Modals Example
+		// 	</Typography>
+		// 	<Divider />
+		// 	<Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
+		// 	<Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button>
+		// 	<Button
+		// 		onClick={(e) => {
+		// 			setPopoverOpen(true);
+		// 			setAnchorEl(e.currentTarget);
+		// 		}}
+		// 	>
+		// 		Open Popover
+		// 	</Button>
+		// 	<DialogComponent
+		// 		title="Dialog Title"
+		// 		content={<Typography>Dialog Content</Typography>}
+		// 		open={dialogOpen}
+		// 		onClose={() => setDialogOpen(false)}
+		// 		maxWidth="md"
+		// 		fullWidth
+		// 		responsive
+		// 	/>
+		// 	<DrawerComponent
+		// 		anchor="left"
+		// 		content={<Typography sx={{ p: 2 }}>Drawer Content</Typography>}
+		// 		open={drawerOpen}
+		// 		toggleOpen={() => setDrawerOpen(!drawerOpen)}
+		// 	/>
+		// 	<PopoverComponent
+		// 		anchorEl={anchorEl}
+		// 		open={popoverOpen}
+		// 		onClose={() => {
+		// 			setPopoverOpen(false);
+		// 			setAnchorEl(null);
+		// 		}}
+		// 		content={<Typography sx={{ p: 2 }}>Popover Content</Typography>}
+		// 	/>
+		// </Paper>
 	);
 };
 

src/components/MUI/NavbarComponent.styled.js

@@ -1,18 +0,0 @@
-import { TextField } from "@mui/material";
-import styled from "styled-components";
-
-export const SearchInput = styled(TextField)`
-    margin-left: 3.8rem;
-    background-color: #F4F4F4;
-    width: 45%;
-    max-width: 100%;
-    @media (max-width: 1100px) {
-        width: 36%;
-    }
-    @media (max-width: 900px) {
-        width: 54%;
-    }
-    @media (max-width: 600px) {
-        width: 36%;
-    }
-`

src/pages/HomePage/HomePageMUI.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import Navbar from '../../components/MUI/NavbarComponent';
 import Modals from '../../components/MUI/Examples/ModalsExample';
 import DataGrid from '../../components/MUI/Examples/DataGridExample';
 import PagingSortingFiltering from '../../components/MUI/Examples/PagingSortingFilteringExample';
@@ -11,7 +10,6 @@ import { GridStyled } from './HomePage.styled';
 const HomePage = () => {
 	return (
 		<>
-			<Navbar />
 			<Box sx={{ backgroundColor: '#f4f4f4', pt: 14, px: 4 }}>
 				<GridStyled container spacing={2} justifyContent="center">
 					<GridStyled item xs={12} md={3}>