Could not click on form elements at the top of the page

I think better manage width property, instead of pointer-events: none

Hi sd9121, i think this issue is already assigned to you but here is a patch i worked on it this morning

Following kostyashupenko advice, i updated:

- Animating the max-width and using calc(100vw - 90px) to set the width in :not(.is-active) mode.

I'm not sure this is what you wanted.

Sorry sd9121 for misinterpreting

This is great work! Good find, and good fix. One minor change on commit. There's a variable defined for the 90px called --content-left. Interdiff attached.

Committed. Thanks everyone!

I have to re-open this task, since small fix required during yarn lint:css

$ yarn lint:css
yarn run v1.22.4
$ stylelint "css/src/**/*.css"

css/src/components/header.css
 64:7  ✖  Expected "width" to come before "box-shadow"   order/properties-order

By the way, don't pay your attention to `css/src/components/table.css` linting issues at this task

Just changed the declaration order for header.css and node-teaser.css.

Thank you @kostyashupenko for raising this up.

Another issue that I noticed is that when modifying the width, the menu text wraps, which is noticeable during the transition.

I'm attaching a movie of this, and also see the screencap below

I found another issue here, while scrolling, at one point the header navigation floats towards the left.

I am also attaching the video here.

1. Fixed the overlapping menu text wraps on transition. (#14)
2. Fixed the Header navigation floating towards the left on transition. (#15)
3. Fixed the cursor on the Site branding block when the navigation was not active. (Found it while fixing other issues)
4. After patch #5, the width of the container was growing beyond the container size on the transition, so fixed it. (On 13-inch MacBook Pro)
5. Fixed the linting issue for header.css and node-teaser.css (#10)

Please review.

Here is the video showing the cursor issue on the Site branding block when the navigation was not active. (as mentioned in point 3 of #17).

@hansa11 I tested your patch and everything looks great! Committing these changes and attached is a reroll based on the latest codebase. Thanks for contributing to this issue!

The previous patch sets visibility hidden on the header, which removes the "slide out" animation. I'm going to revert the commit and re-open this.

Attached is an updated patch that uses pointer-events to accomplish the goal (as opposed to setting width on the container).

Fix committed! Thanks everyone!