Fix overlapping of profile icon and hamburger icon in mobile view

[constantinazouni]

Closes #5985

Technical

We added come CSS.

Screenshot

Stakeholders

@cdrini

[cdrini]

Thanks @constantinazouni ! I've placed this on testing.openlibrary.org to try it out 👍 Noticing the behaviour looks a little off when the button is clicked:

We'll want to make this css .header-bar .hamburger-component details[open] .hamburger__icon apply to the summary element instead of just the icon.

And we can probably also delete some of the old css around position: absolute on the .account__icon.

Otherwise it's working well!

[constantinazouni]

I improved the behavior of the button when it is clicked. I couldn't really remove the position: absolute because it affected the position of the account icon. Let me know if you want further changes.

[cdrini]

Works like a charm! Thanks, @constantinazouni !

IIRC the position: absolute was added to make the icon overlap the hamburger icon; we can probably remove it and make it behave more like a "normal" element, maybe a display: flex with some padding between them, as opposed to having the padding of the hamburger icon "consume" the other icon. Not a blocker though, just always nice to delete code :)