Nav.component.tsx

import * as React from "react";
import "./Nav.component.scss";
import {useObservable} from "rxjs-hooks";
import {watchScroll$} from "./nav.service";
import {ScrollMovement, ScrollType} from "./types";
// other imports

function Nav(): JSX.Element {
    const scrollDirection: ScrollType = useObservable(watchScroll$, ScrollMovement.UP);

    return (
        <div className={cn("Nav", {"hidden": scrollDirection === ScrollMovement.DOWN})}>
            <div className="Nav__Item">
                <a className="Logo" href="/">
                    <img src={Logo} alt="Carlos Gómez"/>
                </a>
            </div>
            <div className="Nav__Item">
                <Menu/>
            </div>
        </div>
    );
}

export default Nav;