Almost finished djoka/header

src/App.js

 import { authScopeStringGetHelper } from "util/authScopeHelpers";
 import { LANGUAGE } from "constants/localStorage";
 import Header from "components/Header/Header";
+import useBreadcrumbs from "hooks/useBreadcrumbs";
 // import { HOME_PAGE } from "constants/pages";
 // import { useSelector } from "react-redux";
 // import { selectCurrentToken } from "features/auth/authSlice";
 
 const App = () => {
   const { i18n } = useTranslation();
+  useBreadcrumbs();
   // const navigate = useNavigate();
 
   // const auth = useSelector(selectCurrentToken);

src/AppRoutes.js

 import ProfilePage from "pages/ProfilePage/ProfilePage";
 import SettingsPage from "pages/SettingsPage/SettingsPage";
 import Error from "pages/ErrorPage/ErrorPage";
+import { PAGES } from "constants/pages";
 
 const AppRoutes = () => (
   <Routes>
-    <Route path="login" element={<LoginPage />} errorElement={<Error />} />
+    <Route
+      path={PAGES.LOGIN.route}
+      element={<LoginPage />}
+      errorElement={<Error />}
+    />
     <Route
       exact
-      path="register"
+      path={PAGES.REGISTER.route}
       element={<RegisterPage />}
       errorElement={<Error />}
     />
     <Route path="api/auth/:provider/callback" element={<AuthCallback />} />
     <Route element={<RequireAuth />} errorElement={<Error />}>
-      <Route path="/" element={<HomePage />} />
-      <Route path="profile" element={<ProfilePage />} />
+      <Route path={PAGES.BASE.route} element={<HomePage />} />
+      <Route path="/profile/*" element={<ProfilePage />} />
       <Route path="settings" element={<SettingsPage />} />
     </Route>
   </Routes>

src/components/Header/Header.js

 import React from "react";
 import PropTypes from "prop-types";
 import { HeaderContainer } from "./Header.styled";
+import { useSelector } from "react-redux";
+import { selectBreadcrumbs } from "features/app/appSlice";
 
 const Header = () => {
+  const breadcrumbs = useSelector(selectBreadcrumbs);
+  console.log(breadcrumbs)
   return (
     <HeaderContainer>
       <div>nesto</div>

src/constants/pages.js

-import i18n from "i18n";
+import i18n from "../i18nt/index";
 
-export const BASE_PAGE = "/";
-export const LOGIN_PAGE = "/login";
-export const REGISTER_PAGE = "/register";
-export const FORGOT_PASSWORD_PAGE = "/forgot-password";
-export const HOME_PAGE = "/";
-export const ERROR_PAGE = "/error-page";
-export const NOT_FOUND_PAGE = "/not-found";
+// export const BASE_PAGE = "/";
+// export const LOGIN_PAGE = "/login";
+// export const REGISTER_PAGE = "/register";
+// export const FORGOT_PASSWORD_PAGE = "/forgot-password";
+// 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 },
-];
+export const PAGES = {
+  BASE: {
+    route: "/",
+    title: i18n.t("pages.home"),
+  },
+  HOME: {
+    route: "/home/*",
+    title: i18n.t("pages.home"),
+  },
+  REGISTER: {
+    route: "/register/*",
+    title: i18n.t("pages.register"),
+    nestedRoutes: {
+      FIRST_STEP: {
+        route: "/register/first-step/*",
+        title: i18n.t("pages.register.nestedRoutes.firstStep"),
+      },
+      SECOND_STEP: {
+        route: "/register/second-step/*",
+      },
+    },
+  },
+  LOGIN: {
+    route: "/login/*",
+    title: i18n.t("pages.login"),
+  },
+  FORGOT_PASSWORD: {
+    route: "/forgot-password/*",
+    title: i18n.t("pages.forgotPassword"),
+  },
+  ERROR: {
+    route: "/error-page",
+    title: i18n.t("pages.error"),
+  },
+  NOT_FOUND: {
+    route: "/not-found",
+    title: i18n.t("pages.notFound"),
+  },
+  PROFILE: {
+    route: "/profile",
+    title: i18n.t("pages.profile"),
+  },
+};

src/features/app/appSlice.js

+import { createSlice } from "@reduxjs/toolkit";
+import { createSelector } from "reselect";
+
+const appSlice = createSlice({
+  name: "app",
+  initialState: {
+    breadcrumbs: [],
+  },
+  reducers: {
+    setBreadcrumbs: (state, action) => {
+      state.breadcrumbs = action.payload;
+    },
+  },
+});
+
+export const { setBreadcrumbs } = appSlice.actions;
+export default appSlice.reducer;
+
+const appSelector = (state) => state.app;
+export const selectBreadcrumbs = createSelector(
+  appSelector,
+  (state) => state.breadcrumbs
+);

src/features/store.js

   REGISTER,
 } from "redux-persist";
 import storage from "redux-persist/lib/storage";
+import appReducer from "./app/appSlice";
 
 const authPersistConfig = {
   key: "auth",
     [apiSlice.reducerPath]: apiSlice.reducer,
     auth: persistReducer(authPersistConfig, authReducer),
     randomData: randomDataReducer,
+    app: appReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({

src/hooks/useBreadcrumbs.js

+import { setBreadcrumbs } from "features/app/appSlice";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { getBreadcrumbs } from "util/routeHelpers";
+
+const useBreadcrumbs = () => {
+  const location = useLocation();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(setBreadcrumbs(getBreadcrumbs(location.pathname)));
+  }, [location]);
+  return {};
+};
+
+export default useBreadcrumbs;

src/i18nt/index.js

 import srTranslations from "./resources/sr";
 
 i18n.use(initReactI18next).init({
-  lng: "en",
-  fallbackLng: "en",
+  lng: "sr",
+  fallbackLng: "sr",
   debug: false,
   supportedLngs: ["en", "sr"],
   resources: {

src/i18nt/resources/sr.js

     register: "Register",
     forgotPassword: "Zaboravljena lozinka",
     error: "Pogrešna stranica",
-    notFound: "Nije pronađena stranica"
+    notFound: "Nije pronađena stranica",
+    profile: "Profilna stranica",
   },
   register: {
     registerTitle: "Register",

src/index.js

 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import "./i18n";
+import "./i18nt";
 import { HelmetProvider } from "react-helmet-async";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { store, persistor } from "./features/store";

src/pages/LoginPage/LoginPage.js

 import { useFormik } from "formik";
 import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { FORGOT_PASSWORD_PAGE, REGISTER_PAGE } from "constants/pages";
+import { PAGES } from "constants/pages";
 import {
   Box,
   Button,
               sx={{ textAlign: { xs: "center", md: "left" } }}
             >
               <Link
-                to={FORGOT_PASSWORD_PAGE}
+                to={PAGES.FORGOT_PASSWORD.route}
                 component={NavLink}
                 variant="body2"
                 underline="hover"
               sx={{ textAlign: { xs: "center", md: "right" } }}
             >
               <Link
-                to={REGISTER_PAGE}
+                to={PAGES.REGISTER.route}
                 component={NavLink}
                 variant="body2"
                 underline="hover"

src/pages/ProfilePage/ProfilePage.js

 import { Autocomplete, TextField } from "@mui/material";
 import React from "react";
-import { useLocation } from "react-router-dom";
+import { Outlet, Route, Routes, useLocation } from "react-router-dom";
 
 const top100Films = [
   { label: "The Godfather", id: 1 },
   console.log("navigate", navigate);
 
   return (
-    <>
+    <div>
       <Autocomplete
         disablePortal
         id="combo-box-demo"
         sx={{ width: 300 }}
         renderInput={(params) => <TextField {...params} label="Movie" />}
       />
-    </>
+      <Routes>
+        <Route path="nesto" element={<div>kao</div>} />
+      </Routes>
+      <Outlet />
+    </div>
   );
 };
 

src/pages/RegisterPage/RegisterPage.js

-/* eslint-disable */
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useFormik } from "formik";
 import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { FORGOT_PASSWORD_PAGE, LOGIN_PAGE } from "constants/pages";
+import { PAGES } from "constants/pages";
 import {
   Box,
   Button,
               sx={{ textAlign: { xs: "center", md: "left" } }}
             >
               <Link
-                to={FORGOT_PASSWORD_PAGE}
+                to={PAGES.FORGOT_PASSWORD.route}
                 component={NavLink}
                 variant="body2"
                 underline="hover"
               sx={{ textAlign: { xs: "center", md: "right" } }}
             >
               <Link
-                to={LOGIN_PAGE}
+                to={PAGES.LOGIN.route}
                 component={NavLink}
                 variant="body2"
                 underline="hover"

src/util/routeHelpers.js

+import { PAGES } from "constants/pages";
+
+export const getBreadcrumbs = (location) => {
+  console.log(location);
+  const locationArray = location?.split("/").slice(1);
+  console.log(locationArray);
+  const breadcrumbs = new Array(0);
+  let pagesObject = PAGES;
+  let pagesProperties = Object.keys(pagesObject);
+  while (breadcrumbs?.length !== locationArray?.length) {
+    let routeObject =
+      pagesObject?.[
+        pagesProperties?.find?.(
+          (singlePageProperty) =>
+            getPageNameFromRoute(pagesObject?.[singlePageProperty]?.route) ===
+            locationArray?.[breadcrumbs?.length]
+        )
+      ];
+    breadcrumbs?.push(routeObject?.title);
+    pagesObject = routeObject?.nestedRoutes;
+    pagesProperties = pagesObject != null && Object.keys(pagesObject);
+  }
+  return breadcrumbs;
+};
+
+const getPageNameFromRoute = (route) => {
+  let routeArray = route?.split("/");
+  if (routeArray?.[0] === "") return routeArray?.[1];
+  else return routeArray?.[0];
+};

yarn.lock

   dependencies:
     "@babel/types" "^7.22.3"
 
-"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
   integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
     "@babel/parser" "^7.21.9"
     "@babel/types" "^7.21.5"
 
-"@babel/traverse@^7.20.5", "@babel/traverse@^7.22.1", "@babel/traverse@^7.7.2":
+"@babel/traverse@^7.20.5", "@babel/traverse@^7.22.1", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
   version "7.22.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.4.tgz#c3cf96c5c290bd13b55e29d025274057727664c0"
   integrity sha512-Tn1pDsjIcI+JcLKq1AVlZEr4226gpuAQTsLMorsYg9tuS/kG7nuwwJ4AB8jfQuEgb/COBwR/DqJxmoiYFu5/rQ==
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
-"@emotion/is-prop-valid@^1.2.1":
+"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
     "@emotion/utils" "^1.2.1"
 
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@emotion/unitless@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.0"
 
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.3.tgz#f5616bee99efca6685e500fe45db87f26cb42ba7"
+  integrity sha512-jBioLwBVHpOMU4NsueH/ADcHrjS0Y/WTpt2eGVmmuSFNEv2DF3XhcMncuZlbbjxQ4vzxg+yEr6E6TNjrIQbsJQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-module-imports" "^7.21.4"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.21"
+    picomatch "^2.3.1"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
 babel-plugin-transform-react-remove-prop-types@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
 css-declaration-sorter@^6.3.1:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz#630618adc21724484b3e9505bce812def44000ad"
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-to-react-native@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
+  integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.3.tgz#bba8daac19930169c0c9c96706749a597ae3acff"
   integrity sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==
 
+styled-components@^5.3.11:
+  version "5.3.11"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
+  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
     pirates "^4.0.1"
     ts-interface-checker "^0.1.9"
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==