blob: 659305550629bc179ac6025ea6a07f7d40a31b4e (
plain)
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
|
import { FC, 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 [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
return (
<div className={`${styles.wrapper} ${className}`}>
<MainNav
items={nav}
isActive={isNavOpened}
setIsActive={setIsNavOpened}
className={styles.modal}
/>
<Search
searchPage={searchPage}
isActive={isSearchOpened}
setIsActive={setIsSearchOpened}
className={`${styles.modal} ${styles['modal--search']}`}
/>
<Settings
isActive={isSettingsOpened}
setIsActive={setIsSettingsOpened}
className={`${styles.modal} ${styles['modal--settings']}`}
tooltipClassName={styles.tooltip}
/>
</div>
);
};
export default Toolbar;
|
