{"action":"created","comment":{"url":"https://api.github.com/repos/angular/material.angular.io/pulls/comments/146089853","pull_request_review_id":70991411,"id":146089853,"diff_hunk":"@@ -1,88 +1,133 @@\n-$sidenav-spacing-unit: 8px;\n-$sidenav-width: 240px;\n+@import '../../../styles/constants';\n \n-app-component-sidenav {\n-  display: flex;\n-}\n+$sidenav-width: 240px;\n \n .docs-component-viewer-sidenav-container {\n-  width: 100%;\n-\n-  .mat-drawer-content {\n-    position: absolute;\n-    right: 0;\n-    left: 0;\n-  }\n+  box-sizing: border-box;\n }\n \n .docs-component-viewer-sidenav {\n-  box-shadow: 3px 0 6px rgba(0, 0, 0, .24);\n-  padding-bottom: 72px;\n-  width: $sidenav-width;\n-  bottom: 0;\n   overflow: auto;\n-  height: 100%;\n+}\n \n-  &.mat-sidenav-opened {\n-    box-shadow: 3px 0 6px rgba(0, 0, 0, .24);\n-  }\n+.docs-component-sidenav-inner-content {\n+  display: flex;\n+  flex-direction: row;\n \n-  // Section divider\n-  h3 {\n-    border: none;\n-    font-size: 10px;\n-    letter-spacing: 1px;\n-    line-height: $sidenav-spacing-unit * 3;\n-    text-transform: uppercase;\n-    font-weight: 400;\n-    margin: 0;\n-    padding: 0 ($sidenav-spacing-unit * 2);\n+  // The rule will match the element following the router-outlet which will be the routed component.\n+  router-outlet + * {\n+    flex-grow: 1;\n   }\n+}\n \n-  ul {\n-    list-style-type: none;\n-    margin: 0;\n-    padding: 0;\n+.mat-drawer {\n+  &::-webkit-scrollbar {\n+    height: 4px;\n+    width: 4px;\n   }\n+}\n \n-  // Sidenav navigation item\n-  li {\n-    border-bottom-width: 1px;\n-    border-bottom-style: solid;\n-    margin: 0;\n-    padding: 0;\n+.docs-component-viewer-nav {\n+  position: sticky;\n+  top: 25px;\n \n+  .docs-component-viewer-nav-inner {\n+    margin: 25px;\n+    width: $sidenav-width;\n+    max-height: 75vh;\n+    overflow: auto;\n \n-    // Hide the border on the last item\n-    &:last-child {\n-      border-color: transparent;\n+    &::-webkit-scrollbar {\n+      height: 4px;\n+      width: 4px;\n     }\n \n-    > a {\n-      box-sizing: border-box;\n-      display: block;\n-      font-size: 14px;\n-      font-weight: 400;\n-      line-height: ($sidenav-spacing-unit * 6) - 1;\n-      text-decoration: none;\n-      transition: all .3s;\n-      padding: 0 ($sidenav-spacing-unit * 2);\n+    h3 {\n+      padding: 10px 15px;\n+      font-weight: 700;\n+      line-height: 16px;\n+      margin: 0;\n+      font-size: 13px;\n+      cursor: pointer;\n       position: relative;\n \n-      &.docs-component-viewer-sidenav-item-selected {\n-        font-weight: 600;\n+      .mat-icon {\n+        position: absolute;\n+        right: 5px;\n+        font-size: 18px;\n       }\n     }\n+\n+    hr {\n+      padding: 0;\n+      margin: 0;\n+    }\n+\n+    ul {\n+      list-style-type: none;\n+      margin: -5px 0 5px 0;\n+      padding: 0;\n+      overflow: hidden;\n+    }\n+\n+    li {\n+      font-size: 13px;\n+      line-height: 16px;\n+      margin: 0;\n+      padding: 5px 15px 5px 20px;\n+    }\n+\n+    a {\n+      text-decoration: none;\n+    }\n   }\n }\n \n .docs-component-sidenav-content {\n-  min-height: 100%;\n   display: flex;\n   flex-direction: column;\n+}\n \n-  // The rule will match the element following the router-outlet which will be the routed component.\n-  router-outlet + * {\n-    flex-grow: 1;\n+// Add specific rule to prevent default rule conflict\n+.docs-component-viewer-sidenav-container.mat-drawer-container{\n+  display: block;\n+  overflow: hidden;\n+  position: absolute;\n+  top: 50px;\n+  bottom: 0;\n+  left: 0;\n+  right: 0;\n+}\n+\n+.docs-component-sidenav-inner-content {\n+  display: flex; \n+  flex-direction: column;\n+}\n+\n+.docs-component-sidenav-body-content {\n+  display: flex;\n+  min-height: calc(100vh - 264px);\n+}\n+\n+@media (max-width: $small-breakpoint-width) {\n+  // Add specific rule to prevent default rule conflict\n+  .docs-component-viewer-sidenav-container .docs-component-viewer-sidenav {\n+    top: 42px;","path":"src/app/pages/component-sidenav/component-sidenav.scss","position":173,"original_position":173,"commit_id":"add0fd39e1bce958f11a151dd00dd9bd16c9c48f","original_commit_id":"add0fd39e1bce958f11a151dd00dd9bd16c9c48f","user":{"login":"jelbourn","id":838736,"avatar_url":"https://avatars3.githubusercontent.com/u/838736?v=4","gravatar_id":"","url":"https://api.github.com/users/jelbourn","html_url":"https://github.com/jelbourn","followers_url":"https://api.github.com/users/jelbourn/followers","following_url":"https://api.github.com/users/jelbourn/following{/other_user}","gists_url":"https://api.github.com/users/jelbourn/gists{/gist_id}","starred_url":"https://api.github.com/users/jelbourn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jelbourn/subscriptions","organizations_url":"https://api.github.com/users/jelbourn/orgs","repos_url":"https://api.github.com/users/jelbourn/repos","events_url":"https://api.github.com/users/jelbourn/events{/privacy}","received_events_url":"https://api.github.com/users/jelbourn/received_events","type":"User","site_admin":false},"body":"Comment for `42px`?","created_at":"2017-10-21T00:20:52Z","updated_at":"2017-10-21T00:24:59Z","html_url":"https://github.com/angular/material.angular.io/pull/300#discussion_r146089853","pull_request_url":"https://api.github.com/repos/angular/material.angular.io/pulls/300","author_association":"MEMBER","_links":{"self":{"href":"https://api.github.com/repos/angular/material.angular.io/pulls/comments/146089853"},"html":{"href":"https://github.com/angular/material.angular.io/pull/300#discussion_r146089853"},"pull_request":{"href":"https://api.github.com/repos/angular/material.angular.io/pulls/300"}}},"pull_request":{"url":"https://api.github.com/repos/angular/material.angular.io/pulls/300","id":147583752,"html_url":"https://github.com/angular/material.angular.io/pull/300","diff_url":"https://github.com/angular/material.angular.io/pull/300.diff","patch_url":"https://github.com/angular/material.angular.io/pull/300.patch","issue_url":"https://api.github.com/repos/angular/material.angular.io/issues/300","number":300,"state":"open","locked":false,"title":"feat(nav): new sidenav","user":{"login":"amcdnl","id":227909,"avatar_url":"https://avatars3.githubusercontent.com/u/227909?v=4","gravatar_id":"","url":"https://api.github.com/users/amcdnl","html_url":"https://github.com/amcdnl","followers_url":"https://api.github.com/users/amcdnl/followers","following_url":"https://api.github.com/users/amcdnl/following{/other_user}","gists_url":"https://api.github.com/users/amcdnl/gists{/gist_id}","starred_url":"https://api.github.com/users/amcdnl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amcdnl/subscriptions","organizations_url":"https://api.github.com/users/amcdnl/orgs","repos_url":"https://api.github.com/users/amcdnl/repos","events_url":"https://api.github.com/users/amcdnl/events{/privacy}","received_events_url":"https://api.github.com/users/amcdnl/received_events","type":"User","site_admin":false},"body":"Implements new sidenav.\r\n\r\n![img](https://content.screencast.com/users/amcdaniel22/folders/Snagit/media/d989df88-4422-4ace-95a1-edfe32adb47e/2017-10-19_09-44-05.png)\r\n\r\n![img](https://content.screencast.com/users/amcdaniel22/folders/Snagit/media/ebbd94e2-37c4-4b74-b0bc-57440ffb8559/2017-10-19_09-43-49.png)\r\n\r\n![img](https://content.screencast.com/users/amcdaniel22/folders/Snagit/media/e6d5f427-7ea5-4d9f-ba62-949e600465af/2017-10-19_09-44-54.png)","created_at":"2017-10-19T15:09:01Z","updated_at":"2017-10-21T00:24:59Z","closed_at":null,"merged_at":null,"merge_commit_sha":"c582064d54ba7c502f753f0a3cab3c86a6dbb792","assignee":{"login":"amcdnl","id":227909,"avatar_url":"https://avatars3.githubusercontent.com/u/227909?v=4","gravatar_id":"","url":"https://api.github.com/users/amcdnl","html_url":"https://github.com/amcdnl","followers_url":"https://api.github.com/users/amcdnl/followers","following_url":"https://api.github.com/users/amcdnl/following{/other_user}","gists_url":"https://api.github.com/users/amcdnl/gists{/gist_id}","starred_url":"https://api.github.com/users/amcdnl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amcdnl/subscriptions","organizations_url":"https://api.github.com/users/amcdnl/orgs","repos_url":"https://api.github.com/users/amcdnl/repos","events_url":"https://api.github.com/users/amcdnl/events{/privacy}","received_events_url":"https://api.github.com/users/amcdnl/received_events","type":"User","site_admin":false},"assignees":[{"login":"amcdnl","id":227909,"avatar_url":"https://avatars3.githubusercontent.com/u/227909?v=4","gravatar_id":"","url":"https://api.github.com/users/amcdnl","html_url":"https://github.com/amcdnl","followers_url":"https://api.github.com/users/amcdnl/followers","following_url":"https://api.github.com/users/amcdnl/following{/other_user}","gists_url":"https://api.github.com/users/amcdnl/gists{/gist_id}","starred_url":"https://api.github.com/users/amcdnl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amcdnl/subscriptions","organizations_url":"https://api.github.com/users/amcdnl/orgs","repos_url":"https://api.github.com/users/amcdnl/repos","events_url":"https://api.github.com/users/amcdnl/events{/privacy}","received_events_url":"https://api.github.com/users/amcdnl/received_events","type":"User","site_admin":false}],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/angular/material.angular.io/pulls/300/commits","review_comments_url":"https://api.github.com/repos/angular/material.angular.io/pulls/300/comments","review_comment_url":"https://api.github.com/repos/angular/material.angular.io/pulls/comments{/number}","comments_url":"https://api.github.com/repos/angular/material.angular.io/issues/300/comments","statuses_url":"https://api.github.com/repos/angular/material.angular.io/statuses/add0fd39e1bce958f11a151dd00dd9bd16c9c48f","head":{"label":"amcdnl:new-sidenav","ref":"new-sidenav","sha":"add0fd39e1bce958f11a151dd00dd9bd16c9c48f","user":{"login":"amcdnl","id":227909,"avatar_url":"https://avatars3.githubusercontent.com/u/227909?v=4","gravatar_id":"","url":"https://api.github.com/users/amcdnl","html_url":"https://github.com/amcdnl","followers_url":"https://api.github.com/users/amcdnl/followers","following_url":"https://api.github.com/users/amcdnl/following{/other_user}","gists_url":"https://api.github.com/users/amcdnl/gists{/gist_id}","starred_url":"https://api.github.com/users/amcdnl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amcdnl/subscriptions","organizations_url":"https://api.github.com/users/amcdnl/orgs","repos_url":"https://api.github.com/users/amcdnl/repos","events_url":"https://api.github.com/users/amcdnl/events{/privacy}","received_events_url":"https://api.github.com/users/amcdnl/received_events","type":"User","site_admin":false},"repo":{"id":95004557,"name":"material.angular.io","full_name":"amcdnl/material.angular.io","owner":{"login":"amcdnl","id":227909,"avatar_url":"https://avatars3.githubusercontent.com/u/227909?v=4","gravatar_id":"","url":"https://api.github.com/users/amcdnl","html_url":"https://github.com/amcdnl","followers_url":"https://api.github.com/users/amcdnl/followers","following_url":"https://api.github.com/users/amcdnl/following{/other_user}","gists_url":"https://api.github.com/users/amcdnl/gists{/gist_id}","starred_url":"https://api.github.com/users/amcdnl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amcdnl/subscriptions","organizations_url":"https://api.github.com/users/amcdnl/orgs","repos_url":"https://api.github.com/users/amcdnl/repos","events_url":"https://api.github.com/users/amcdnl/events{/privacy}","received_events_url":"https://api.github.com/users/amcdnl/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/amcdnl/material.angular.io","description":"Docs site for Angular Material 2","fork":true,"url":"https://api.github.com/repos/amcdnl/material.angular.io","forks_url":"https://api.github.com/repos/amcdnl/material.angular.io/forks","keys_url":"https://api.github.com/repos/amcdnl/material.angular.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/amcdnl/material.angular.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/amcdnl/material.angular.io/teams","hooks_url":"https://api.github.com/repos/amcdnl/material.angular.io/hooks","issue_events_url":"https://api.github.com/repos/amcdnl/material.angular.io/issues/events{/number}","events_url":"https://api.github.com/repos/amcdnl/material.angular.io/events","assignees_url":"https://api.github.com/repos/amcdnl/material.angular.io/assignees{/user}","branches_url":"https://api.github.com/repos/amcdnl/material.angular.io/branches{/branch}","tags_url":"https://api.github.com/repos/amcdnl/material.angular.io/tags","blobs_url":"https://api.github.com/repos/amcdnl/material.angular.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/amcdnl/material.angular.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/amcdnl/material.angular.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/amcdnl/material.angular.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/amcdnl/material.angular.io/statuses/{sha}","languages_url":"https://api.github.com/repos/amcdnl/material.angular.io/languages","stargazers_url":"https://api.github.com/repos/amcdnl/material.angular.io/stargazers","contributors_url":"https://api.github.com/repos/amcdnl/material.angular.io/contributors","subscribers_url":"https://api.github.com/repos/amcdnl/material.angular.io/subscribers","subscription_url":"https://api.github.com/repos/amcdnl/material.angular.io/subscription","commits_url":"https://api.github.com/repos/amcdnl/material.angular.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/amcdnl/material.angular.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/amcdnl/material.angular.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/amcdnl/material.angular.io/issues/comments{/number}","contents_url":"https://api.github.com/repos/amcdnl/material.angular.io/contents/{+path}","compare_url":"https://api.github.com/repos/amcdnl/material.angular.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/amcdnl/material.angular.io/merges","archive_url":"https://api.github.com/repos/amcdnl/material.angular.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/amcdnl/material.angular.io/downloads","issues_url":"https://api.github.com/repos/amcdnl/material.angular.io/issues{/number}","pulls_url":"https://api.github.com/repos/amcdnl/material.angular.io/pulls{/number}","milestones_url":"https://api.github.com/repos/amcdnl/material.angular.io/milestones{/number}","notifications_url":"https://api.github.com/repos/amcdnl/material.angular.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/amcdnl/material.angular.io/labels{/name}","releases_url":"https://api.github.com/repos/amcdnl/material.angular.io/releases{/id}","deployments_url":"https://api.github.com/repos/amcdnl/material.angular.io/deployments","created_at":"2017-06-21T13:01:59Z","updated_at":"2017-06-21T13:02:01Z","pushed_at":"2017-10-20T14:46:10Z","git_url":"git://github.com/amcdnl/material.angular.io.git","ssh_url":"git@github.com:amcdnl/material.angular.io.git","clone_url":"https://github.com/amcdnl/material.angular.io.git","svn_url":"https://github.com/amcdnl/material.angular.io","homepage":"http://material.angular.io","size":970,"stargazers_count":0,"watchers_count":0,"language":"TypeScript","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":1,"mirror_url":null,"archived":false,"open_issues_count":0,"forks":1,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"angular:master","ref":"master","sha":"fd7d5d47d31372edf42906a63e55bde26f6fb51c","user":{"login":"angular","id":139426,"avatar_url":"https://avatars3.githubusercontent.com/u/139426?v=4","gravatar_id":"","url":"https://api.github.com/users/angular","html_url":"https://github.com/angular","followers_url":"https://api.github.com/users/angular/followers","following_url":"https://api.github.com/users/angular/following{/other_user}","gists_url":"https://api.github.com/users/angular/gists{/gist_id}","starred_url":"https://api.github.com/users/angular/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/angular/subscriptions","organizations_url":"https://api.github.com/users/angular/orgs","repos_url":"https://api.github.com/users/angular/repos","events_url":"https://api.github.com/users/angular/events{/privacy}","received_events_url":"https://api.github.com/users/angular/received_events","type":"Organization","site_admin":false},"repo":{"id":73332323,"name":"material.angular.io","full_name":"angular/material.angular.io","owner":{"login":"angular","id":139426,"avatar_url":"https://avatars3.githubusercontent.com/u/139426?v=4","gravatar_id":"","url":"https://api.github.com/users/angular","html_url":"https://github.com/angular","followers_url":"https://api.github.com/users/angular/followers","following_url":"https://api.github.com/users/angular/following{/other_user}","gists_url":"https://api.github.com/users/angular/gists{/gist_id}","starred_url":"https://api.github.com/users/angular/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/angular/subscriptions","organizations_url":"https://api.github.com/users/angular/orgs","repos_url":"https://api.github.com/users/angular/repos","events_url":"https://api.github.com/users/angular/events{/privacy}","received_events_url":"https://api.github.com/users/angular/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/angular/material.angular.io","description":"Docs site for Angular Material 2","fork":false,"url":"https://api.github.com/repos/angular/material.angular.io","forks_url":"https://api.github.com/repos/angular/material.angular.io/forks","keys_url":"https://api.github.com/repos/angular/material.angular.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/angular/material.angular.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/angular/material.angular.io/teams","hooks_url":"https://api.github.com/repos/angular/material.angular.io/hooks","issue_events_url":"https://api.github.com/repos/angular/material.angular.io/issues/events{/number}","events_url":"https://api.github.com/repos/angular/material.angular.io/events","assignees_url":"https://api.github.com/repos/angular/material.angular.io/assignees{/user}","branches_url":"https://api.github.com/repos/angular/material.angular.io/branches{/branch}","tags_url":"https://api.github.com/repos/angular/material.angular.io/tags","blobs_url":"https://api.github.com/repos/angular/material.angular.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/angular/material.angular.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/angular/material.angular.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/angular/material.angular.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/angular/material.angular.io/statuses/{sha}","languages_url":"https://api.github.com/repos/angular/material.angular.io/languages","stargazers_url":"https://api.github.com/repos/angular/material.angular.io/stargazers","contributors_url":"https://api.github.com/repos/angular/material.angular.io/contributors","subscribers_url":"https://api.github.com/repos/angular/material.angular.io/subscribers","subscription_url":"https://api.github.com/repos/angular/material.angular.io/subscription","commits_url":"https://api.github.com/repos/angular/material.angular.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/angular/material.angular.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/angular/material.angular.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/angular/material.angular.io/issues/comments{/number}","contents_url":"https://api.github.com/repos/angular/material.angular.io/contents/{+path}","compare_url":"https://api.github.com/repos/angular/material.angular.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/angular/material.angular.io/merges","archive_url":"https://api.github.com/repos/angular/material.angular.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/angular/material.angular.io/downloads","issues_url":"https://api.github.com/repos/angular/material.angular.io/issues{/number}","pulls_url":"https://api.github.com/repos/angular/material.angular.io/pulls{/number}","milestones_url":"https://api.github.com/repos/angular/material.angular.io/milestones{/number}","notifications_url":"https://api.github.com/repos/angular/material.angular.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/angular/material.angular.io/labels{/name}","releases_url":"https://api.github.com/repos/angular/material.angular.io/releases{/id}","deployments_url":"https://api.github.com/repos/angular/material.angular.io/deployments","created_at":"2016-11-10T00:17:35Z","updated_at":"2017-10-20T15:47:48Z","pushed_at":"2017-10-20T14:46:12Z","git_url":"git://github.com/angular/material.angular.io.git","ssh_url":"git@github.com:angular/material.angular.io.git","clone_url":"https://github.com/angular/material.angular.io.git","svn_url":"https://github.com/angular/material.angular.io","homepage":"http://material.angular.io","size":959,"stargazers_count":119,"watchers_count":119,"language":"TypeScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":80,"mirror_url":null,"archived":false,"open_issues_count":56,"forks":80,"open_issues":56,"watchers":119,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/angular/material.angular.io/pulls/300"},"html":{"href":"https://github.com/angular/material.angular.io/pull/300"},"issue":{"href":"https://api.github.com/repos/angular/material.angular.io/issues/300"},"comments":{"href":"https://api.github.com/repos/angular/material.angular.io/issues/300/comments"},"review_comments":{"href":"https://api.github.com/repos/angular/material.angular.io/pulls/300/comments"},"review_comment":{"href":"https://api.github.com/repos/angular/material.angular.io/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/angular/material.angular.io/pulls/300/commits"},"statuses":{"href":"https://api.github.com/repos/angular/material.angular.io/statuses/add0fd39e1bce958f11a151dd00dd9bd16c9c48f"}},"author_association":"COLLABORATOR"}}
{"actor":{"display_login":"jelbourn"}}