1 files changed, 0 insertions, 162 deletions
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
deleted file mode 100644
index 17f9ef9..0000000
--- a/src/components/Toolbar/Toolbar.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import { ButtonToolbar } from '@components/Buttons';
-import MainNav from '@components/MainNav/MainNav';
-import Spinner from '@components/Spinner/Spinner';
-import dynamic from 'next/dynamic';
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
-import styles from './Toolbar.module.scss';
-
-const DynamicSearchForm = dynamic(
-  () => import('@components/SearchForm/SearchForm'),
-  {
-    loading: () => <Spinner />,
-  }
-);
-
-const DynamicSettings = dynamic(() => import('@components/Settings/Settings'), {
-  loading: () => <Spinner />,
-});
-
-const Toolbar = () => {
-  const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
-  const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
-  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
-  const mainNavRef = useRef<HTMLDivElement>(null);
-  const searchBtnRef = useRef<HTMLButtonElement>(null);
-  const searchModalRef = useRef<HTMLDivElement>(null);
-  const settingsBtnRef = useRef<HTMLButtonElement>(null);
-  const settingsModalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isNavOpened) {
-      setIsSearchOpened(false);
-      setIsSettingsOpened(false);
-    }
-  }, [isNavOpened]);
-
-  useEffect(() => {
-    if (isSearchOpened) {
-      setIsNavOpened(false);
-      setIsSettingsOpened(false);
-    }
-  }, [isSearchOpened]);
-
-  useEffect(() => {
-    if (isSettingsOpened) {
-      setIsNavOpened(false);
-      setIsSearchOpened(false);
-    }
-  }, [isSettingsOpened]);
-
-  const isClickOutside = (
-    ref: RefObject<HTMLDivElement>,
-    target: EventTarget
-  ) => {
-    return ref.current && !ref.current.contains(target as Node);
-  };
-
-  const isToggleBtn = (ref: RefObject<HTMLDivElement>, target: EventTarget) => {
-    return (
-      ref.current &&
-      ref.current.previousElementSibling &&
-      ref.current.previousElementSibling.contains(target as Node)
-    );
-  };
-
-  const isSearchBtn = useCallback((target: HTMLElement) => {
-    return (
-      target === searchBtnRef.current || searchBtnRef.current?.contains(target)
-    );
-  }, []);
-
-  const isSettingsBtn = useCallback((target: HTMLElement) => {
-    return (
-      target === settingsBtnRef.current ||
-      settingsBtnRef.current?.contains(target)
-    );
-  }, []);
-
-  const handleVisibility = useCallback(
-    (e: MouseEvent | FocusEvent) => {
-      let ref: RefObject<HTMLDivElement> | null = null;
-      if (isNavOpened) ref = mainNavRef;
-      if (isSearchOpened) ref = searchModalRef;
-      if (isSettingsOpened) ref = settingsModalRef;
-
-      if (!ref || !ref.current || !ref.current.id) return;
-      if (!isClickOutside(ref, e.target as Node)) return;
-      if (isToggleBtn(ref, e.target as Node)) return;
-
-      if (
-        ref.current.id === 'main-nav' &&
-        !isSettingsBtn(e.target as HTMLElement) &&
-        !isSearchBtn(e.target as HTMLElement)
-      ) {
-        setIsNavOpened(false);
-      }
-
-      if (
-        ref.current.id === 'search-modal' &&
-        !isSettingsBtn(e.target as HTMLElement)
-      )
-        setIsSearchOpened(false);
-      if (
-        ref.current.id === 'settings-modal' &&
-        !isSearchBtn(e.target as HTMLElement)
-      )
-        setIsSettingsOpened(false);
-    },
-    [isNavOpened, isSearchOpened, isSettingsOpened, isSearchBtn, isSettingsBtn]
-  );
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleVisibility);
-    document.addEventListener('focusin', handleVisibility);
-
-    return () => {
-      document.removeEventListener('mousedown', handleVisibility);
-      document.removeEventListener('focusin', handleVisibility);
-    };
-  }, [handleVisibility]);
-
-  const searchClasses = `${styles.menu} ${
-    isSearchOpened ? styles['menu--opened'] : styles['menu--closed']
-  }`;
-
-  const settingsClasses = `${styles.menu} ${
-    isSettingsOpened ? styles['menu--opened'] : styles['menu--closed']
-  }`;
-
-  return (
-    <div className={styles.wrapper}>
-      <MainNav
-        ref={mainNavRef}
-        isOpened={isNavOpened}
-        setIsOpened={setIsNavOpened}
-      />
-      <ButtonToolbar
-        ref={searchBtnRef}
-        type="search"
-        isActivated={isSearchOpened}
-        setIsActivated={setIsSearchOpened}
-      />
-      <div id="search-modal" className={searchClasses} ref={searchModalRef}>
-        <DynamicSearchForm isOpened={isSearchOpened} />
-      </div>
-      <ButtonToolbar
-        ref={settingsBtnRef}
-        type="settings"
-        isActivated={isSettingsOpened}
-        setIsActivated={setIsSettingsOpened}
-      />
-      <div
-        id="settings-modal"
-        className={settingsClasses}
-        ref={settingsModalRef}
-      >
-        <DynamicSettings />
-      </div>
-    </div>
-  );
-};
-
-export default Toolbar;