src/components/Toolbar/Toolbar.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

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);
      setIsThemeOpened(false);
    }
  }, [isNavOpened]);

  useEffect(() => {
    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']
  }`;

  return (
    <div className={styles.wrapper}>
      <MainNav isOpened={isNavOpened} setIsOpened={setIsNavOpened} />
      <ButtonSearch
        isActivated={isSearchOpened}
        setIsActivated={setIsSearchOpened}
      />
      <div className={searchClasses}>
        <SearchForm isOpened={isSearchOpened} />
      </div>
      <div>
        <ThemeToggle />
      </div>
    </div>
  );
};

export default Toolbar;