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
78
79
80
81
82
83
84
85
86
|
/* eslint-disable max-statements */
import type { FC } from 'react';
import {
useBoolean,
useOnClickOutside,
useRouteChange,
} from '../../../utils/hooks';
import { MainNavItem, type MainNavItemProps } from './main-nav';
import { Search, type SearchProps } from './search';
import { Settings } from './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: MainNavItemProps['items'];
};
/**
* Toolbar component
*
* Render the website toolbar.
*/
export const Toolbar: FC<ToolbarProps> = ({
className = '',
nav,
searchPage,
}) => {
const {
deactivate: deactivateMainNav,
state: isMainNavOpen,
toggle: toggleMainNav,
} = useBoolean(false);
const {
deactivate: deactivateSearch,
state: isSearchOpen,
toggle: toggleSearch,
} = useBoolean(false);
const {
deactivate: deactivateSettings,
state: isSettingsOpen,
toggle: toggleSettings,
} = useBoolean(false);
const mainNavRef = useOnClickOutside<HTMLDivElement>(
() => isMainNavOpen && deactivateMainNav()
);
const searchRef = useOnClickOutside<HTMLDivElement>(
() => isSearchOpen && deactivateSearch()
);
const settingsRef = useOnClickOutside<HTMLDivElement>(
() => isSettingsOpen && deactivateSettings()
);
useRouteChange(deactivateSearch);
return (
<div className={`${styles.wrapper} ${className}`}>
<MainNavItem
className={styles.modal}
isActive={isMainNavOpen}
items={nav}
ref={mainNavRef}
setIsActive={toggleMainNav}
/>
<Search
className={`${styles.modal} ${styles['modal--search']}`}
isActive={isSearchOpen}
ref={searchRef}
searchPage={searchPage}
setIsActive={toggleSearch}
/>
<Settings
className={`${styles.modal} ${styles['modal--settings']}`}
isActive={isSettingsOpen}
ref={settingsRef}
setIsActive={toggleSettings}
/>
</div>
);
};
|
