reactjs - Expand the Searchbar and hide the links on the Appbar

Question

Following is the code to expand the SearchBAr on focus.In addition to that , i need the searchBar to expand in such a way that the Navigational link on the AppBAr should not be seen.The SearchBar should overlap the Nav Links.

I need to achieve this in React JS

SearchInput: {

    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: '20ch',
      '&:focus': {
        width: '100ch',
      },
    },

question from:https://stackoverflow.com/questions/65901250/expand-the-searchbar-and-hide-the-links-on-the-appbar

Answer 1

Waitting for answers