Navbar component

[sandrely2611-zz]

Description

Based on the Ctrl project needs, we detect some inconsistencies in the Navbar component.
Our goal with this ticket is to fix how this component looks, remove the unnecessary code from Ctrl.
And be able to consume the component from the DS without adding extra css or js to make it work in Ctrl.

Narrative

Design System: https://www.figma.com/file/c1SBfQGUU3twlW3YjeL8Sx/michelada_DS?node-id=0%3A1
Control project: https://www.figma.com/file/TmTjBO1Ua93cm6B978ErDw/ControlMocks_21-0ct-2020?node-id=3456%3A0

Definition of done

1. Code review approved
2. Remove CSS/JS/HTML code related to the component from Ctrl
3. Deployed to production
4. Deployed to NPM library

Acceptance criteria

1. Correct style issues (review comments section)
2. Support mobile, tablet and desktop resolutions.

[sandrely2611-zz]

Issue #1

In mobile, when I open the dropdown menu, and want to click in the "My profile", "Admin" and "Sign Out" I have to click directly in the links to go to "My profile", "Admin" and "Sign Out", but if I clicked in other part of the div don't redirect me to the place "My profile", "Admin" and "Sign Out", the behavior expected is that I should be clicked in the entire div, and not only in the link, in order to redirect me to the place.

Current result:

If I clicked out of the link but in the same row or div, don't redirect me to the place that I selected.

Expected result:

I should be clicked in the entire div, and not only in the link, in order to redirect me to the place selected.

[sandrely2611-zz]

Issue #2 en Control

The profile picture in the navbar appears distorted (blurry, squished or stretched) and in some cases, the left and right sides of the photo get cropped making it look like an oval shape instead of a round shape (for images significantly
longer than they are wide)

Current result:

The profile picture in the navbar is displayed distorted and in some cases it has an oval shape instead of a round shape.

Expected result:

The profile picture in the navbar is displayed clearly and it always has a round shape (it should look like a miniature version of the profile picture in the personal profile)

[sandrely2611-zz]

Issues #3 en Control

Navigation bar - font color on navigation links doesn't match the design - desktop

This ticket covers the improvement of the navigation bar component in the design system project. Some colors are showing different than the main color palette.

Summary

The font color on the links for La Barra, Team directory, PTOs, My Profile and Sign out doesn't match with the one in the Mockups

Description

• The links in ctrl for La barra, Team directory and PTOs have the font color: #828F96 and in the Mockups the color is: #A5B1B8
• The links in ctrl for My Profile and Sign Out on the dropdown menu have the font color: #575F65 and in the Mockups the color is: #808C93

Steps to reproduce

1. Go to the url https://ctrl-staging.herokuapp.com/
2. Login in CTRL as a collaborator
3. Inspect the page to open dev tools
4. Inspect any of the navigation links or the dropdown menu
5. Check the font color
6. The font colors for the links and the mockups don't match

Evidence

Expected behaviour: Mockup navbar fonts (Desktop large)

Actual behaviour: Navbar fonts on staging (Desktop large)

[sandrely2611-zz]

Issues #4

Summary
The dropdown menu on the profile picture flashes when navigating to other sections under certain conditions

Description

The dropdown menu that appears when clicking the profile picture should only appear when the user clicks on the profile picture, but it has an unexpected behaviour:

When the user opens the dropdown menu and selects an option (excluding Sign out) and then clicks on the ctrl logo or the navigation links (usually in La Barra), the dropdown menu flashes for a quick second.

Steps to reproduce

Go to the url https://ctrl-staging.herokuapp.com/[](https:/michelada/design_system/issues/70#expected-behaviour)[](https:/michelada/design_system/issues/70#actual-behaviour)[](https:/michelada/design_system/issues/70#environment)[](https:/michelada/design_system/issues/70#evidence)

Login in CTRL as a collaborator
Click on the profile picture to open the dropdown menu

For mobile:
4.1 Select an option from the dropdown menu (La Barra, Team directory, PTOs, My Profile or the X)
4.2 Click on ctrl logo

For tablet and desktop:
4.1 Select an option from the dropdown menu (My Profile or the X)
4.2 Click on ctrl logo and the navigation links (La Barra, Team directory, PTOs)

The dropdown menu flashes on some views (usually in La Barra)

Expected behaviour
The dropdown menu only appears when the user clicks on the profile picture.

Actual behaviour
The dropdown menu appears when the user clicks on the profile picture but it also flashes when some views are loading under certain conditions on all resolutions.

Environment
Staging

Evidence

bug_menu_flash_desk.mov

bug_menu_mobile.mp4

bug_menu_mobile.mp4