chore: define search form visibility

1 files changed, 8 insertions, 0 deletions

diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 6be2029..fdab76a 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -1,5 +1,6 @@
 import { ButtonSearch } from '@components/Buttons';
 import MainNav from '@components/MainNav/MainNav';
+import SearchForm from '@components/SearchForm/SearchForm';
 import { useEffect, useState } from 'react';
 import styles from './Toolbar.module.scss';
 
@@ -15,6 +16,10 @@ const Toolbar = () => {
     if (isSearchOpened) setIsNavOpened(false);
   }, [isSearchOpened]);
 
+  const searchClasses = `${styles.search} ${
+    isSearchOpened ? styles['search--opened'] : styles['search--closed']
+  }`;
+
   return (
     <div className={styles.wrapper}>
       <MainNav isOpened={isNavOpened} setIsOpened={setIsNavOpened} />
@@ -22,6 +27,9 @@ const Toolbar = () => {
         isActivated={isSearchOpened}
         setIsActivated={setIsSearchOpened}
       />
+      <div className={searchClasses}>
+        <SearchForm isOpened={isSearchOpened} />
+      </div>
     </div>
   );
 };