Partly finished header

package.json

@@ -27,6 +27,7 @@
     "react-scripts": "5.0.1",
     "react-toastify": "^9.1.2",
     "redux-persist": "^6.0.0",
+    "styled-components": "^5.3.11",
     "web-vitals": "^2.1.4",
     "yup": "^1.1.1"
   },

src/App.js

@@ -11,6 +11,7 @@ import "react-toastify/dist/ReactToastify.css";
 import { StyledEngineProvider } from "@mui/material";
 import { authScopeStringGetHelper } from "util/authScopeHelpers";
 import { LANGUAGE } from "constants/localStorage";
+import Header from "components/Header/Header";
 // import { HOME_PAGE } from "constants/pages";
 // import { useSelector } from "react-redux";
 // import { selectCurrentToken } from "features/auth/authSlice";
@@ -42,6 +43,7 @@ const App = () => {
       </Helmet>
       <StyledEngineProvider injectFirst>
         <ToastContainer bodyClassName="ToastBody" />
+        <Header />
         <AppRoutes />
       </StyledEngineProvider>
     </>

src/components/Header/Header.js

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { HeaderContainer } from "./Header.styled";
+
+const Header = () => {
+  return (
+    <HeaderContainer>
+      <div>nesto</div>
+      <div>brate</div>
+    </HeaderContainer>
+  );
+};
+
+Header.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Header;

src/components/Header/Header.styled.js

@@ -0,0 +1,13 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "themes";
+
+export const HeaderContainer = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 148px;
+  width: 100vw;
+  height: 72px;
+  background-color: ${selectedTheme.colors.primaryLight};
+`;

src/components/Header/HeaderNavigation/HeaderNavigation.styled.js

@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const HeaderNavigationContainer = styled(Box)`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+`

src/components/Header/HeaderNavigation/HeaderNavigationItem/HeaderNavigationItem.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  HeaderNavigationItemContainer,
+  HeaderNavigationItemIconContainer,
+  HeaderNavigationItemIconTitle,
+} from "./HeaderNavigationItem.styled";
+
+const HeaderNavigationItem = (props) => {
+  return (
+    <HeaderNavigationItemContainer>
+      {props?.route?.icon && (
+        <HeaderNavigationItemIconContainer>
+          {props?.route?.icon}
+        </HeaderNavigationItemIconContainer>
+      )}
+      <HeaderNavigationItemIconTitle>
+        {props?.route?.title}
+      </HeaderNavigationItemIconTitle>
+    </HeaderNavigationItemContainer>
+  );
+};
+
+HeaderNavigationItem.propTypes = {
+  route: PropTypes.shape({
+    icon: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
+    title: PropTypes.string,
+    subroutes: PropTypes.array,
+  }),
+};
+
+export default HeaderNavigationItem;

src/components/Header/HeaderNavigation/HeaderNavigationItem/HeaderNavigationItem.styled.js

@@ -0,0 +1,16 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const HeaderNavigationItemContainer = styled(Box)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 2px 6px;
+`;
+export const HeaderNavigationItemIconContainer = styled(Box)``;
+export const HeaderNavigationItemIconTitle = styled(Box)`
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: ${(props) => props?.$isActive && 600};
+`;

src/constants/pages.js

@@ -1,3 +1,5 @@
+import i18n from "i18n";
+
 export const BASE_PAGE = "/";
 export const LOGIN_PAGE = "/login";
 export const REGISTER_PAGE = "/register";
@@ -6,3 +8,13 @@ export const HOME_PAGE = "/";
 export const ERROR_PAGE = "/error-page";
 export const NOT_FOUND_PAGE = "/not-found";
 export const AUTH_CALLBACK_PAGE = "/api/auth/:provider/callback";
+
+export default [
+  { title: i18n.t("pages.home"), route: BASE_PAGE },
+  { title: i18n.t("pages.login"), route: LOGIN_PAGE },
+  { title: i18n.t("pages.register"), route: REGISTER_PAGE },
+  { title: i18n.t("pages.forgotPassword"), route: FORGOT_PASSWORD_PAGE },
+  { title: i18n.t("pages.home"), route: HOME_PAGE },
+  { title: i18n.t("pages.error"), route: ERROR_PAGE },
+  { title: i18n.t("pages.notFound"), route: NOT_FOUND_PAGE },
+];

src/i18n/resources/sr.js → src/i18nt/resources/sr.js

@@ -43,6 +43,15 @@ export default {
       range: "{{start}} to {{end}}",
     },
   },
+
+  pages: {
+    home: "Početna",
+    login: "Login",
+    register: "Register",
+    forgotPassword: "Zaboravljena lozinka",
+    error: "Pogrešna stranica",
+    notFound: "Nije pronađena stranica"
+  },
   register: {
     registerTitle: "Register",
     usernameRequired: "Username is required.",