fix(navBar): update inkbar on screen resize

[Splaktar]

PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added or this is not a bug fix / enhancement
• Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

The ink bar below the tab buttons does not update it's position if an item with flex exists besides md-nav-items.

Issue Number:
Fixes #10121
Closes #11042

What is the new behavior?

• update inkbar on screen resize
• changed how inkbar is moved
• use transform to scale and translate the inkbar
• also add debounced update to window resize

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

This PR takes over PR #11042 to resolve issues introduced via rebase.

Caretaker note

The CLA was signed in the previous PR.

[googlebot]

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

[Splaktar]

@chmelevskij can you please consent to your changes being used here (I just fixed issues from the rebase)? Please add a comment with @googlebot I consent.

[chmelevskij]

@googlebot I consent

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[mmalerba]

LGTM

[landgenoot]

This PR breaks the position of the inkbar if there is a margin set on the md-nav-bar

Example with margin-left: 60px on .md-nav-bar

[Splaktar]

@landgenoot can you please open a new issue with a CodePen/StackBlitz reproduction?

It sounds similar to #11036, but affects md-nav-bar instead.

[vbraun]

The event subscription

angular.element($window).on('resize', $mdUtil.debounce(onResize, 300));

is not for onResize, but for the debounced onResize (which is a different function than onResize). Hence the unsubscription

angular.element($window).off('resize', onResize);

does nothing, leaking a resize event handler whenever md-nav-bar is shown on a page.