Enable sticky header CSS position on top navbar

[timheuer]

Prerequisites

• I have checked the Wiki and Discussions and found no answer

• I have searched other issues and found no duplicates

• I want to request a feature or enhancement and not ask a question

The problem

As I've been navigating around in the portal and scrolling I wanted the header to always be there for quick navigation. I have to scroll back up to the top to change filter views, etc. It's small but a delightful UX to have the headers stick.

Proposed solution

Enable CSS sticky positioning on the header

In https://github.com/AdguardTeam/AdGuardHome/blob/master/client/src/components/Header/Header.css#L35-L39, updating Line 35 to:

.header {
    position: sticky;
    top: 0;
    padding: 5px 0;
    z-index: 102;
}

Would result in this experience:

Screen.Recording.2024-06-17.at.3.13.28.PM.mov

Alternatives considered and additional information

No response

[andylau004]

got it!

i use this code snippet

it works

thks,

[timheuer]

I have a PR ready, but per the contribution guidelines, waiting for maintainer discussion.

[ainar-g]

I'm not really sure we'd merge it, at least right now. Even when we make popular UI changes with a lot of 👍 reactions people still come to the issue tracker to complain and ask to revert it back. With a change with unknown level of support, this is even more likely.

Then again, if there are enough positive reactions under this issue, and people really want it, we will merge it. (Please no 👍-only comments, only reactions.)

[timheuer]

Thanks for expectations @ainar-g! Should I prepare the PR or wait until y'all say you'd take it?

[ainar-g]

I feel like it's better to wait. Things can change in the meantime on the front-end side.