Navbar or Searchbar Enhancement

[kumarankit999]

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

There Should be a Search bar or Navbar for this Webpage. If Someone wants to search any items stuff, he can find easily that thing

Describe the solution you'd like We can Create a Search-bar in the Upper Header Section . So, that it can be beneficial to all the Project Clients.

[github-actions[bot]]

Hello @kumarankit999, thanks for raising an issue in this project. The maintainers of this project are volunteers so please be understanding if it takes time before you get a response. We still appreciate your help with raising issues!

[Neha]

Hello @kumarankit999 ,

Thank you for your request. This is a great feature to add.

How should be the search behaviour?

1. It should open an on-fly suggestion menu for search keywords. (what should be the minimum chars search)
2. or, it should navigate the user to the specific component page after the user has typed the component name

[EmmaDawsonDev]

This is definitely something I'd like to add. I think we need to think about the behaviour, as Neha suggested so that we know how it will provide a good search experience. Do you have any suggestions?

[kumarankit999]

That's Awesome @EmmaDawsonDev & @Neha , As Neha tells about the features of Search bar, I think we can go further with the Second Option which is it will navigate the user to the specific component page after the user has typed the component name.

[EmmaDawsonDev]

We are adding a search to the new design. I think to start with, what a user types can match with pages and show a dropdown list of potential matches which the user has to click on in order to navigate to a page. So it a user types "b" it will show breadcrumbs and buttons as possible matches. If there are no results it should show a "No results" message. It should also be case-insensitive.

[Neha]

This sounds good. How are we going to implement search? Are we going to integrate 3rd party search such as Algolia, or create a data-store using Firebase, etc?

[kumarankit999]

Yes,We can do this

[EmmaDawsonDev]

This sounds good. How are we going to implement search? Are we going to integrate 3rd party search such as Algolia, or create a data-store using Firebase, etc?

I’m not sure yet. It’s not something I’ve implemented myself before. If we incorporate any third party packages I would prefer them to be open source and they must be accessible so we would need to do some testing in order to choose the right one. Do you have any experience of implementing search you can share?

[Neha]

This sounds good. How are we going to implement search? Are we going to integrate 3rd party search such as Algolia, or create a data store using Firebase, etc?

I’m not sure yet. It’s not something I’ve implemented myself before. If we incorporate any third-party packages I would prefer them to be open source and they must be accessible so we would need to do some testing in order to choose the right one. Do you have any experience of implementing search you can share?

I Agree regarding the testing part. I haven't implemented anything like this before but surely can try. I can do research on the different ways to add search on the website - 3rd party or developing our own solution. The goal would be:

Have pros and cons (cost, the effort of devs, complexity in maintenance and scalability).

wyt @EmmaDawsonDev

[EmmaDawsonDev]

Some research would be fantastic Neha, no pressure to do it quickly. Just let us know your findings as and when you have time 😊

[EmmaDawsonDev]

Maybe something in this Twitter thread may be useful https://twitter.com/sarasoueidan/status/1662504864960708608?s=46&t=NENo_XbMVtGR48ANeiuC0w since Sara is an accessibility specialist

[Neha]

Maybe something in this Twitter thread may be useful https://twitter.com/sarasoueidan/status/1662504864960708608?s=46&t=NENo_XbMVtGR48ANeiuC0w since Sara is an accessibility specialist

Hey, @EmmaDawsonDev I went through the replies. There are the same 2 options:

1. Custom
2. Algolia: Sara asked if this is accessible or not. We have control of the markup so can implement access. However, there is one concern raised in one tweet: needs to enter the whole word https://twitter.com/vytyaa/status/1662704281827328001

My suggestion:

Let me do a POC on Algolia and share the outcome.

[EmmaDawsonDev]

I know a lot of them recommend Algolia but it requires a login to their dashboard which means that it's pretty limited for contributors to help make improvements if necessary and it's not open source. I think it's probably more than we need for a project of this size. Looking at some of the other suggestions, I think pagefind looks quite promising. From a quick readthrough there doesn't seem to be a need to create any extra server side indexing of content (although I did just skim read).

[Neha]

I know a lot of them recommend Algolia but it requires a login to their dashboard which means that it's pretty limited for contributors to help make improvements if necessary and it's not open source. I think it's probably more than we need for a project of this size. Looking at some of the other suggestions, I think pagefind looks quite promising. From a quick readthrough there doesn't seem to be a need to create any extra server side indexing of content (although I did just skim read).

Hey @EmmaDawsonDev. Sure...let me check pagefind too. What are your thoughts if we create our own search. We need to have our DB. We can use Firebase, or AWS and write custom code. PS: Server side will be chargable.

[EmmaDawsonDev]

Hey @EmmaDawsonDev. Sure...let me check pagefind too. What are your thoughts if we create our own search. We need to have our DB. We can use Firebase, or AWS and write custom code. PS: Server side will be chargable.

I wonder how much of a manual job it would be to add things to the database. Since the articles are being written directly into the pages of the site it would be great if there's a tool that can use that directly. This is what I get the impression PageFind does although I may be wrong. But obviously there's pros and cons to everything. I'm not against creating our own search if it's not too overwhelming.

[DIWAKARKASHYAP]

improve styling of Navigation and add searchbox PR #322 check this

[EmmaDawsonDev]

Hi @DIWAKARKASHYAP please don't submit PRs for issues assigned to someone else

[DIWAKARKASHYAP]

@EmmaDawsonDev sorry but Assignees is not mention in this issue

[kumarankit999]

@DIWAKARKASHYAP right now we are working on it, Kindly See the above Conversation.

[DIWAKARKASHYAP]

@kumarankit999 is this completed ?

[DIWAKARKASHYAP]

is anybody working on this ?

[kumarankit999]

We are trying to work on this @DIWAKARKASHYAP

[DIWAKARKASHYAP]

@kumarankit999 you need any help ?

[DIWAKARKASHYAP]

@EmmaDawsonDev i want to work on this

[EmmaDawsonDev]

Feel free to do some research about the different options and let me know your findings. Preferably something free, open source and doesn't require manual indexing of all the content.