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
66
|
import useClickOutside from '@utils/hooks/use-click-outside';
import { FC, useRef, useState } from 'react';
import MainNav, { type MainNavProps } from '../toolbar/main-nav';
import Search, { type SearchProps } from '../toolbar/search';
import Settings from '../toolbar/settings';
import styles from './toolbar.module.scss';
export type ToolbarProps = Pick<SearchProps, 'searchPage'> & {
/**
* Set additional classnames to the toolbar wrapper.
*/
className?: string;
/**
* The main nav items.
*/
nav: MainNavProps['items'];
};
/**
* Toolbar component
*
* Render the website toolbar.
*/
const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => {
const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
const mainNavRef = useRef<HTMLDivElement>(null);
const searchRef = useRef<HTMLDivElement>(null);
const settingsRef = useRef<HTMLDivElement>(null);
useClickOutside(mainNavRef, () => isNavOpened && setIsNavOpened(false));
useClickOutside(searchRef, () => isSearchOpened && setIsSearchOpened(false));
useClickOutside(
settingsRef,
() => isSettingsOpened && setIsSettingsOpened(false)
);
return (
<div className={`${styles.wrapper} ${className}`}>
<MainNav
items={nav}
isActive={isNavOpened}
setIsActive={setIsNavOpened}
className={styles.modal}
ref={mainNavRef}
/>
<Search
searchPage={searchPage}
isActive={isSearchOpened}
setIsActive={setIsSearchOpened}
className={`${styles.modal} ${styles['modal--search']}`}
ref={searchRef}
/>
<Settings
isActive={isSettingsOpened}
setIsActive={setIsSettingsOpened}
className={`${styles.modal} ${styles['modal--settings']}`}
tooltipClassName={styles.tooltip}
ref={settingsRef}
/>
</div>
);
};
export default Toolbar;
|
