chore: add a button to open/close search in toolbar

6 files changed, 221 insertions, 2 deletions

diff --git a/src/assets/images/icon-close.svg b/src/assets/images/icon-close.svg
new file mode 100644
index 0000000..58dd3a9
--- /dev/null
+++ b/src/assets/images/icon-close.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewbox="0 0 40 40"
+   style="stroke: #000;  stroke-width: 5;  stroke-linecap: round;"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="icon-close.svg"
+   width="100"
+   height="100"
+   viewBox="0 0 100.00005 100.00005"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     inkscape:zoom="3.0499873"
+     inkscape:cx="13.442679"
+     inkscape:cy="79.672463"
+     inkscape:window-width="1920"
+     inkscape:window-height="1019"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false" />
+  <path
+     style="color:#000000;fill:#1d8fc9;stroke:#010304;stroke-width:3;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 9.1489631,1.5 a 7.659573,7.6587251 0 0 0 -5.4155577,2.2437671 7.659573,7.6587251 0 0 0 0,10.8299149 L 39.168904,50.005259 3.7334054,85.436835 a 7.659573,7.6587251 0 0 0 0,10.829915 7.659573,7.6587251 0 0 0 10.8311146,0 L 50.000019,60.835175 85.435518,96.26675 a 7.659573,7.6587251 0 0 0 10.831115,0 7.659573,7.6587251 0 0 0 0,-10.829915 L 60.831134,50.005259 96.266633,14.573682 a 7.659573,7.6587251 0 0 0 0,-10.8299149 7.659573,7.6587251 0 0 0 -10.831115,0 L 50.000019,39.175343 14.56452,3.7437671 A 7.659573,7.6587251 0 0 0 9.1489631,1.5 Z"
+     id="path2" />
+</svg>
diff --git a/src/assets/images/icon-search.svg b/src/assets/images/icon-search.svg
new file mode 100644
index 0000000..796283d
--- /dev/null
+++ b/src/assets/images/icon-search.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   width="100"
+   height="100"
+   viewBox="0 0 99.999999 99.999999"
+   xml:space="preserve"
+   sodipodi:docname="icon-search.svg"
+   id="svg3545"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs823" /><sodipodi:namedview
+     id="namedview43"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1019"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="1"
+     inkscape:zoom="4.5358955"
+     inkscape:cx="18.959872"
+     inkscape:cy="47.179217"
+     inkscape:current-layer="svg3545"
+     showgrid="false" /><path
+     id="rect1408"
+     style="fill:#14578a;stroke:#000000;stroke-width:2;fill-opacity:1"
+     transform="matrix(0.71477987,0.69934951,-0.69963223,0.71450315,0,0)"
+     d="m 67.137863,3.0622735 h 7.476434 V 20.929606 h -7.476434 z" /><path
+     id="path1246"
+     style="fill:#1d8fc9;stroke:#000000;stroke-width:2"
+     transform="matrix(0.96592978,0.2588043,-0.2588338,0.96592187,0,0)"
+     d="M 103.36876,11.53057 A 29.302338,29.300789 0 0 1 74.066422,40.831359 29.302338,29.300789 0 0 1 44.764084,11.53057 29.302338,29.300789 0 0 1 74.066422,-17.770219 29.302338,29.300789 0 0 1 103.36876,11.53057 Z" /><path
+     id="path1246-5"
+     style="fill:#e4ffff;stroke:#000000;stroke-width:1.5;fill-opacity:1"
+     transform="matrix(0.96592978,0.2588043,-0.2588338,0.96592187,0,0)"
+     d="M 94.422329,11.53057 A 20.355907,20.35483 0 0 1 74.066422,31.8854 20.355907,20.35483 0 0 1 53.710514,11.53057 20.355907,20.35483 0 0 1 74.066422,-8.8242598 20.355907,20.35483 0 0 1 94.422329,11.53057 Z" /><path
+     id="rect1408-3"
+     style="fill:#1d8fc9;stroke:#000000;stroke-width:2;stroke-linejoin:round"
+     transform="matrix(0.71477987,0.69934951,-0.69963223,0.71450315,0,0)"
+     d="m 67.075075,19.587082 h 7.662958 c 1.329636,0 2.400065,1.070429 2.400065,2.400064 v 40.068158 c 0,1.329635 -1.070429,2.400064 -2.400065,2.400064 h -7.662958 c -1.329636,0 -2.400064,-1.070429 -2.400064,-2.400064 V 21.987146 c 0,-1.329635 1.070428,-2.400064 2.400064,-2.400064 z" /></svg>
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>
   );
 };