diff --git a/src/containers/main/Header/index.tsx b/src/containers/main/Header/index.tsx index cb681019..893737d3 100644 --- a/src/containers/main/Header/index.tsx +++ b/src/containers/main/Header/index.tsx @@ -26,12 +26,10 @@ import styles from './styles.module.scss'; export interface HeaderProps {} const Header: FC = observer(() => { - const labStats = useGetLabStats(); - const [isScrolled, setIsScrolled] = useState(false); const { showModal } = useModal(); const { isUser, user } = useAuth(); - const { updates: flowUpdates } = useFlow(); + const { hasFlowUpdates, hasLabUpdates } = useFlow(); const { borisCommentedAt } = useUpdates(); const { open } = useSidebar(); @@ -52,12 +50,6 @@ const Header: FC = observer(() => { [borisCommentedAt, isUser, user.last_seen_boris], ); - const hasLabUpdates = useMemo( - () => labStats.updates.length > 0, - [labStats.updates], - ); - const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]); - // Needed for SSR useEffect(() => { setIsScrolled(top > 10); diff --git a/src/containers/main/Header/styles.module.scss b/src/containers/main/Header/styles.module.scss index 33f225bc..fd01a468 100644 --- a/src/containers/main/Header/styles.module.scss +++ b/src/containers/main/Header/styles.module.scss @@ -114,6 +114,11 @@ top: 6px; transition: opacity 0.5s; opacity: 0; + + @include tablet { + top: -4px; + right: 14px; + } } &.has_dot { @@ -139,10 +144,6 @@ align-items: center; margin-right: $gap; } - - &::after { - right: 0; - } } } diff --git a/src/hooks/flow/useFlow.ts b/src/hooks/flow/useFlow.ts index 271aaf98..34aea52d 100644 --- a/src/hooks/flow/useFlow.ts +++ b/src/hooks/flow/useFlow.ts @@ -8,15 +8,26 @@ import { useFlowStore } from '~/store/flow/useFlowStore'; export const useFlow = () => { const { loadMore, isSyncing } = useFlowLoader(); + const labStats = useGetLabStats(); const { nodes, heroes, recent, updated } = useFlowStore(); const { isFluid, toggleLayout } = useFlowLayout(); const lab = useGetLabStats(); - const updates = useMemo(() => [...updated, ...lab.updates].slice(0, 10), [lab.updates, updated]); + const updates = useMemo( + () => [...updated, ...lab.updates].slice(0, 10), + [lab.updates, updated], + ); const onChangeCellView = useFlowSetCellView(); + const hasLabUpdates = useMemo( + () => labStats.updates.length > 0, + [labStats.updates], + ); + + const hasFlowUpdates = useMemo(() => updated.length > 0, [updated]); + return { nodes, heroes, @@ -27,5 +38,7 @@ export const useFlow = () => { onChangeCellView, loadMore, isSyncing, + hasLabUpdates, + hasFlowUpdates, }; };