Partly finished

src/components/Header/Header.js

@@ -1,20 +1,30 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { HeaderContainer } from "./Header.styled";
+import { HeaderContainer, HeaderSideContainer } from "./Header.styled";
 import { useSelector } from "react-redux";
 import { selectBreadcrumbs } from "features/app/appSlice";
 import { selectCurrentUser } from "features/auth/authSlice";
 import HeaderNavigation from "./HeaderNavigation/HeaderNavigation";
+import Logo from "components/Logo/Logo";
+import { NavLink } from "react-router-dom";
+import { PAGES } from "constants/pages";
+import HeaderProfileBar from "./HeaderProfileBar/HeaderProfileBar";
 
 const Header = () => {
   const breadcrumbs = useSelector(selectBreadcrumbs);
   const user = useSelector(selectCurrentUser);
   console.log(user);
   console.log(breadcrumbs);
+  console.log(Logo);
   return (
     <HeaderContainer>
-      <HeaderNavigation />
-      <div>brate</div>
+      <HeaderSideContainer>
+        <Logo as={NavLink} to={PAGES.BASE.route} />
+        {user && <HeaderNavigation />}
+      </HeaderSideContainer>
+      <HeaderSideContainer>
+        <HeaderProfileBar />
+      </HeaderSideContainer>
     </HeaderContainer>
   );
 };

src/components/Header/Header.styled.js

@@ -1,13 +1,19 @@
 import { Box } from "@mui/material";
+import { themeToUse2 } from "hooks/useToggleColorMode";
 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;
+  padding: 0 24px;
+  width: 100%;
   height: 72px;
-  background-color: ${selectedTheme.colors.primaryLight};
+  background-color: ${themeToUse2.palette.primaryDark};
+`;
+export const HeaderSideContainer = styled(Box)`
+  display: flex;
+  gap: 24px;
+  height: 100%;
+  align-items: center;
 `;

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

@@ -3,6 +3,15 @@ import { NavLink } from "react-router-dom";
 import styled from "styled-components";
 import selectedTheme from "themes";
 
+export const HeaderNavigationItemIconContainer = styled(Box)``;
+export const HeaderNavigationItemIconTitle = styled(Box)`
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: ${(props) => props?.$isActive && 600};
+  color: white;
+  font-weight: 500;
+`;
+
 export const HeaderNavigationItemContainer = styled(NavLink)`
   display: flex;
   justify-content: center;
@@ -14,17 +23,9 @@ export const HeaderNavigationItemContainer = styled(NavLink)`
   height: 100%;
   transition-duration: 0.1s;
   &:hover {
-    background-color: ${selectedTheme.colors.primaryLightLighter};
+    background-color: ${selectedTheme.colors.primaryLighter};
   }
-  &[aria-checked=true] ${HeaderNavigationItemIconTitle} {
+  &[aria-checked="true"] ${HeaderNavigationItemIconTitle} {
     font-weight: 700;
   }
 `;
-export const HeaderNavigationItemIconContainer = styled(Box)``;
-export const HeaderNavigationItemIconTitle = styled(Box)`
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: ${(props) => props?.$isActive && 600};
-  color: white;
-  font-weight: 500;
-`;

src/components/Header/HeaderProfileBar/HeaderNotifications/HeaderNotifications.js

@@ -0,0 +1,15 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { HeaderNotificationsContainer } from "./HeaderNotifications.styled";
+
+const HeaderNotifications = () => {
+  return (
+    <HeaderNotificationsContainer>notifications</HeaderNotificationsContainer>
+  );
+};
+
+HeaderNotifications.propTypes = {
+  children: PropTypes.node,
+};
+
+export default HeaderNotifications;

src/components/Header/HeaderProfileBar/HeaderNotifications/HeaderNotifications.styled.js

@@ -0,0 +1,4 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const HeaderNotificationsContainer = styled(Box)``

src/components/Header/HeaderProfileBar/HeaderProfile/HeaderProfile.js

@@ -0,0 +1,13 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { HeaderProfileContainer } from "./HeaderProfile.styled";
+
+const HeaderProfile = () => {
+  return <HeaderProfileContainer>profile</HeaderProfileContainer>;
+};
+
+HeaderProfile.propTypes = {
+  children: PropTypes.node,
+};
+
+export default HeaderProfile;

src/components/Header/HeaderProfileBar/HeaderProfile/HeaderProfile.styled.js

@@ -0,0 +1,4 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const HeaderProfileContainer = styled(Box)``

src/components/Header/HeaderProfileBar/HeaderProfileBar.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { HeaderProfileBarContainer } from "./HeaderProfileBar.styled";
+import HeaderThemeChooser from "./HeaderThemeChooser/HeaderThemeChooser";
+import HeaderNotifications from "./HeaderNotifications/HeaderNotifications";
+import HeaderProfile from "./HeaderProfile/HeaderProfile";
+
+const HeaderProfileBar = () => {
+  return (
+    <HeaderProfileBarContainer>
+      <HeaderThemeChooser />
+      <HeaderNotifications />
+      <HeaderProfile />
+    </HeaderProfileBarContainer>
+  );
+};
+
+HeaderProfileBar.propTypes = {
+  children: PropTypes.node,
+};
+
+export default HeaderProfileBar;

src/components/Header/HeaderProfileBar/HeaderProfileBar.styled.js

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

src/components/Header/HeaderProfileBar/HeaderThemeChooser/HeaderThemeChooser.js

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { HeaderThemeChooserContainer } from "./HeaderThemeChooser.styled";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import useToggleColorMode, { themeToUse2 } from "hooks/useToggleColorMode";
+
+const HeaderThemeChooser = () => {
+  const [toggleColorMode] = useToggleColorMode();
+
+  console.log(themeToUse2);
+
+  const handleChangeTheme = () => {
+    toggleColorMode();
+  }
+  return (
+    <HeaderThemeChooserContainer onClick={handleChangeTheme}>
+      <DarkModeIcon />
+    </HeaderThemeChooserContainer>
+  );
+};
+
+HeaderThemeChooser.propTypes = {
+  children: PropTypes.node,
+};
+
+export default HeaderThemeChooser;

src/components/Header/HeaderProfileBar/HeaderThemeChooser/HeaderThemeChooser.styled.js

@@ -0,0 +1,4 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const HeaderThemeChooserContainer = styled(Box)``

src/components/Logo/Logo.js

@@ -0,0 +1,24 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { LogoContainer } from "./Logo.styled";
+//Import logo
+
+const Logo = forwardRef((props, ref) => {
+  return (
+    <LogoContainer
+      {...props}
+      ref={ref}
+      // src={LogoImage}
+    >
+      Logo
+    </LogoContainer>
+  );
+});
+
+Logo.displayName = "Logo";
+
+Logo.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Logo;

src/components/Logo/Logo.styled.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+// Replace with styled.img when there is logo
+export const LogoContainer = styled.div`
+  text-decoration: none;
+  cursor: pointer;
+  color: white;
+`;

src/hooks/useToggleColorMode.js

@@ -4,7 +4,15 @@ import {
   authScopeSetHelper,
   authScopeStringGetHelper,
 } from "util/authScopeHelpers";
-import selectedTheme from "themes";
+import selectedTheme, { reinitializeTheme } from "themes";
+import { primaryThemeColors } from "themes/primaryTheme/primaryThemeColors";
+import { secondaryThemeColors } from "themes/secondaryTheme/secondaryThemeColors";
+
+var themeToUse = {
+  palette: {
+    primary: "white",
+  },
+};
 
 const useToggleColorMode = () => {
   const currentColorMode = authScopeStringGetHelper("colorMode") || "light";
@@ -16,29 +24,21 @@ const useToggleColorMode = () => {
     authScopeSetHelper("colorMode", nextMode);
   };
 
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary: {
-            main:
-              mode === "light"
-                ? selectedTheme.colors.primaryLight
-                : selectedTheme.colors.primaryDark,
-          },
-          secondary: {
-            main:
-              mode === "light"
-                ? selectedTheme.colors.secondaryLight
-                : selectedTheme.colors.secondaryDark,
-          },
-        },
-      }),
-    [mode]
-  );
+  const theme = useMemo(() => {
+    reinitializeTheme();
+    themeToUse = createTheme({
+      palette: {
+        mode,
+        ...(mode === "light" ? primaryThemeColors : secondaryThemeColors),
+      },
+    });
+    return themeToUse;
+  }, [mode]);
+  console.log(selectedTheme);
 
   return [toggleColorMode, theme];
 };
 
+export const themeToUse2 = getTheme;
+
 export default useToggleColorMode;

src/themes/index.js

@@ -1,13 +1,25 @@
+import { authScopeStringGetHelper } from "util/authScopeHelpers";
 import primary from "./primaryTheme/primaryTheme";
+import secondary from "./secondaryTheme/secondaryTheme";
 
-let selectedThemeNumber = 0;
 
-const getTheme = () => {
-    if (selectedThemeNumber === 0) {
-        return {...primary}
-    }
+export const getTheme = () => {
+  let selectedThemeStorage = authScopeStringGetHelper("colorMode");
+  console.log(selectedThemeStorage);
+  if (selectedThemeStorage === "light") {
+    return { ...primary };
+  }
+  if (selectedThemeStorage === "dark") {
+    return { ...secondary };
+  }
+};
+
+let selectedTheme = getTheme();
+
+export const reinitializeTheme = () => {
+    selectedTheme = getTheme();
 }
 
-const selectedTheme = getTheme();
+export default selectedTheme;
 
-export default selectedTheme;
+npm i @ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-theme-lark @ckeditor/ckeditor5-react @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-basic-styles

src/themes/primaryTheme/primaryThemeColors.js

@@ -1,8 +1,5 @@
 export const primaryThemeColors = {
-    primaryLight: "#673ab7",
-    primaryLightLighter: "#845ccb",
-    primaryDark: "#009688",
-    secondaryLight: "#212121",
-    secondaryDark: "#f5f5f5",
-  };
-  
+  primaryDark: "#673ab7",
+  primaryLighter: "#845ccb",
+  secondaryDark: "#212121",
+};

src/themes/secondaryTheme/secondaryTheme.js

@@ -0,0 +1,7 @@
+import { secondaryThemeColors } from "./secondaryThemeColors";
+
+const secondary = {
+  colors: secondaryThemeColors,
+};
+
+export default secondary;

src/themes/secondaryTheme/secondaryThemeColors.js

@@ -0,0 +1,4 @@
+export const secondaryThemeColors = {
+  primaryDark: "#009688",
+  secondaryDark: "#f5f5f5",
+};