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
56
57
58
59
60
61
62
63
64
65

import { ButtonToolbar } from '@components/Buttons';
import MainNav from '@components/MainNav/MainNav';
import SearchForm from '@components/SearchForm/SearchForm';
import Settings from '@components/Settings/Settings';
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 [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);

  useEffect(() => {
    if (isNavOpened) {
      setIsSearchOpened(false);
      setIsSettingsOpened(false);
    }
  }, [isNavOpened]);

  useEffect(() => {
    if (isSearchOpened) {
      setIsNavOpened(false);
      setIsSettingsOpened(false);
    }
  }, [isSearchOpened]);

  useEffect(() => {
    if (isSettingsOpened) {
      setIsNavOpened(false);
      setIsSearchOpened(false);
    }
  }, [isSettingsOpened]);

  const searchClasses = `${styles.menu} ${
    isSearchOpened ? styles['menu--opened'] : styles['menu--closed']
  }`;

  const settingsClasses = `${styles.menu} ${
    isSettingsOpened ? styles['menu--opened'] : styles['menu--closed']
  }`;

  return (
    <div className={styles.wrapper}>
      <MainNav isOpened={isNavOpened} setIsOpened={setIsNavOpened} />
      <ButtonToolbar
        type="search"
        isActivated={isSearchOpened}
        setIsActivated={setIsSearchOpened}
      />
      <div className={searchClasses}>
        <SearchForm isOpened={isSearchOpened} />
      </div>
      <ButtonToolbar
        type="settings"
        isActivated={isSettingsOpened}
        setIsActivated={setIsSettingsOpened}
      />
      <div className={settingsClasses}>
        <Settings />
      </div>
    </div>
  );
};

export default Toolbar;