Adding a search bar

[MedAliBZ]

Hello, I really like your start page and I added a search bar to it,
I was wondering if you want to add it to the original start page, I already done all the work, and I have all the code done already.

[migueravila]

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!

[MedAliBZ]

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.

[migueravila]

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.

[dreamhopping]

@MedAliBZ Hey man, I know this is completely random, I have zero knowledge of coding/git hub etc before a few days ago where I stumbled accross Bento trying to make firefox look nice, had a sudden urge to try and get a search bar added but again, literally zero knowledge of anything in that regard, any chance you can hook me up and help out.

Apologies if I'm messaging in the wrong place or whatnot, figured it would be a shot in the dark regardless so just let me know, hopefully I'm not breaking some unwritten (or maybe even very evident rule).

[lewisdoesstuff]

@dreamhopping
You can find the changes in the repo OP linked: https://github.com/MohamedAliBouzaiene/Bento

It's a little behind upstream (this repo), but you should be able to follow the install instructions as usual, substituting the link to the repo with the search bar :)

edit: just checked and it doesn't mention a link, just fork the repo and set up as normal :)

[dreamhopping]

@lewisdoesstuff honestly, really not sure what that means, probably should have just left it with the 'default' which I somehow managed to stumble over into working, just tried messing around with stuff and now everything is broken and not working, oh well haha.

Appreciate the help nonetheless. (:👍

[lewisdoesstuff]

@dreamhopping ah no worries, if you want a hand setting it up drop me a dm and i'll go through it :)

[RoyRao2333]

@MedAliBZ

Loving your design! Could you please update your fork with latest code of this repository? Much thanks!