Review local nav - Githubissues

inesdgomes commented 3 months ago

Three issues in the local nav:

It seems the link to the main ILO website (the link that shows next to the language dropdown) does not show on the mobile designs.
We need designs for more breakpoints. As it can be seen on storybook, the layout seems to break on small widths. See screenshot below.
Perhaps we should clarify what we mean by 'Local nav', review perhaps the way we call it and document on Figma how it should be used. The local nav is meant to be used on ILO sub-sites, i.e. ILO websites that are not part of the main ILO corporate website. This is often the case for ILO databases, special campaigns/projects, etc.

beatrizmartinmartins commented 3 months ago

Hey @inesdgomes All the bullet points are done:

Included the "Go to main ILO website" on Mobile
Included Tablet breakpoints (See here)
So the thing with the Local Nav is that on Design we have it differently. It's not the same component nor developed the same.

inesdgomes commented 3 months ago

Hi @beatrizmartinmartins I think there's some confusion on this. We actually need two separate components on Figma, like we have on Storybook.

One is the global navigation menu, which is only used in the main ILO website (the link 'Go to main ILO website' link should not show here)
The other one is the local nav (we probably need a better name), which is only to be used on ILO sub-sites (the link 'Go to main ILO website' should be here). We don't currently have templates using this component, but we'll need to create one soon.

beatrizmartinmartins commented 2 months ago

Done @inesdgomes Made all the changes we talked about during our meeting and now we only have Main ILO and Subsite Nav https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=6197-11062&t=QMNBGxgLNZZwntIx-1

inesdgomes commented 2 months ago

Thanks @beatrizmartinmartins I still find this very confusing for someone without any background context. Can't we completely separate 'Main ILO website' nav and the 'ILO subsite nav'? A few other issues:

The order in which components are presented is not intuitive: why do we show sub-nav before main nav?
Do we really need the navigation strips to be separate components?
The mobile sub-nav shows the link to the main ILO site. This should only show in the mobile sub-nav for subsites, which should also include the space for the sub-brand logo.

beatrizmartinmartins commented 2 months ago

Hey @inesdgomes I just separate them into two different components:

Main Navigation Header
Subsite Navigation Header

Also removed the strips components, it didn't had any sense to have it there, and also fixed the sub-nav for subsites and main. Does it work now? Does it make sense?

inesdgomes commented 1 month ago

Hi @beatrizmartinmartins Yes, great to have the headers as separate components. I left more comments in the file. Could you please address those before we complete this task? Thanks

beatrizmartinmartins commented 1 month ago

@inesdgomes done

inesdgomes commented 1 month ago

@beatrizmartinmartins Sorry, just one comment left to address on how the elements are organized and presented: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf?node-id=1433-3563#924857558

beatrizmartinmartins commented 1 month ago

@inesdgomes moving this to in review after finalizing the comment

justintemps commented 1 month ago

@GGKapanadze to review

inesdgomes commented 1 month ago

Sorry @GGKapanadze Ignore this one for now, I see there's still something we need to resolve in the design. @beatrizmartinmartins could you take a look at this comment: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf?node-id=3979-7043#926612144

beatrizmartinmartins commented 3 weeks ago

@inesdgomes I made a test here Let's review it tomorrow

beatrizmartinmartins commented 2 weeks ago

@inesdgomes Added what we talked about for the tablet version:

if we have 3 or less Menu items, we show them.
If we have more than 3 Menu Items, we hide them under the hamburger menu.

Check them here

inesdgomes commented 1 week ago

@beatrizmartinmartins This works! Just one comment to resolve here: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf?node-id=3979-7043#958928737

beatrizmartinmartins commented 1 week ago

Comment solved @inesdgomes

inesdgomes commented 1 week ago

Hi @beatrizmartinmartins Thanks, this works. In the meantime, there's an issue we'd need to solve related to this: https://www.figma.com/design/ulu2zb7ZOuT4VXu4M7Yp98?node-id=149-6177#961184293

I think showing the sub-site name under the logo on tablet and mobile doesn't really work, especially when the sub-site name is very short, such as ILO Live. Would it be possible to keep showing the sub-site name to the right of the logo on mobile? Will that limit us somehow?

international-labour-organization / designsystem

Review local nav #1047