aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/toolbar/toolbar.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/toolbar/toolbar.tsx')
-rw-r--r--src/components/organisms/toolbar/toolbar.tsx86
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>
- );
-};