diff options
Diffstat (limited to 'src/components/organisms/toolbar/toolbar.tsx')
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.tsx | 86 |
1 files changed, 0 insertions, 86 deletions
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx deleted file mode 100644 index c0be464..0000000 --- a/src/components/organisms/toolbar/toolbar.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/* 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> - ); -}; |
