Sticky header hide and show on scroll and visible login access

[ElviaBth]

🎩 What? Why?

Sticky header hide and show on scroll and visible login access

📌 Related Issues

• Related to Remove fixed button bar in PWA for enhanced usability decidim/decidim#12868, Sticky header hide and show on scroll and visible login access decidim/decidim#12871
• Fixes #?

Testing

You can visit with a mobile browser.

• The sticky header hides and displays if the user scrolls down and then scrolls up.
• See the header, which has visible login access.
• Click the menu.
• The menu has a search and a language chooser.

📷 Screenshots

header default

header login photo

add search added to the menu and language chooser to dropdown menu

♥️ Thank you!

[github-actions]

This pull request does not contain a valid label. Please add one of the following labels: ['type: feature', 'type: change', 'type: fix', 'type: removal', 'target: developer-experience', 'type: internal']

[microstudi]

Hi @ElviaBth I've left you some comment to solve the duplicated IDs

[carolromero]

Hi @ElviaBth! I found I couple of things missing when reviewing this:

• On mobile I don't see the switch of the logo to the favicon
• When I log in as admin, I don't see the avatar and the access to the user menu
• When I log in as a participant with no avatar associated, I don't see the avatar by default and the access to the user menu
• When I log in as a participant, I do see the avatar and the user menu, but I miss the indicator of pending notifications/conversations, this one 👇
  

The language selector and the search inside the hamburger menu work perfect!

[carolromero]

Hi! We've checked again and we are almost there! A couple of last adjustments:

• The margin between menu and avatar gets misaligned if the avatar has no image. I'm attaching screenshots for comparison (the correct margin is like the one with image):
  
  

• On the other hand, the notification indicator should be displayed as in the avatar example without image, otherwise it is too far apart.

• As we are using the initial when the avatar has no image, we should apply it here as well.