feat(sidenav): Add support for fixed sidenavs #6712

mmalerba · 2017-08-29T23:44:26Z

temporary demo: https://mmalerba-demo5.firebaseapp.com/sidenav

fixes #3031
fixes #1515
fixes #1179
fixes #998
fixes #778

jelbourn · 2017-08-31T20:15:11Z

src/lib/sidenav/drawer.ts

@@ -22,7 +22,7 @@ import {
  NgZone,
  OnDestroy,
  Inject,
-  ChangeDetectorRef,
+  ChangeDetectorRef, ContentChild, forwardRef,


jelbourn · 2017-08-31T20:16:17Z

src/lib/sidenav/drawer.ts

+})
+export class MdDrawerContent implements AfterContentInit {
+  /** Margins to be applied to the content. */
+  _margins: {left: number, right: number} = {left: 0, right: 0};


Why are these margins here? Add explanation for why this is a thing?

jelbourn · 2017-08-31T20:16:33Z

src/lib/sidenav/drawer.ts

+  }
+
+  ngAfterContentInit() {
+    this._container._contentMargins.subscribe((margins) => {


nit: don't need parents around margins

jelbourn · 2017-08-31T20:18:14Z

src/lib/sidenav/drawer.ts

@@ -155,6 +193,8 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
  /** @deprecated */
  @Output('align-changed') onAlignChanged = new EventEmitter<void>();

+  _modeChanged = new Subject();


Add comment explaining why this is a thing?

jelbourn · 2017-08-31T20:20:07Z

src/lib/sidenav/drawer.ts

+  private _updateContentMargins() {
+    let left = 0;
+    let right = 0;
+


Add comment that describes which style is applied where based on the mode + position?

jelbourn · 2017-08-31T20:24:06Z

src/lib/sidenav/sidenav.ts

-export class MdSidenav extends MdDrawer {}
+export class MdSidenav extends MdDrawer {
+  /** Whether the sidenav is fixed in the viewport. */
+  @Input() fixedInViewport = true;


Use coerceBooleanProperty

jelbourn · 2017-08-31T20:24:27Z

src/lib/sidenav/sidenav.ts

+   * The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed
+   * mode.
+   */
+  @Input() fixedTopGap = 0;


Use coerceNumberProperty

jelbourn · 2017-08-31T20:24:55Z

src/lib/sidenav/sidenav.ts

-export class MdSidenav extends MdDrawer {}
+export class MdSidenav extends MdDrawer {
+  /** Whether the sidenav is fixed in the viewport. */
+  @Input() fixedInViewport = true;


Add unit tests for these new fixed properties?

mmalerba · 2017-09-02T22:12:41Z

@jelbourn comments addressed

jelbourn

LGTM

axtho · 2017-09-27T07:07:44Z

Can we get this into the material2-builds?

kaykhan · 2017-10-05T15:52:30Z

Do you have the source code for the working version in the demo?

kenji-1996 · 2017-10-13T03:42:49Z

@KKHAN1991 I looked into the css of the working example

.footer_fixed {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 0 16px;
  flex-direction: column;
}

and then apply this to your footer item like so:

<mat-toolbar class="footer_fixed">
  <div class="container">
    <span>this is a toolbar</span>
  </div>
</mat-toolbar>

Then I just call my app-footer (i made a component for this) inside my sidebar nav and below my navbar like so;

<mat-sidenav-container fullscreen>
  <mat-sidenav mode="push" #sidenav>
    <div fxLayout="column">
      .. sidenav content ..
  </mat-sidenav>

  <mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">
    .. material toolbar content ..
  </mat-toolbar>

  ..container for inside elements
  <app-container></app-container>
  <footer>
    .. my footer element inside footer tags ..
    <app-footer></app-footer>
  </footer>

</mat-sidenav-container>

Hope this helps, ive spent the past 4 hours fixing problems and getting it working so i hope i can save someone time

axtho · 2017-10-13T05:45:41Z

@KKHAN1991 here is the demo: https://material2-dev.firebaseapp.com/sidenav, and here are the files that produce it: https://github.com/angular/material2/tree/master/src/demo-app/sidenav. It works well.

Splaktar · 2017-10-26T04:38:18Z

Is there any documentation for this feature other than just @Input() fixedInViewport boolean | Whether the sidenav is fixed in the viewport. in the API section of the sidenav docs?

mmalerba · 2017-10-27T01:58:49Z

@Splaktar soon #7775

angular-automatic-lock-bot · 2019-09-08T16:03:08Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

mmalerba added the pr: needs review label Aug 29, 2017

mmalerba assigned jelbourn Aug 29, 2017

mmalerba requested a review from jelbourn August 29, 2017 23:44

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 29, 2017

mmalerba force-pushed the snav-fixed2 branch from eaa71d6 to c575120 Compare August 30, 2017 22:12

jelbourn reviewed Aug 31, 2017

View reviewed changes

mmalerba force-pushed the snav-fixed2 branch from c575120 to d9d9395 Compare August 31, 2017 23:54

CDDelta mentioned this pull request Sep 1, 2017

(sidenav) elements with position: fixed inside md-sidenav-layout #998

Closed

mmalerba mentioned this pull request Sep 1, 2017

bug(sidenav): Scroll locking and jumpy for md-sidenav content on iOS (Safari) #5606

Closed

jelbourn approved these changes Sep 5, 2017

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Sep 5, 2017

mmalerba mentioned this pull request Sep 6, 2017

fix(drawer): Fix 'mat-drawer-opened' not properly getting added upon mode change #6771

Closed

mmalerba force-pushed the snav-fixed2 branch 3 times, most recently from 859fc7b to ff9307f Compare September 11, 2017 22:20

mmalerba added the P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful label Sep 13, 2017

mmalerba force-pushed the snav-fixed2 branch 8 times, most recently from c491cfe to bf1cc46 Compare September 20, 2017 23:05

mmalerba added 3 commits September 21, 2017 12:22

add md-drawer-content

057304f

add back margins on content

53cd1bc

stop using transform on container and content

3b53330

mmalerba added 8 commits September 21, 2017 12:22

change sidenav demo to drawer

101f5b5

create sidenav demo

40d760e

Finish up demo

2038cbd

fix tests and lint

34aaf22

address comments

4ed9137

default fixedInViewport to false

0616d1f

fix lint

133702c

don't preserve whitespace

8d77c32

mmalerba force-pushed the snav-fixed2 branch from 21dbdec to 8d77c32 Compare September 21, 2017 19:27

jelbourn merged commit 61579bc into angular:master Sep 21, 2017

josephperrott pushed a commit to josephperrott/components that referenced this pull request Sep 21, 2017

feat(sidenav): Add support for fixed sidenavs (angular#6712)

75c6204

mmalerba mentioned this pull request Sep 26, 2017

fix(drawer): drawer container not reacting to drawer removal #7060

Merged

This was referenced Sep 27, 2017

Hide browser adressbar and menu on mobile #6637

Closed

md-sidenav-container > div.mat-drawer-content unwanted margin #6958

Closed

willshowell mentioned this pull request Sep 27, 2017

[sidenav] container styles not updated after sidenav destroy or mode change #6271

Closed

kenji-1996 mentioned this pull request Oct 13, 2017

Sidenav and fixed elements #3031

Closed

mmalerba mentioned this pull request Oct 13, 2017

Sidenav - .mat-sidenav-opened is not being applied after switching mode from side to over #6062

Closed

mmalerba deleted the snav-fixed2 branch April 3, 2018 15:19

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(sidenav): Add support for fixed sidenavs #6712

feat(sidenav): Add support for fixed sidenavs #6712

mmalerba commented Aug 29, 2017 •

edited

Loading

jelbourn Aug 31, 2017

jelbourn Aug 31, 2017

jelbourn Aug 31, 2017

jelbourn Aug 31, 2017

jelbourn Aug 31, 2017

jelbourn Aug 31, 2017

jelbourn Aug 31, 2017

jelbourn Aug 31, 2017

mmalerba commented Sep 2, 2017

jelbourn left a comment

axtho commented Sep 27, 2017

kaykhan commented Oct 5, 2017

kenji-1996 commented Oct 13, 2017

axtho commented Oct 13, 2017

Splaktar commented Oct 26, 2017

mmalerba commented Oct 27, 2017

angular-automatic-lock-bot bot commented Sep 8, 2019

feat(sidenav): Add support for fixed sidenavs #6712

feat(sidenav): Add support for fixed sidenavs #6712

Conversation

mmalerba commented Aug 29, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmalerba commented Sep 2, 2017

jelbourn left a comment

Choose a reason for hiding this comment

axtho commented Sep 27, 2017

kaykhan commented Oct 5, 2017

kenji-1996 commented Oct 13, 2017

axtho commented Oct 13, 2017

Splaktar commented Oct 26, 2017

mmalerba commented Oct 27, 2017

angular-automatic-lock-bot bot commented Sep 8, 2019

mmalerba commented Aug 29, 2017 •

edited

Loading