diff options
| -rw-r--r-- | src/components/Buttons/Buttons.module.scss | 12 | ||||
| -rw-r--r-- | src/components/MainNav/MainNav.module.scss | 14 | ||||
| -rw-r--r-- | src/components/MainNav/MainNav.tsx | 46 | ||||
| -rw-r--r-- | src/components/Toolbar/Toolbar.tsx | 28 |
4 files changed, 39 insertions, 61 deletions
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index 2a6daca..0ea9289 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -177,7 +177,7 @@ } .toolbar { - --draw-border-thickness: #{fun.convert-px(5)}; + --draw-border-thickness: #{fun.convert-px(4)}; --icon-size: 100%; display: flex; @@ -198,15 +198,11 @@ @extend %draw-borders; } - /* @include mix.media("screen") { + @include mix.media("screen") { @include mix.dimensions("md") { - &:hover, - &:focus { - transform: rotate(360deg); - transition: all 0.8s ease-in-out 0s; - } + border-radius: 8%; } - } */ + } } .icon { diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss index 3ced245..f3e6c10 100644 --- a/src/components/MainNav/MainNav.module.scss +++ b/src/components/MainNav/MainNav.module.scss @@ -37,12 +37,7 @@ padding: var(--spacing-2xs); &:hover { - span, - span::before, - span::after { - background: var(--color-primary-lighter); - box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-shadow); - } + @extend %draw-borders; } @include mix.media("screen") { @@ -63,12 +58,7 @@ &:hover { ~ .label { - span, - span::before, - span::after { - background: var(--color-primary-lighter); - box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-shadow); - } + @extend %draw-borders; } } diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx index c7789ba..dcaba30 100644 --- a/src/components/MainNav/MainNav.tsx +++ b/src/components/MainNav/MainNav.tsx @@ -9,42 +9,22 @@ import { import { NavItem } from '@ts/types/nav'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { SetStateAction, useCallback, useEffect, useRef } from 'react'; +import { ForwardedRef, forwardRef, SetStateAction } from 'react'; import { useIntl } from 'react-intl'; import styles from './MainNav.module.scss'; -const MainNav = ({ - isOpened, - setIsOpened, -}: { - isOpened: boolean; - setIsOpened: (value: SetStateAction<boolean>) => void; -}) => { +const MainNav = ( + { + isOpened, + setIsOpened, + }: { + isOpened: boolean; + setIsOpened: (value: SetStateAction<boolean>) => void; + }, + ref: ForwardedRef<HTMLDivElement> +) => { const intl = useIntl(); const router = useRouter(); - const mainNavRef = useRef<HTMLDivElement>(null); - - const handleVisibility = useCallback( - (e: MouseEvent | FocusEvent) => { - if ( - mainNavRef.current && - !mainNavRef.current.contains(e.target as Node) - ) { - setIsOpened(false); - } - }, - [setIsOpened] - ); - - useEffect(() => { - document.addEventListener('mousedown', handleVisibility); - document.addEventListener('focusin', handleVisibility); - - return () => { - document.removeEventListener('mousedown', handleVisibility); - document.removeEventListener('focusin', handleVisibility); - }; - }, [handleVisibility]); const mainNavConfig: NavItem[] = [ { @@ -122,7 +102,7 @@ const MainNav = ({ }); return ( - <div ref={mainNavRef} className={styles.wrapper}> + <div id="main-nav" ref={ref} className={styles.wrapper}> <input type="checkbox" name="main-nav__checkbox" @@ -164,4 +144,4 @@ const MainNav = ({ ); }; -export default MainNav; +export default forwardRef(MainNav); diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx index 25418b1..7b28757 100644 --- a/src/components/Toolbar/Toolbar.tsx +++ b/src/components/Toolbar/Toolbar.tsx @@ -9,6 +9,7 @@ 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); @@ -39,16 +40,14 @@ const Toolbar = () => { ref: RefObject<HTMLDivElement>, target: EventTarget ) => { - const currentRef = ref.current; - return currentRef && !currentRef.contains(target as Node); + return ref.current && !ref.current.contains(target as Node); }; const isToggleBtn = (ref: RefObject<HTMLDivElement>, target: EventTarget) => { - const currentRef = ref.current; return ( - currentRef && - currentRef.previousElementSibling && - currentRef.previousElementSibling.contains(target as Node) + ref.current && + ref.current.previousElementSibling && + ref.current.previousElementSibling.contains(target as Node) ); }; @@ -68,6 +67,7 @@ const Toolbar = () => { const handleVisibility = useCallback( (e: MouseEvent | FocusEvent) => { let ref: RefObject<HTMLDivElement> | null = null; + if (isNavOpened) ref = mainNavRef; if (isSearchOpened) ref = searchModalRef; if (isSettingsOpened) ref = settingsModalRef; @@ -76,6 +76,14 @@ const Toolbar = () => { 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) ) @@ -86,7 +94,7 @@ const Toolbar = () => { ) setIsSettingsOpened(false); }, - [isSearchOpened, isSettingsOpened, isSearchBtn, isSettingsBtn] + [isNavOpened, isSearchOpened, isSettingsOpened, isSearchBtn, isSettingsBtn] ); useEffect(() => { @@ -109,7 +117,11 @@ const Toolbar = () => { return ( <div className={styles.wrapper}> - <MainNav isOpened={isNavOpened} setIsOpened={setIsNavOpened} /> + <MainNav + ref={mainNavRef} + isOpened={isNavOpened} + setIsOpened={setIsNavOpened} + /> <ButtonToolbar ref={searchBtnRef} type="search" |