4 files changed, 115 insertions, 2 deletions
diff --git a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
new file mode 100644
index 0000000..a2635aa
--- /dev/null
+++ b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
@@ -0,0 +1,41 @@
+import CloseIcon from '@assets/images/icon-close.svg';
+import SearchIcon from '@assets/images/icon-search.svg';
+import { t } from '@lingui/macro';
+import { SetStateAction } from 'react';
+import styles from '../Buttons.module.scss';
+
+const ButtonSearch = ({
+  isActivated,
+  setIsActivated,
+}: {
+  isActivated: boolean;
+  setIsActivated: (value: SetStateAction<boolean>) => void;
+}) => {
+  const btnClasses = isActivated
+    ? `${styles.search} ${styles['search--opened']}`
+    : styles.search;
+
+  return (
+    <button
+      className={btnClasses}
+      type="button"
+      onClick={() => setIsActivated(!isActivated)}
+    >
+      <span className={styles.icon}>
+        <span className={styles.front}>
+          <SearchIcon />
+        </span>
+        <span className={styles.back}>
+          <CloseIcon />
+        </span>
+      </span>
+      {isActivated ? (
+        <span className="screen-reader-text">{t`Close search`}</span>
+      ) : (
+        <span className="screen-reader-text">{t`Open search`}</span>
+      )}
+    </button>
+  );
+};
+
+export default ButtonSearch;
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index b5e2c75..b250eb5 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -80,3 +80,57 @@
     }
   }
 }
+
+.search {
+  display: block;
+  width: var(--btn-size);
+  height: var(--btn-size);
+  background: none;
+  border: none;
+  font-size: var(--font-size-md);
+}
+
+.icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  transform: translate3d(0, 0, 0);
+  transition: all 0.5s ease-in-out 0s;
+}
+
+.front,
+.back {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: var(--color-bg);
+  transition: all 0.6s ease-in 0s;
+  backface-visibility: hidden;
+}
+
+.front {
+  transform: scale(1);
+  z-index: 20;
+}
+
+.back {
+  transform: scale(0.2) rotateY(180deg);
+  z-index: 10;
+}
+
+.search--opened {
+  .icon {
+    transform: rotateY(180deg);
+  }
+
+  .front {
+    transform: scale(0.2);
+  }
+
+  .back {
+    transform: scale(1) rotateY(180deg);
+  }
+}
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
index 78289c9..aa1291e 100644
--- a/src/components/Buttons/index.tsx
+++ b/src/components/Buttons/index.tsx
@@ -1,4 +1,5 @@
 import Button from './Button/Button';
+import ButtonSearch from './ButtonSearch/ButtonSearch';
 import ButtonSubmit from './ButtonSubmit/ButtonSubmit';
 
-export { Button, ButtonSubmit };
+export { Button, ButtonSearch, ButtonSubmit };
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index b7acce9..6be2029 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -1,10 +1,27 @@
+import { ButtonSearch } from '@components/Buttons';
 import MainNav from '@components/MainNav/MainNav';
+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);
+
+  useEffect(() => {
+    if (isNavOpened) setIsSearchOpened(false);
+  }, [isNavOpened]);
+
+  useEffect(() => {
+    if (isSearchOpened) setIsNavOpened(false);
+  }, [isSearchOpened]);
+
   return (
     <div className={styles.wrapper}>
-      <MainNav />
+      <MainNav isOpened={isNavOpened} setIsOpened={setIsNavOpened} />
+      <ButtonSearch
+        isActivated={isSearchOpened}
+        setIsActivated={setIsSearchOpened}
+      />
     </div>
   );
 };