this is a pretty cool website feature: a switch to move the toolbar icons from left to right – to make it easier to use your preferred thumb when browsing on large screened mobile devices.
storing alignment preference in local storage, neat. involves a promise tho.
the actual left-right bit is using js to toggle between justify-content: flex-end and flex-start, assuming your navbar is a flexbox. idk what mine is. idk what a flexbox is…
we’d also like the button to change the allignment to always be on the outside of the list, so that it stays consistent between settings. do this with javascript prepend() and append(). your navbar is a stack!
once you pop/push it, it loses keyboard focus so you better use .focus() to give it back. but we don’t want that if we click/tap on it. for keyboard only we can check the details attribute of the click event which is 0 for keyboard ‘clicks’, or 1 or 2 for conventional single or double clicks, respectively.
neat!