issues with library top-nav

[indirectlylit]

Observed behavior

The top-nav of the library is not styled consistently with existing analogous navigation in Coach. In particular:

• purple bottom-bar styling has rounded radius
• 'UPPER CASE' vs 'Sentence case'
• non-enabled text color
• hover states
• spacing

coach	learn

A few more observed issues:

issue	screenshot
nav overlapping with other content
shifting hover state
missing header and description on smaller screens
icon can overlap tabs (note: in some languages text could be much longer)

Expected behavior

• consistent styling with coach tabs
• grid-based layout to prevent broken layouts
• responsively handle both small window sizes and long label text lengths
• Important information such as the main header and description should not completely disappear because window got smaller

User-facing consequences

• Users may struggle to navigate properly on small windows
• Inconsistent styling with other parts of app
• Users of smaller screens lack critical information

Steps to reproduce

• Compare to Coach
• Try with longer label text
• Try with smaller window sizes

Context

0.15.0-beta1

[marcellamaki]

@jtamiace -- I will likely start working on this tomorrow, but just want to get a 👍 / 👎 on the items that Devon notes so I know which feedback I should move forward with. If you have a chance today to leave some comments, that would be really helpful! Thanks!

[indirectlylit]

let me know if you'd like me to break any items out into independent issues so they can be deprioritized

[jtamiace]

Everything is a 👍🏼 except

missing header and description on smaller screens

This was intentional. I was hoping that the breadcrumb + thumb would be enough to avoid duplicating the current folder title and take up a lot of screen space with a large header.

[indirectlylit]

if the breadcrumb alignment issue turns out to be KDS-specific, recommend opening a separate issue there

[marcellamaki]

KDS issue for breadcrumb alignment here: learningequality/kolibri-design-system#284

[indirectlylit]

KDS issue for breadcrumb alignment here: learningequality/kolibri-design-system#284

removed from issue description