Modify SearchBar to use Vuetify toolbars

[gromdimon]

Is your feature request related to a problem? Please describe.

Currently, the search bar component is being implemented using multiple building blocks: a text field, select options, and a search button. However, Vuetify offers a more elegant approach to handling such cases, specifically by utilizing toolbars. We should rework the search component to enhance its efficiency and maintainability.

Describe the solution you'd like

Refactor the SearchBar.vue component as follows:

1. Revise the SearchBar.vue component code.
2. Update corresponding tests to ensure proper functionality is maintained.
3. Modify the usage of the SearchBar.vue component in HomeView.vue to align with the revised structure.

Additional task

Additionally, enhance the user experience by incorporating the SearchBar.vue component into the HeaderDetailPage.vue for details pages. This involves:

1. Integrating the SearchBar.vue component into the HeaderDetailPage.vue.
   • Note that the HeaderDetailPage.vue is used exclusively with specific search results, so the SearchBar should be pre-filled with data such as searchTerm and genomeRelease.
   • Be mindful of proper implementation to ensure that props are correctly passed via references.
2. Thoroughly testing the integration to verify its functionality and responsiveness.

Describe alternatives you've considered

None have been considered at this point.

Additional context

This enhancement presents an opportunity to streamline our implementation and improve efficiency across the application, ultimately leading to a more cohesive user experience.