0

I have a header with the main navigationBar and a searchBar that appears only on small devices when clicking on an icon. For activating the searchBar I have a hook called useBoolean that returns a searchBarisShown, openSearchBar, closeSearchBar, and toggleSearchBar.

I have a wrapper for both navigationBar and searchBar and for animation purposes for the shadow I have another wrapper. It looks like this.

const Header = () => {
  // Hooks
  const [isSearchShown, openSearchBar, closeSearchBar, toggleSearch] = useBoolean()

  const topMenuAnimation = useSpring({
    transform: isSearchShown ? `translateY(0)` : `translateY(-100%)`,
  })

  const headerHeightAnimation = useSpring({
    // 99px = 48px from search bar + 51px from header
    height: isSearchShown ? '99px' : '51px',
  })

  if (window.innerWidth >= '990px') {
    closeSearchBar()
  }

  return (
    <HeaderMainContainer style={headerHeightAnimation}>
      <HeaderBar>
         {content}
      </HeaderBar>
      <SearchBar style={topMenuAnimation}>
        <SearchFieldBar />
      </SearchBar>
    </HeaderMainContainer>
  )
}

The thing is I want to close my searchBar with closeSearchBar when resizing over 990px because otherwise, I have my shadow way down below my navigation bar when this is closed. If I try to do this on styled-components with a media query it doesn't work because I am using styled-components and this only manipulates the virtual DOM and useSpring manipulates de real DOM. Do you have any suggestions on how to make this searchBar disappear?

l.legren
  • 161
  • 1
  • 2
  • 13
  • Would keeping track of the window dimensions work (e.g. https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs/36862446#36862446) ? Then you could use something like `{windowWidth < 990 && }` – James Whiteley Apr 09 '21 at 11:01
  • That way I am having the same problem, the searchBar disappears but I need isSearchShown to be false, because otherwise the component dealing still having the total height of the header with the searchBar. That's the reason I need to call closeSearchBar when going over 990px. – l.legren Apr 09 '21 at 13:09

0 Answers0