Adding a search bar about bento HOT 3 OPEN

Hi! @MohamedAliBouzaiene I've read all and It's awesome what you've done there.

I'm thinking on add it in a different way but I'll keep this Issue open in order to mark it solved when It's implemented. I'll also use some of your code so I'll add you in the collaborators inside the code.

from bento.

Hey! @MohamedAliBouzaiene I've been thinking about adding a Search bar to Bento, but I don't know what kind of design it should be.

I've been thinking a Tilde's like search bar (fullscreen) showing it by start typing. But can you share me your code? It looks fantastic and how you design it!

from bento.

yeah sure @MiguelRAvila!

Just check my fork : https://github.com/MohamedAliBouzaiene/Bento

So let me explain what I did, first of all I started by adding an input tag nested inside a form tag with an action attribute and a GET method .

And then I added 2 variables in the SCSS file searchBoxColor (which is 95% transparent) and imgGoogle (which is the icon) as you can see I added 2 icons , one for the dark mode and the other for the light one

Then I fixed some SCSS to make it look that way

And finally I added some javascript code to make the search bar automatically clear itself after clicking enter and opening the google search engine.

from bento.