package-lock.json

@@ -17,6 +17,7 @@
         "next-intl": "^3.11.3",
         "react": "^18",
         "react-dom": "^18",
+        "react-icons": "^5.1.0",
         "react-image": "^4.1.0",
         "react-redux": "^9.1.1",
         "redux-persist": "^6.0.0",
@@ -4084,6 +4085,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-image": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/react-image/-/react-image-4.1.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "next-intl": "^3.11.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.1.0",
     "react-image": "^4.1.0",
     "react-redux": "^9.1.1",
     "redux-persist": "^6.0.0",

src/components/Layout/Header/Header.module.scss

@@ -0,0 +1,6 @@
+.menuContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}

src/components/Layout/Header/Menu/Menu.module.scss

@@ -0,0 +1,5 @@
+@import 'spacing';
+
+.container {
+    width: $spacing_24;
+}

src/components/Layout/Header/Menu/Theme/Theme.module.scss

@@ -0,0 +1,3 @@
+.container {
+    cursor: pointer;    
+}

src/components/Layout/Header/Menu/Theme/index.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import React from 'react';
+
+import style from './Theme.module.scss';
+
+import { TbMoon, TbSun } from 'react-icons/tb';
+import { useAppDispatch, useAppSelector } from '@/store/store';
+import { Themes } from '@/meta/settings';
+import { setCurrentTheme } from '@/store/settingsSlice';
+
+const Menu: React.FC = () => {
+
+    const theme = useAppSelector((state) => state.settings.theme);
+    const dispatch = useAppDispatch();
+
+    return (
+        <div onClick={() => dispatch(setCurrentTheme(theme == Themes.dark ? Themes.light : Themes.dark))} className={style.container}>
+            {theme == Themes.dark && <TbMoon size={24} />}
+            {theme == Themes.light && <TbSun size={24} />}
+        </div>
+    );
+};
+
+export default Menu;

src/components/Layout/Header/Menu/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Theme from './Theme';
+
+const Menu: React.FC = () => {
+
+    return (
+        <Theme />
+    );
+};
+
+export default Menu;

src/components/Layout/Header/index.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
+import style from './Header.module.scss';
+
 import Title from './Title';
+import Menu from './Menu';
+
 import Description from './Description';
 import Disclaimer from './Disclaimer';
 
@@ -8,7 +12,10 @@ const Header: React.FC = () => {
 
   return (
     <>
-      <Title />
+      <div className={style.menuContainer}>
+        <Title />
+        <Menu />
+      </div>
       <Description />
       <Disclaimer />
     </>