docs(sidenav): update docs and add examples #7775

mmalerba · 2017-10-13T17:39:23Z

No description provided.

mmalerba · 2017-10-13T18:22:47Z

andrewseguin · 2017-10-24T21:53:27Z

src/lib/sidenav/sidenav.md

+
+<!-- example(sidenav-position) -->
+
+The following are examples of valid sidenav layouts:


What's the result of each valid example? Why are the invalid examples invalid?

e.g.

 <mat-sidenav-container> <mat-sidenav>Start</mat-sidenav> <mat-sidenav-content>Main</mat-sidenav-content> </mat-sidenav-container>

 <mat-sidenav-container> <mat-sidenav>Start</mat-sidenav> <mat-sidenav position="start">Start 2</mat-sidenav> </mat-sidenav-container>

andrewseguin · 2017-10-24T21:55:04Z

src/lib/sidenav/sidenav.md


 <!-- example(sidenav-overview) -->

-The sidenav and its associated content live inside of an `<mat-sidenav-container>`:
+There are also drawer components, `<mat-drawer-container>`, `<mat-drawer-content>`, and


For easy skimming - start this like the previous paragraph.

The drawer component is designed to add side content to a small section of your app.

andrewseguin · 2017-10-24T21:57:47Z

src/lib/sidenav/sidenav.md

+The side content should be wrapped in a `<mat-sidenav>` element. The `position` property can be used
+to specify which end of the main content to place the side content on. `position` can be either
+`start` or `end` which places the side content on the left or right respectively in left-to-right
+languages. If the `position` is not set, the `start` end will be assumed. A


If position is not set, its default value of start will be assumed.

andrewseguin · 2017-10-24T22:02:10Z

src/lib/sidenav/sidenav.md

+
+### Setting the sidenav's size
+
+The `<mat-sidenav>` and `<mat-drawer>` will, by default, fit the size of its content. The width can


Might need to mention that it will fit the size of its content just once - I've had issues where the sidenav fills in with items, then gets a scrollbar and the width changes but the sidenav doesn't update

amcdnl · 2017-10-25T02:28:36Z

src/lib/sidenav/sidenav.md

+<mat-sidenav-container></mat-sidenav-container>
+```
+
+And these are examples of invalid sidenav layouts:


Is there an overwhelming use of people doing this wrong that made us want to show people how NOT to do it?

They illustrate the restrictions mentioned above, but for people like me who are too lazy to read words that aren't code 😛

amcdnl · 2017-10-25T02:30:09Z

src/lib/sidenav/sidenav.md

Might be useful to show how to make this happen.

That's what the example linked at this point does

amcdnl

Big improvement overall but the lines between sidenav and drawer are a little more blurry though ( maybe its just me tho ).

mmalerba · 2017-10-27T21:30:50Z

comments addressed, PTAL

ghost · 2017-10-30T14:19:13Z

src/lib/sidenav/sidenav.md

+describes your sidenav, `role="region"` is recommended.
+
+Similarly, the `<mat-sidenav-contnet>` should be given a role based on what it contains. If it


There is a typo in<mat-sidenav-contnet> with regards to 'contnet'.

jelbourn · 2017-10-30T18:29:14Z

@amcdnl @andrewseguin any further comments?

mmalerba · 2017-11-14T16:26:24Z

rebased, @andrewseguin PTAL

andrewseguin · 2017-11-17T19:05:27Z

LGTM

angular-automatic-lock-bot · 2019-09-09T08:03:13Z

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 Oct 13, 2017

mmalerba assigned jelbourn and andrewseguin Oct 13, 2017

mmalerba requested review from jelbourn and andrewseguin October 13, 2017 17:39

mmalerba requested a review from amcdnl as a code owner October 13, 2017 17:39

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

mmalerba added the pr: merge safe label Oct 13, 2017

mmalerba force-pushed the snav-docs branch from dd473f5 to 0aa1b19 Compare October 13, 2017 18:20

This was referenced Oct 13, 2017

Toolbar and Sidenav fixed in sidenav-layout #2033

Closed

Scroll events not getting fired when content inside md-content is scrolled #802

Closed

andrewseguin reviewed Oct 24, 2017

View reviewed changes

amcdnl reviewed Oct 25, 2017

View reviewed changes

mmalerba mentioned this pull request Oct 27, 2017

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

Merged

mmalerba force-pushed the snav-docs branch from 0aa1b19 to 8fad8c2 Compare October 27, 2017 21:30

ghost reviewed Oct 30, 2017

View reviewed changes

mmalerba force-pushed the snav-docs branch from 8fad8c2 to f7f97a4 Compare October 30, 2017 17:20

mmalerba mentioned this pull request Oct 31, 2017

mat-sidenav-container - hide address bar on mobile devices #7818

Closed

mmalerba added the P2 The issue is important to a large percentage of users, with a workaround label Nov 8, 2017

mmalerba force-pushed the snav-docs branch from f7f97a4 to 6bebb08 Compare November 14, 2017 16:25

mmalerba mentioned this pull request Nov 16, 2017

fix(drawer): allow for drawer container to auto-resize while open #8488

Merged

andrewseguin added action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Nov 17, 2017

mmalerba added 5 commits November 17, 2017 16:29

rewrite sidenav docs

a45b275

add examples

4b5dcff

fix lint

6294e07

address comments

851c4f9

fix typo

46325d0

mmalerba force-pushed the snav-docs branch from 6bebb08 to 46325d0 Compare November 18, 2017 00:32

mmalerba added this to the 5.0 milestone Nov 20, 2017

mmalerba added the pr: lgtm label Nov 20, 2017

jelbourn merged commit bd26e2a into angular:master Nov 21, 2017

This was referenced Nov 21, 2017

md-sidenav content is not accessible when browser's size is reduced #7655

Closed

[IE11] Extra scrollbar on component content angular/material.angular.io#251

Closed

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

Closed

mmalerba mentioned this pull request Nov 29, 2017

main content scrolling should be independent of sidenav's scrolling/position #698

Closed

mmalerba deleted the snav-docs branch July 31, 2018 21:56

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(sidenav): update docs and add examples #7775

docs(sidenav): update docs and add examples #7775

mmalerba commented Oct 13, 2017

mmalerba commented Oct 13, 2017

andrewseguin Oct 24, 2017

andrewseguin Oct 24, 2017

andrewseguin Oct 24, 2017

andrewseguin Oct 24, 2017

amcdnl Oct 25, 2017

mmalerba Oct 27, 2017

amcdnl Oct 25, 2017

mmalerba Oct 27, 2017

amcdnl left a comment

mmalerba commented Oct 27, 2017

ghost Oct 30, 2017

mmalerba Oct 30, 2017

jelbourn commented Oct 30, 2017

mmalerba commented Nov 14, 2017

andrewseguin commented Nov 17, 2017

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


		<!-- example(sidenav-position) -->

		The following are examples of valid sidenav layouts:


		### Setting the sidenav's size

		The `<mat-sidenav>` and `<mat-drawer>` will, by default, fit the size of its content. The width can

		describes your sidenav, `role="region"` is recommended.

		Similarly, the `<mat-sidenav-contnet>` should be given a role based on what it contains. If it

docs(sidenav): update docs and add examples #7775

docs(sidenav): update docs and add examples #7775

Conversation

mmalerba commented Oct 13, 2017

mmalerba commented Oct 13, 2017

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

amcdnl left a comment

Choose a reason for hiding this comment

mmalerba commented Oct 27, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jelbourn commented Oct 30, 2017

mmalerba commented Nov 14, 2017

andrewseguin commented Nov 17, 2017

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