chore: add a theme toggle

Dark theme is not implemented yet.

1 files changed, 20 insertions, 2 deletions

diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index fdab76a..615dfd5 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -1,21 +1,36 @@
 import { ButtonSearch } from '@components/Buttons';
 import MainNav from '@components/MainNav/MainNav';
 import SearchForm from '@components/SearchForm/SearchForm';
+import ThemeToggle from '@components/ThemeToggle/ThemeToggle';
 import { useEffect, useState } from 'react';
 import styles from './Toolbar.module.scss';
 
 const Toolbar = () => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
+  const [isThemeOpened, setIsThemeOpened] = useState<boolean>(false);
 
   useEffect(() => {
-    if (isNavOpened) setIsSearchOpened(false);
+    if (isNavOpened) {
+      setIsSearchOpened(false);
+      setIsThemeOpened(false);
+    }
   }, [isNavOpened]);
 
   useEffect(() => {
-    if (isSearchOpened) setIsNavOpened(false);
+    if (isSearchOpened) {
+      setIsNavOpened(false);
+      setIsThemeOpened(false);
+    }
   }, [isSearchOpened]);
 
+  useEffect(() => {
+    if (isThemeOpened) {
+      setIsNavOpened(false);
+      setIsSearchOpened(false);
+    }
+  }, [isThemeOpened]);
+
   const searchClasses = `${styles.search} ${
     isSearchOpened ? styles['search--opened'] : styles['search--closed']
   }`;
@@ -30,6 +45,9 @@ const Toolbar = () => {
       <div className={searchClasses}>
         <SearchForm isOpened={isSearchOpened} />
       </div>
+      <div>
+        <ThemeToggle />
+      </div>
     </div>
   );
 };