Merge branch 'feature/1372_updated_nav_and_responsive_for_usermanagement' of Neca/HRCenter into FE_dev

src/assets/styles/components/_nav.scss

@@ -18,4 +18,28 @@
 .search-Icon{
     margin-right: 50px;
     cursor: pointer;
+}
+.user-avatar{
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    text-align: center !important;
+    padding-left: 1.2px;
+    padding-bottom: 1.2px;
+}
+.responsive-nav-cont{
+    width: 100% !important;
+    height: 75px;
+}
+.responsive-logo{
+    margin-left: 35px !important;
+}
+.icons-cont{
+    background: linear-gradient(90deg, rgba(255,255,255,0.15) 50%, white);
+/* Gray F4 */
+
+    padding-right: 35px;
+border-bottom: 1px solid #F0F0F0 !important;
+height: 100%;
+width: 75%;
+justify-content: flex-end;
 }

src/assets/styles/components/_usersPage.scss

@@ -9,6 +9,12 @@
     overflow-x: auto !important;
   }
 }
+.table-cont{
+  
+  @include media-below($bp-xl) {
+    overflow-x: auto !important;
+  }
+}
 .usersTable .headingRow {
   background-color: $mainBlueLight;
 }

src/components/MUI/NavbarComponent.js

@@ -136,8 +136,11 @@ const NavbarComponent = () => {
                     color: "#353535",
                     marginY: "0",
                     padding: "0",
+                    textDecoration: "none",
                   }}
                   className="text-black"
+                  as={Link}
+                  to={n}
                 >
                   {t("nav." + n)}
                 </ListItemText>
@@ -212,16 +215,38 @@ const NavbarComponent = () => {
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
+              width: matches ? '100%' : 'auto'
             }}
           >
             {matches ? (
-              <Box>
-                <IconButton
-                  sx={{ marginLeft: "15px" }}
-                  onClick={handleToggleDrawer}
+              <Box 
+                className="responsive-nav-cont"
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+              >
+                <img
+                  style={{ height: "37px", width: "37px", marginLeft: "0px" }}
+                  src={HrLogo}
+                  className='responsive-logo'
+                />
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                  className='icons-cont'
                 >
-                  <MenuOutlinedIcon />
-                </IconButton>
+                  <img src={searchIcon} />
+                  <IconButton
+                    sx={{ marginLeft: "27px" }}
+                    onClick={handleToggleDrawer}
+                  >
+                    <MenuOutlinedIcon />
+                  </IconButton>
+                </div>
               </Box>
             ) : (
               <Box>
@@ -268,7 +293,7 @@ const NavbarComponent = () => {
                     // color: "text.primary",
                     marginY: "0",
                     padding: "0",
-                    textDecoration: "none"
+                    textDecoration: "none",
                   }}
                   className="text-black"
                   as={Link}

src/pages/UsersPage/UsersPage.js

@@ -15,14 +15,13 @@ import { useTheme } from "@mui/system";
 import { useMediaQuery } from "@mui/material";
 
 const UsersPage = () => {
-  
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("sm"));
   const dispatch = useDispatch();
   const { users } = useSelector((s) => s.users);
   useEffect(() => {
     dispatch(setUsersReq());
-  },[dispatch]);
+  }, [dispatch]);
 
   return (
     <div>
@@ -36,26 +35,32 @@ const UsersPage = () => {
           <h1 className="page-heading">Upravljanje korisnicima</h1>
           <div className="flex-center">
             {/* <button></button> */}
-            {!matches && <IconButton className={"c-btn--primary-outlined c-btn userPageBtn"}>
-              Režim uređivanja
-              <img
-                style={{
-                  position: "relative",
-                  top: -0.25,
-                  paddingLeft: "10px",
-                }}
-                src={userPageBtnIcon}
-              />
-            </IconButton>}
+            {!matches && (
+              <IconButton
+                className={"c-btn--primary-outlined c-btn userPageBtn"}
+              >
+                Režim uređivanja
+                <img
+                  style={{
+                    position: "relative",
+                    top: -0.25,
+                    paddingLeft: "10px",
+                  }}
+                  src={userPageBtnIcon}
+                />
+              </IconButton>
+            )}
             <IconButton
-              className={"c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"}
+              className={
+                "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
+              }
             >
-              {!matches && 'Filteri'}
+              {!matches && "Filteri"}
               <img
                 style={{
                   position: "relative",
                   top: -0.25,
-                  paddingLeft: (matches ? '0px' : "10px"),
+                  paddingLeft: matches ? "0px" : "10px",
                 }}
                 src={filters}
               />
@@ -72,61 +77,63 @@ const UsersPage = () => {
             minHeight: "500px",
           }}
         >
-          <table className="usersTable" style={{ width: "1117px" }}>
-            <thead>
-              <tr className="headingRow">
-                <th>Ime i prezime</th>
-                <th>E-mail</th>
-                <th>Pozicija</th>
-                <th>CV Link</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {users.map((n) => (
-                <tr key={n.id} className="secondaryRow">
-                  <td>
-                    {n.firstName} {n.lastName}
-                  </td>
-                  <td>{n.email}</td>
-                  <td>HR Specialist</td>
-                  <td className="cvLink">CV_Ermin.pdf</td>
-                  <td>
-                    <IconButton
-                      className={"c-btn--primary-outlined c-btn td-btn"}
-                    >
-                      <img
-                        style={{
-                          position: "relative",
-                        }}
-                        src={lock}
-                      />
-                    </IconButton>
-                    <IconButton
-                      className={"c-btn--primary-outlined c-btn td-btn"}
-                    >
-                      <img
-                        style={{
-                          position: "relative",
-                        }}
-                        src={forbiden}
-                      />
-                    </IconButton>
-                    <IconButton
-                      className={"c-btn--primary-outlined c-btn td-btn"}
-                    >
-                      <img
-                        style={{
-                          position: "relative",
-                        }}
-                        src={edit}
-                      />
-                    </IconButton>
-                  </td>
+          <div className=" table-cont">
+            <table className="usersTable" style={{ width: "1117px" }}>
+              <thead>
+                <tr className="headingRow">
+                  <th>Ime i prezime</th>
+                  <th>E-mail</th>
+                  <th>Pozicija</th>
+                  <th>CV Link</th>
+                  <th></th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {users.map((n) => (
+                  <tr key={n.id} className="secondaryRow">
+                    <td>
+                      {n.firstName} {n.lastName}
+                    </td>
+                    <td>{n.email}</td>
+                    <td>HR Specialist</td>
+                    <td className="cvLink">CV_Ermin.pdf</td>
+                    <td>
+                      <IconButton
+                        className={"c-btn--primary-outlined c-btn td-btn"}
+                      >
+                        <img
+                          style={{
+                            position: "relative",
+                          }}
+                          src={lock}
+                        />
+                      </IconButton>
+                      <IconButton
+                        className={"c-btn--primary-outlined c-btn td-btn"}
+                      >
+                        <img
+                          style={{
+                            position: "relative",
+                          }}
+                          src={forbiden}
+                        />
+                      </IconButton>
+                      <IconButton
+                        className={"c-btn--primary-outlined c-btn td-btn"}
+                      >
+                        <img
+                          style={{
+                            position: "relative",
+                          }}
+                          src={edit}
+                        />
+                      </IconButton>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
           <div style={{ display: "flex", justifyContent: "flex-end" }}>
             <IconButton className={"c-btn--primary c-btn inviteBtn"}>
               <img