Change Navbar Design

[thecodingwizard]

Our current navbar can get quite cluttered:

We might want to change some stuff (specifically changing the search bar to become a button that then opens into a full-width search?)

[MrinallU]

@thecodingwizard I can do this.

[MrinallU]

@thecodingwizard So other than changing the search bar what else would you need to me to get done?

[thecodingwizard]

Stuff here: https://github.com/cpinitiative/usaco-guide/labels/website (especially the Blog :P)

And also feel free to help with content issues as well.

Thanks! :)

[MrinallU]

@thecodingwizard Essentially what I had in mind was a component like the problem search, with a route in the navbar containing the new search component.

[MrinallU]

@thecodingwizard Can you assign me to this so I don't forget?

[MrinallU]

@thecodingwizard Just making sure a full width search just means a page like the problems search but with the modules

[thecodingwizard]

no... I was thinking of a search icon button that would expand to become full width when clicked (or something similar). Or, alternatively, when clicking the search icon a full-page popup for search appears; that is probably fine too. I just want the ability for users to search without having to leave their page.

[MrinallU]

Ohhhh, I got you!

[Hanaffi]

@thecodingwizard Something like this: https://www.youtube.com/watch?v=2yfLpNALc1g ?

[thecodingwizard]

actually, why don't we just make the search bar into a search button, and then when they click the search button a modal pops up? something like https://tailwindcss.com/

Would this be better?

[Hanaffi]

@thecodingwizard Yeah, Thats even better. I can finish it quickly. May you assign it to me?

[thecodingwizard]

alright, it's assigned :) thanks!

[MrinallU]

@thecodingwizard I'm almost done with this but it's fine if hanaffi wants to try.

[thecodingwizard]

I don't want to overload you since you're already working on numerous other issues, so if it's alright with you I think it's best if Hanaffi takes this one

[MrinallU]

@thecodingwizard That's true the BenQ repo browsing is kinda hard so I think he can take care of the easier ui issues way faster than me.

[Hanaffi]

@thecodingwizard Can you tell me where is that home page located? Im just not very prof with React&Gatsby so I cant find it :(

[thecodingwizard]

The navigation bar code is here: https://github.com/cpinitiative/usaco-guide/blob/master/src/components/TopNavigationBar/TopNavigationBar.tsx

(Feel free to refactor, it seems quite messy oops XD)

[Hanaffi]

@thecodingwizard Wow , Aside from the issue , Can you tell me how to approach complex stuff in react? I feel so beginner looking at your codebase , LOL. I built moviesapp and to-do list :(

[MrinallU]

@Hanaffi Try not to get overwhelmed, it seems big at first, but once you really take the time to read it most of the code becomes pretty trivial.

[MrinallU]

@Hanaffi What exactly are you having trouble understanding

[Hanaffi]

@MrinallU Well, I cant actually find the code needed to be edited in that file :(

[MrinallU]

ohhh

[Hanaffi]

Oh, just found it

[MrinallU]

@Hanaffi https://github.com/cpinitiative/usaco-guide/blob/master/src/components/TopNavigationBar/TopNavigationBar.tsx

[Hanaffi]

@MrinallU I cant understand the classes names. Is that a framework or what?

[MrinallU]

ummm no

[MrinallU]

If you don't understand the basic ideas you should check the React documentation: https://reactjs.org/docs/getting-started.html

[Hanaffi]

@thecodingwizard May I use material UI?

[thecodingwizard]

err probably not; that would add a large dependency to our project + we are using tailwind css already

[Hanaffi]

@thecodingwizard Can you tell me some hint on how to implement this popup using tailwind??

[HarryWangATX]

@Hanaffi https://tailwindui.com/components/application-ui/overlays/modals tailwind ui components has some good examples of their usage.

[Hanaffi]

@HarryWangATX Thanks.

Can someone tell me how to fix this issue? I mean , the search results goes out of the modal !

[bqi343]

looks like this is done?