chore: add a theme toggle

Dark theme is not implemented yet.

2 files changed, 23 insertions, 5 deletions

diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
index 527a342..1814b99 100644
--- a/src/components/Toolbar/Toolbar.module.scss
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -28,7 +28,7 @@
       --toolbar-size: auto;
 
       justify-content: flex-end;
-      gap: var(--spacing-md);
+      gap: var(--spacing-sm);
       width: auto;
       background: inherit;
       box-shadow: none;
@@ -66,12 +66,12 @@
       width: fun.convert-px(500);
       left: unset;
       right: unset;
-      top: 150%;
+      top: 120%;
       bottom: unset;
       background: var(--color-bg-opacity);
       box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(3)
         fun.convert-px(1) var(--color-shadow);
-      transform-origin: 100% -200%;
+      transform-origin: 50% -200%;
       transition: all 0.8s ease-in-out 0s;
 
       &--closed {
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>
   );
 };