diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css --- a/web/navigation-panels/nav-state-info-bar.css +++ b/web/navigation-panels/nav-state-info-bar.css @@ -3,9 +3,9 @@ background-color: var(--bg); align-items: center; justify-content: space-between; - padding: 16px; + padding: 0 16px; color: var(--thread-top-bar-color); - border-bottom: 1px solid var(--border); + height: 56px; } div.topBarThreadInfo { @@ -25,3 +25,15 @@ font-size: var(--m-font-16); font-weight: var(--bold); } + +div.hide { + height: 0px; + opacity: 0; + transition: height 200ms ease-in-out, opacity 200ms ease-in-out; +} + +div.show { + height: 56px; + opacity: 1; + transition: height 200ms ease-in-out, opacity 200ms ease-in-out; +} diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js --- a/web/navigation-panels/nav-state-info-bar.react.js +++ b/web/navigation-panels/nav-state-info-bar.react.js @@ -1,5 +1,6 @@ // @flow +import classnames from 'classnames'; import * as React from 'react'; import type { ThreadInfo } from 'lib/types/thread-types.js'; @@ -13,6 +14,7 @@ }; function NavStateInfoBar(props: NavStateInfoBarProps): React.Node { const { threadInfo } = props; + const threadBackgroundColorStyle = React.useMemo( () => ({ background: `#${threadInfo.color}`, @@ -22,7 +24,7 @@ const { uiName } = useResolvedThreadInfo(threadInfo); return ( -
+ <>
{uiName}

-
+ ); } -export default NavStateInfoBar; +type PossiblyEmptyNavStateInfoBarProps = { + +threadInfoInput: ?ThreadInfo, +}; +function PossiblyEmptyNavStateInfoBar( + props: PossiblyEmptyNavStateInfoBarProps, +): React.Node { + const [threadInfo, setThreadInfo] = React.useState(null); + + React.useEffect(() => { + if (props.threadInfoInput) { + setThreadInfo(props.threadInfoInput); + } else { + setTimeout(() => { + setThreadInfo(null); + }, 200); + } + }, [props.threadInfoInput]); + + const content = React.useMemo(() => { + if (threadInfo) { + return ; + } else { + return null; + } + }, [threadInfo]); + + const classes = classnames(css.topBarContainer, { + [css.hide]: !props.threadInfoInput, + [css.show]: props.threadInfoInput, + }); + return
{content}
; +} + +export default PossiblyEmptyNavStateInfoBar;