Expandable Animation Bar using React-select

[Saga4]

We have a search bar implemented using AsyncSelect.
We are looking to fit the search bar in Navbar now and looking to have something like Quora.com where they have animated expandable search bar.

Please suggest on how to achieve this and if its possible with current version of AsyncSelect?

[ebonow]

On quora, it looks like two things happen when the input is focused. Both of these things can be triggered on/off with onFocus and onBlur

1. It looks like the input is merely flexing to fill the space made available by removing items next to it. You can remove them or flex-shrink to hide the content and if your style of the select container is set to flex: 1 1 auto it should fill the available space.

2. A dark transparent fixed div appears below the Navbar. This can be conditionally rendered or maybe even added as a pseudo element