diff --git a/client/common/icons.jsx b/client/common/icons.jsx index ff526c63f4..571dec3a74 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -13,6 +13,8 @@ import DropdownArrow from '../images/down-filled-triangle.svg'; import Preferences from '../images/preferences.svg'; import Play from '../images/triangle-arrow-right.svg'; import More from '../images/more.svg'; +import Editor from '../images/editor.svg'; +import Account from '../images/account.svg'; import Code from '../images/code.svg'; import Save from '../images/save.svg'; import Terminal from '../images/terminal.svg'; @@ -83,6 +85,8 @@ export const GoogleIcon = withLabel(Google); export const PlusIcon = withLabel(Plus); export const CloseIcon = withLabel(Close); export const ExitIcon = withLabel(Exit); +export const EditorIcon = withLabel(Editor); +export const AccountIcon = withLabel(Account); export const DropdownArrowIcon = withLabel(DropdownArrow); export const PreferencesIcon = withLabel(Preferences); export const PlayIcon = withLabel(Play); diff --git a/client/components/Nav/NavBar.jsx b/client/components/Nav/NavBar.jsx index d5e33ada23..4b74124ba5 100644 --- a/client/components/Nav/NavBar.jsx +++ b/client/components/Nav/NavBar.jsx @@ -8,7 +8,7 @@ import React, { } from 'react'; import { MenuOpenContext, NavBarContext } from './contexts'; -function NavBar({ children }) { +function NavBar({ children, className }) { const [dropdownOpen, setDropdownOpen] = useState('none'); const timerRef = useRef(null); @@ -55,6 +55,15 @@ function NavBar({ children }) { timerRef.current = setTimeout(() => setDropdownOpen('none'), 10); }, [timerRef, setDropdownOpen]); + const toggleDropdownOpen = useCallback( + (dropdown) => { + setDropdownOpen((prevState) => + prevState === dropdown ? 'none' : dropdown + ); + }, + [setDropdownOpen] + ); + const contextValue = useMemo( () => ({ createDropdownHandlers: (dropdown) => ({ @@ -64,9 +73,7 @@ function NavBar({ children }) { ); }, onClick: () => { - setDropdownOpen((prevState) => - prevState === 'none' ? dropdown : 'none' - ); + toggleDropdownOpen(dropdown); }, onBlur: handleBlur, onFocus: clearHideTimeout @@ -80,15 +87,16 @@ function NavBar({ children }) { clearHideTimeout(); setDropdownOpen(dropdown); } - }) + }), + toggleDropdownOpen }), - [setDropdownOpen, clearHideTimeout, handleBlur] + [setDropdownOpen, toggleDropdownOpen, clearHideTimeout, handleBlur] ); return (
-