Improve the navigation bar UI

[nya-elimu]

When there is more content in the navigation bar, the content sometimes overflows. Improve the UX/UI so that the navigation and its content works with a variety of text lengths and screen sizes.

For an example see #1362 (comment), reported by @cravend.

[nya-elimu]

See @Shubham-Vishwakarma's UI suggestion at #1362 (comment)

[alexander-kuruvilla]

@nya-elimu can I work on this?
From the current Ui I can seen that the "connect wallet" overflows and jumps out in smaller screens and the contributer name /email also jumps out.

[nya-elimu]

@alexander-kuruvilla Yes, please 👍🏽

[alexander-kuruvilla]

@nya-elimu thanks. As this is a design change I need your input on a few things,

1. Should I change the the profile to display just the first name of the contributor as per Shubham's suggestion?

2. Should the connect account be removed or moved inside the side panel for smaller screens? Or another solution is to ditch the text in smaller screens like shown below:
   

3. The side panel menu toggle seems to appear in smaller screens, but in the /webapp page clicking on it just dims the page and doesnt seems to bring up a menu. What is your suggestion on that?:
   

[nya-elimu]

1. Should I change the the profile to display just the first name of the contributor as per Shubham's suggestion?

@alexander-kuruvilla Yes, or consider using the text-overflow property in CSS.

[nya-elimu]

2. Should the connect account be removed or moved inside the side panel for smaller screens? Or another solution is to ditch the text in smaller screens like shown below:

@alexander-kuruvilla I think we can move it to the side panel for smaller screens 👍🏽

[nya-elimu]

3. The side panel menu toggle seems to appear in smaller screens, but in the /webapp page clicking on it just dims the page and doesnt seems to bring up a menu. What is your suggestion on that?:

@alexander-kuruvilla I see what you mean.

The seems to happen when the "Sign on" link disappears. So as a solution, I suggest moving the "Connect Wallet" button into the sidebar for smaller screens. Because then there will always be content in the sidebar.

[alexander-kuruvilla]

@nya-elimu I have done the aforementioned changes. Additionally I noticed that the breadcrumb overflows out into the content in smaller screens, when the breadcrumb has a lot of elements in it.

[jo-elimu]

@alexander-kuruvilla Thank you for implementing this improvement 🙂

I did a quick test at http://hin.elimu.ai, and it looks like there is one final adjustment that needs to be made for the scenario where a content creator is signed in, and on a small screen, and already connected to a Web3 wallet:

In the case where a content creator has already connected a Web3 wallet, the button should change from "Connect Wallet" to showing the same information as in the wide screen example above.

[alexander-kuruvilla]

@jo-elimu Thanks for pointing that out I'll make the changes as soon as I can.

I would also like to know your opinion on the breadcrumbs on smaller screens. When in inner pages the breadcrumbs seem to overflow into the content div

[jo-elimu]

@alexander-kuruvilla Thanks for fixing the button in the side drawer.

One final detail: When connected loading the token balance, it works in a small screen, but not on a wide screen:

Small Screen

Wide Screen

My guess would be that this is happening because both buttons have the same #tokenBalance ID, which should be unique per HTML element.

[alexander-kuruvilla]

@alexander-kuruvilla Thanks for fixing the button in the side drawer.

One final detail: When connected loading the token balance, it works in a small screen, but not on a wide screen:

Small Screen

Wide Screen

My guess would be that this is happening because both buttons have the same #tokenBalance ID, which should be unique per HTML element.

Yes I think you are right. I'll take a look at how that can be resolved.

[jo-elimu]

@alexander-kuruvilla It works now, thank you 🙂

[alexander-kuruvilla]

@jo-elimu nice! Thanks!