update curriculum

Author: CNadjim

src/app/App.jsx

@@ -1,9 +1,12 @@
-import SidebarLayout from "./layouts/sidebar/sidebarLayout";
+import SidebarLayout from "./layouts/sidebar/sidebar-layout";
+import ThemeProvider from "./providers/theme-provider/theme-provider";
 
 const App = () => {
     return (
         <>
-            <SidebarLayout/>
+            <ThemeProvider>
+                <SidebarLayout/>
+            </ThemeProvider>
         </>
     );
 }

src/app/components/navigation-drawer/navigation-drawer.jsx

@@ -98,7 +98,7 @@ const NavigationDrawer = () => {
                                     </div>
                                 </Transition.Child>
                                 <div className="h-0 flex-1 overflow-y-auto pt-5 pb-4">
-                                    <nav className="mt-5 space-y-1 px-2 space-y-4">
+                                    <nav className="mt-5 px-2 space-y-4">
                                         <NavigationContent/>
                                     </nav>
                                 </div>
@@ -114,7 +114,7 @@ const NavigationDrawer = () => {
             <div className="hidden flex-none lg:flex lg:flex-col drawer border-r border-gray-200 bg-white">
                 <div className="flex min-h-0 flex-1 flex-col">
                     <div className="flex flex-1 flex-col overflow-y-auto pt-5 pb-4">
-                        <nav className="my-auto mx-10 space-y-1 px-2 space-y-4">
+                        <nav className="my-auto mx-10 px-2 space-y-4">
                             <NavigationContent/>
                         </nav>
                     </div>

src/app/layouts/sidebar/sidebarLayout.jsx …c/app/layouts/sidebar/sidebar-layout.jsxsrc/app/layouts/sidebar/sidebarLayout.jsx renamed to src/app/layouts/sidebar/sidebar-layout.jsx src/app/layouts/sidebar/sidebarLayout.jsx renamed to src/app/layouts/sidebar/sidebar-layout.jsx

@@ -1,7 +1,7 @@
 import Router from "../../router/router";
 import Header from "../../components/header/header";
 import NavigationDrawer from "../../components/navigation-drawer/navigation-drawer";
-import './sidebar.scss';
+import './sidebar-layout.scss';
 
 export default function SidebarLayout() {
     return (

src/app/layouts/sidebar/sidebar.scss …/app/layouts/sidebar/sidebar-layout.scsssrc/app/layouts/sidebar/sidebar.scss renamed to src/app/layouts/sidebar/sidebar-layout.scss src/app/layouts/sidebar/sidebar.scss renamed to src/app/layouts/sidebar/sidebar-layout.scss

@@ -1,6 +1,9 @@
+import curriculum from "../../../assets/curriculum/curriculum.pdf";
+
 export default function CurriculumPage() {
     return (
         <>
+            <iframe src={curriculum} width="100%" height="100%"/>
         </>
     )
 }

src/app/layouts/theme-provider/theme-provider.jsx

@@ -0,0 +1,21 @@
+import {useSelector} from "react-redux";
+import {selectDarkMode} from "../../reducers/theme";
+import {useEffect} from "react";
+
+export const ThemeProvider = ({children}) => {
+    const isDarkMode = useSelector(selectDarkMode);
+    const root = window.document.documentElement;
+
+    useEffect(() => {
+        root.classList.remove('light', 'dark');
+        root.classList.add(isDarkMode ? 'dark' : 'light');
+    }, [])
+
+    return (
+        <>
+            {children}
+        </>
+    )
+}
+
+export default ThemeProvider

src/app/pages/curriculum/curriculum.jsx

@@ -1,10 +1,10 @@
-import React, {useEffect, useRef, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 
 function importSgvAsReactComponent(name, fileName) {
     const ImportedIconRef = useRef();
     const [loading, setLoading] = useState(true);
 
-    useEffect(() => {
+    useEffect( () => {
         const importIcon = async () => {
             try {
                 ImportedIconRef.current = (await import(`../../assets/icons/${name}/${fileName}.svg`)).ReactComponent;
@@ -14,6 +14,7 @@ function importSgvAsReactComponent(name, fileName) {
                 setLoading(false);
             }
         };
+
         importIcon();
     }, []);
 

src/app/providers/theme-provider/theme-provider.jsx

@@ -15,7 +15,6 @@ body {
   background-color: rgb(250 250 250);
 }
 
-
 #root {
   @apply flex;
   @apply flex-1;

src/app/utils/import-sgv-as-react-component.js

@@ -1,7 +1,7 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-    darkMode: 'class',
+    darkMode: 'selector',
     content: [
         "./index.html",
         "./src/**/*.{js,jsx,ts,tsx}",