There are a frew things that needs to be fixed:

1. The NavBar and the DropdownMenu has their own button
2. The onhover thing on nav bar is blocking the DropDownMenuItems => solved by changing z-10 to z-20 in DropDownMenuItems
3. Once clicked the Account NavBar / DropdownMenu => screen will go to unknown page? => solved by onClick={() => {}}
   Any ideas how to fix this 1?

There are a frew things that needs to be fixed:

1. The NavBar and the DropdownMenu has their own button
2. The onhover thing on nav bar is blocking the DropDownMenuItems => solved by changing z-10 to z-20 in DropDownMenuItems
3. Once clicked the Account NavBar / DropdownMenu => screen will go to unknown page? => solved by onClick={() => {}}
   Any ideas how to fix this 1?

I haven't looked in any detail, but I'd guess you're going to have to make the NavItem natively support dropdown/selection instead of putting a dropdown inside of it. That would solve 1 & 3 (nav item wouldn't trigger a url in this case, it would trigger the drop down).

For 2, changing the z order isn't enough/not the right fix because you'd have a tooltip partially hidden under a menu. But again, the same solution above would fix this too.

There are issues that prevents to use DropDownMenu component for the Buddy NavItem. I Would suggest to fix them with different PRs to make it easier to review.

This pr should be straight forward:

• expose 'getAccountsMenuInfo'
• in AuthActions iterate over array of menuInfo items to build DropDownMenu

There should be the issues opened for DropDownMenu:

1. It should let to attach DropDownMenu to existing element so there would be no second button
2. The placement of DropDownMenu should be fixed, right now it is always shown on the left of element it attached to.
3. (optional) Extreme use cases, like what if there are so many items the DropDownMenu does not fit into the window.

This pr should be straight forward:
expose 'getAccountsMenuInfo'

There is no need to expose the getAccountsMenuInfo since there is already a variable containing the array of providers (the same thing is done somewhere else in the code)

in AuthActions iterate over array of menuInfo items to build DropDownMenu

This is fixed in current commit

There should be the issues opened for DropDownMenu:

1. It should let to attach DropDownMenu to existing element so there would be no second button
2. The placement of DropDownMenu should be fixed, right now it is always shown on the left of element it attached to.
3. (optional) Extreme use cases, like what if there are so many items the DropDownMenu does not fit into the window.

1. I've removed the DropdownMenu element (but left the DropDownMenuItems) which removed the redundant button
2. So create a new issue/PR for changes in DropDownMenuItems.svelte (left/right alignment)
3. For this would be required to change some top/bottom paddings in DropDownMenuItems.svelte

cc @benoitf you are assign to #7758, is there a risk of conflict/overlap here?

From #7758
Users should be able to right-click on the navigation bar to see a list of all navigation items in a checkbox list, and easily add or remove the visible items.

This may have some similarity with this PR goals, at least for the changes in the NavItem

@axel7083 I see no overlap as right click is/will not be handled by the svelte dropdown menu (it's based on electron right clicks menu)

only left click should/are using svelte components.

Sign in request is now show as

but should be

I've forgot to add it also to sign-in :D

I have discussed this with @axel7083 and we have come to a point where we need to decide which options would be best, either this ^^ or this one which uses the DropdownMenu and is neater, but have a few drawbacks:

1. The Account NavItem is slightly taller than it should be
2. The DropDownMenuItems will be only opened when is clicked on the AccountImage

What do you think? More complex (This PR ^^) or more neater solution (this one) Thanks 🙏 @benoitf @deboer-tim @jeffmaury

I have discussed this with @axel7083 and we have come to a point where we need to decide which options would be best, either this ^^ or this one which uses the DropdownMenu and is neater, but have a few drawbacks:

1. The `Account NavItem` is slightly taller than it should be

2. The `DropDownMenuItems` will be only opened when is clicked on the `AccountImage`

What do you think? More complex (This PR ^^) or more neater solution (this one) Thanks 🙏

Buddy icon spacing is the same in both branches. It is slightly bigger because of two 'Tooltip' component nested one in another. One comes from NavItem another one wrapping AuthActions. The second PR has different behavior on DropdownMenu cancellation using keybord. That is the only difference I see.

On the other hand it seems that Dropdown Menu on buddy icon just duplicates Authentication settings page features in a form of dropdown menu. We might consider just move Authentication out of preferences and show it when user clicks on buddy icon.