React-MUI Design Patterns

Here's how to create a navigation bar that disappears when a user is scrolling down and appears when a user is scrolling up.

import React,{useState,useEffect} from "react"
import {AppBar,Toolbar,Typography,Button,IconButton,Slide} from "@mui/material"
import MenuIcon from "@mui/icons-material/Menu"





const Navbar= ()=>{
    const [scrolling,setScrolling]=useState(false)
    const [scrollTop, setScrollTop]=useState(0)



    useEffect(()=>{
           function handleScroll(e){
        setScrollTop(e.target.documentElement.scrollTop)
        setScrolling(e.target.documentElement.scrollTop>scrollTop)
    }


        window.addEventListener('scroll',handleScroll)
        return ()=>{
            window.removeEventListener('scroll', handleScroll)
        }

    },[scrolling,scrollTop])

    useEffect(()=>{
       return  setScrolling((prev)=>prev!==scrolling)
    },[scrolling])



    return (
        <div   >
            <Slide in={!scrolling}>
         <AppBar position="fixed">
            <Toolbar>
                <IconButton
                color="inherit"
                aria-label="Menu"
                >
                    <MenuIcon/>
                </IconButton>
                <Typography
                variant="title"
                color="inherit"
                >
TITLE
                </Typography>
                <Button color="inherit">Login</Button>
            </Toolbar>


         </AppBar>
          </Slide>
<ul className="my-10">
    {new Array(500).fill(null).map((v,i)=><li key={i}>{i}</li>)}
</ul>


        </div>
    )
}
export default Navbar

When the component mounts, the handleScroll() method is added as a listener to the scroll event on the window object. The scrolling state is a Boolean value that hides the AppBar when true. The scrollTop state is the position of the previous scroll event. The onscroll() method figures out whether the user is scrolling by checking if the new scroll position is greater than the last scroll position.

See more about the Slide component at material-ui.com/api/slide