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, useState, useCallback } from 'react';
import { useOnClickOutside, useRouteChange } from '../../../utils/hooks';
import { MainNavItem, type MainNavItemProps } from './main-nav';
import { Search, type SearchProps } from './search';
import { Settings, type SettingsProps } from './settings';
import styles from './toolbar.module.scss';
export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
Pick<SettingsProps, 'motionStorageKey'> & {
/**
* 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 = '',
motionStorageKey,
nav,
searchPage,
}) => {
const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
const mainNavRef = useOnClickOutside<HTMLDivElement>(
() => isNavOpened && setIsNavOpened(false)
);
const searchRef = useOnClickOutside<HTMLDivElement>(
() => isSearchOpened && setIsSearchOpened(false)
);
const settingsRef = useOnClickOutside<HTMLDivElement>(
() => isSettingsOpened && setIsSettingsOpened(false)
);
const toggleMainNav = useCallback(
() => setIsNavOpened((prevState) => !prevState),
[]
);
const toggleSearch = useCallback(
() => setIsSearchOpened((prevState) => !prevState),
[]
);
const toggleSettings = useCallback(
() => setIsSettingsOpened((prevState) => !prevState),
[]
);
useRouteChange(() => setIsSearchOpened(false));
return (
<div className={`${styles.wrapper} ${className}`}>
<MainNavItem
className={styles.modal}
isActive={isNavOpened}
items={nav}
ref={mainNavRef}
setIsActive={toggleMainNav}
/>
<Search
className={`${styles.modal} ${styles['modal--search']}`}
isActive={isSearchOpened}
ref={searchRef}
searchPage={searchPage}
setIsActive={toggleSearch}
/>
<Settings
className={`${styles.modal} ${styles['modal--settings']}`}
isActive={isSettingsOpened}
motionStorageKey={motionStorageKey}
ref={settingsRef}
setIsActive={toggleSettings}
/>
</div>
);
};
|
