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
67
68
69
70
71
72
73
74
75
76
77
|
import useClickOutside from '@utils/hooks/use-click-outside';
import useRouteChange from '@utils/hooks/use-route-change';
import { FC, useRef, useState } from 'react';
import MainNav, { type MainNavProps } from '../toolbar/main-nav';
import Search, { type SearchProps } from '../toolbar/search';
import Settings, { SettingsProps } from '../toolbar/settings';
import styles from './toolbar.module.scss';
export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
Pick<SettingsProps, 'ackeeStorageKey' | 'motionStorageKey'> & {
/**
* 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> = ({
ackeeStorageKey,
className = '',
motionStorageKey,
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)
);
useRouteChange(() => setIsSearchOpened(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
ackeeStorageKey={ackeeStorageKey}
className={`${styles.modal} ${styles['modal--settings']}`}
isActive={isSettingsOpened}
motionStorageKey={motionStorageKey}
ref={settingsRef}
setIsActive={setIsSettingsOpened}
tooltipClassName={styles.tooltip}
/>
</div>
);
};
export default Toolbar;
|
