created mainContainer component and added responsive navbar

src/App.js

-import React from 'react';
-import { Router } from 'react-router-dom';
-import { Helmet } from 'react-helmet-async';
-import i18next from 'i18next';
-import history from './store/utils/history';
-import AppRoutes from './AppRoutes';
-
-const App = () => (
+import React from "react";
+import { Router } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import i18next from "i18next";
+import history from "./store/utils/history";
+import MainContainer from "./components/Section/MainContainer";
+import AppRoutes from "./AppRoutes";
+const App = () => {
+  // const { pathname } = useLocation();
+  return (
     <>
       <Router history={history}>
         <Helmet>
-          <title>
-            {i18next.t('app.title')}
-          </title>
+          <title>{i18next.t("app.title")}</title>
         </Helmet>
-            <main className="l-page">
-                <AppRoutes />
-            </main>
+        <MainContainer>
+          <AppRoutes />
+        </MainContainer>
       </Router>
-
     </>
   );
+};
 
-export default App;
+export default App;

src/assets/styles/_typography.scss

 
 .text-black{
   color: $mainBlack;
+}
+
+.text-blue{
+  color: $mainBlue;
+}
+
+.text-grey9d{
+  color: $grey-9D;
 }

src/assets/styles/_variables.scss

 $mainBlack: #272727;
 $grayFD: #FDFDFD;
 
+// heights from figma
+$navHeight: 81px;
+
 // Colors
 $color-primary: #024f86;
 $color-primary-light: #024f86;
 $grey-7: rgba(128, 130, 133, 0.5);
 $grey-8: rgba(201, 214, 219, 0.25);
 $grey-9: #ebeff2;
+$grey-9D: #9d9d9d;
 $grey-10: #f0f5f6;
 $grey-11: #8b8b8b;
 $grey-12: #b0bfc540;

src/assets/styles/components/_nav.scss

 // smooth transition from app-bg color to navbar bg-color
 .navLinks-cont{
     background: linear-gradient(90deg, rgba(255,255,255,0.25) 15%, white);
+    height: $navHeight,
 }
 
 .search-Icon{

src/components/MUI/NavbarComponent.js

-import React, { useState, useMemo, useContext } from "react";
+import React, { useState, useMemo } from "react";
 import {
   AppBar,
   // Badge,
   Toolbar,
   Typography,
   List,
-  ListItem,
+  // ListItem,
   ListItemButton,
   ListItemIcon,
   ListItemText,
   useMediaQuery,
+  Button,
 } from "@mui/material";
-import HrLogo from "../../assets/images/hrcenter.png";
+import HrLogo from "../../assets/images/HR.png";
+// import x from "../../assets/images/x.png";
+import avatarLogo from "../../assets/images/Avatar.png";
 import searchIcon from "../../assets/images/Vector.png";
 import { useTheme } from "@mui/system";
 import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
 // import ShoppingBasketIcon from "@mui/icons-material/ShoppingBasket";
-import Brightness4Icon from "@mui/icons-material/Brightness4";
-import Brightness7Icon from "@mui/icons-material/Brightness7";
+// import Brightness4Icon from "@mui/icons-material/Brightness4";
+// import Brightness7Icon from "@mui/icons-material/Brightness7";
 // import MenuList from "./MenuListComponent";
 import Drawer from "./DrawerComponent";
-import { ColorModeContext } from "../../context/ColorModeContext";
+// import { ColorModeContext } from "../../context/ColorModeContext";
 import { useTranslation } from "react-i18next";
+import CloseIcon from "@mui/icons-material/Close";
+import LogoutIcon from "@mui/icons-material/Logout";
 
 const NavbarComponent = () => {
   const navItems = [
   const [openDrawer, setOpenDrawer] = useState(false);
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("sm"));
-  const toggleColorMode = useContext(ColorModeContext);
+  // const toggleColorMode = useContext(ColorModeContext);
 
   const { t } = useTranslation();
 
 
   const drawerContent = useMemo(
     () => (
-      <List>
-        {navItems.map((n) => (
-          <ListItemButton key={n} divider onClick={handleToggleDrawer}>
-            <ListItemIcon>
-              <ListItemText
-                variant="body1"
-                sx={{
-                  marginRight: "50px",
-                  cursor: "pointer",
-                  textAlign: "right",
-                  lineHeight: "20.11px",
-                  fontWeight: "400",
-                  color: "text.primary",
-                  marginY: "0",
-                  padding: "0",
-                }}
-                className="text-black"
-              >
-                {t("nav." + n)}
-              </ListItemText>
-            </ListItemIcon>
-          </ListItemButton>
-        ))}
-        <ListItem divider>
-          <IconButton onClick={toggleColorMode}>
-            <ListItemText>Toggle {theme.palette.mode} mode</ListItemText>
-            {theme.palette.mode === "dark" ? (
-              <Brightness7Icon />
-            ) : (
-              <Brightness4Icon />
-            )}
+      <div style={{ width: "100vw", padding: "36px" }}>
+        <div
+          className="flex-center"
+          style={{ justifyContent: "space-between", marginBottom: "20px" }}
+        >
+          <Typography
+            sx={{ fontWeight: 600, fontSize: "18px", letterSpacing: "1.5px" }}
+          >
+            Navigacija
+          </Typography>
+          {/* <img src={x}/> */}
+          <IconButton onClick={handleToggleDrawer}>
+            <CloseIcon />
           </IconButton>
-        </ListItem>
-      </List>
+        </div>
+        <div className="flex-center flex-col">
+          <img src={avatarLogo} width="64px" height="64px" />
+          <Typography
+            variant="h5"
+            sx={{ fontSize: "18px", marginTop: "15px", }}
+            className="text-blue"
+          >
+            Danijela Ranđelović
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{ fontSize: "14px", marginTop: "8px" }}
+            className="text-grey9d"
+          >
+            HR Specialist
+          </Typography>
+          <div className="hr" style={{ width: "90%", marginTop: "18px" }}></div>
+        </div>
+        <List>
+          {navItems.map((n) => (
+            <ListItemButton key={n} onClick={handleToggleDrawer}>
+              <ListItemIcon>
+                <ListItemText
+                  variant="body1"
+                  sx={{
+                    // marginRight: "50px",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    lineHeight: "17.6px",
+                    fontWeight: "400",
+                    color: "#353535",
+                    marginY: "0",
+                    padding: "0",
+                  }}
+                  className="text-black"
+                >
+                  {t("nav." + n)}
+                </ListItemText>
+              </ListItemIcon>
+            </ListItemButton>
+          ))}
+          {/* <ListItem divider>
+            <IconButton onClick={toggleColorMode}>
+              <ListItemText>Toggle {theme.palette.mode} mode</ListItemText>
+              {theme.palette.mode === "dark" ? (
+                <Brightness7Icon />
+              ) : (
+                <Brightness4Icon />
+              )}
+            </IconButton>
+          </ListItem> */}
+        </List>
+        {/* <button style={{width:'90%', margin: 'auto'}} className="flex-center"> */}
+        {/* <Typography>s</Typography> */}
+        <div className="flex-center">
+          <Button
+            sx={{
+              padding: "18px 72px",
+              border: "1px solid #226cb0",
+              borderRadius: "9px",
+              background: "white",
+              width: "90%",
+              marginTop: '50px'
+            }}
+            startIcon={<LogoutIcon />}
+          >
+            {t("nav.signOut")}
+          </Button>
+        </div>
+      </div>
     ),
     [handleToggleDrawer]
   );
           >
             {matches ? (
               <Box>
-                <IconButton onClick={handleToggleDrawer}>
+                <IconButton sx={{marginLeft: '15px'}} onClick={handleToggleDrawer}>
                   <MenuOutlinedIcon />
                 </IconButton>
               </Box>
                 alignItems: "center",
                 paddingRight: "20px",
                 justifyContent: "flex-end",
-                height: "81px",
+                // HEIGHT OF THE NAVBAR IN md & xl SIZE
                 width: "1076px",
                 borderBottom: "1px solid #F4F4F4",
                 boxSizing: "border-box",

src/components/Section/MainContainer.js

+import React from "react";
+import PropType from "prop-types";
+import { useLocation } from "react-router-dom";
+import Navbar from "../../components/MUI/NavbarComponent";
+// import AppRoutes from "../../AppRoutes";
+
+const MainContainer = ({ children }) => {
+  const { pathname } = useLocation();
+
+  return pathname !== "/" ? (
+    <div className="">
+      <Navbar />
+      <div className="h-withHeader">
+      {children}
+      </div>
+    </div>
+  ) : (
+    <div className="">{children}</div>
+  );
+};
+
+MainContainer.propTypes = {
+  children: PropType.any,
+};
+
+export default MainContainer;

src/main.scss

 .flex-center{
     @include flex-center;
 }
+.flex-col{
+    flex-direction: column !important;
+}
+.fullwidth{
+    width: 100% !important;
+}
+.h-withHeader{
+    height: calc(100vh - $navHeight);
+    // remove css line below, just for showcase
+    background-color: $mainBlue;
+}
 
 // ================= mui overrides
 .css-122f4x8-MuiToolbar-root {

src/pages/HomePage/HomePageMUI.js

 import React from "react";
 // import { Box, Grid } from '@mui/material';
-import Navbar from "../../components/MUI/NavbarComponent";
+// 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';
 const HomePage = () => {
   return (
     <div>
-      <Navbar />
+      {/* <Navbar /> */}
       <div className="l-t-rectangle"></div>
       <div className="r-b-rectangle"></div>
       {/* <Box sx={{ mt: 4, mx: 4 }}>

src/pages/LoginPage/LoginPageMUI.js

 /* eslint-disable */
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useFormik } from "formik";
 import { useDispatch, useSelector } from "react-redux";
   // When user refreshes page
   // useEffect(() => {
   // 	function redirectClient() {
-  // 		if (!tokens.RefreshToken && !tokens.JwtToken) {
+  //     let token = localStorage.getItem("JwtToken")
+  // 		if (!token) {
   // 			return;
   // 		}
+  //     handleApiResponseSuccess()
   // 	}
-
   // 	redirectClient();
-  // }, [history, tokens]);
+  // }, [history]);
 
   const isLoading = useSelector(
     selectIsLoadingByActionType(LOGIN_USER_LOADING)