{"action":"created","issue":{"url":"https://api.github.com/repos/Dogfalo/materialize/issues/1539","labels_url":"https://api.github.com/repos/Dogfalo/materialize/issues/1539/labels{/name}","comments_url":"https://api.github.com/repos/Dogfalo/materialize/issues/1539/comments","events_url":"https://api.github.com/repos/Dogfalo/materialize/issues/1539/events","html_url":"https://github.com/Dogfalo/materialize/issues/1539","id":89052113,"number":1539,"title":"SideNav improvements","user":{"login":"Flaburgan","id":930064,"avatar_url":"https://avatars.githubusercontent.com/u/930064?v=3","gravatar_id":"","url":"https://api.github.com/users/Flaburgan","html_url":"https://github.com/Flaburgan","followers_url":"https://api.github.com/users/Flaburgan/followers","following_url":"https://api.github.com/users/Flaburgan/following{/other_user}","gists_url":"https://api.github.com/users/Flaburgan/gists{/gist_id}","starred_url":"https://api.github.com/users/Flaburgan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Flaburgan/subscriptions","organizations_url":"https://api.github.com/users/Flaburgan/orgs","repos_url":"https://api.github.com/users/Flaburgan/repos","events_url":"https://api.github.com/users/Flaburgan/events{/privacy}","received_events_url":"https://api.github.com/users/Flaburgan/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-06-17T15:38:16Z","updated_at":"2015-07-16T10:13:05Z","closed_at":null,"body":"There is an issue with the sidenav the way it actually works:\r\nThe `sideNav` function can only get a px value as a width: `$(\".button-collapse\").sideNav({menuWidth: 280})`. But the `.drag-target` element which is used to open and close the sideNav has a `width: 50%; ` added  with JS when the drawer is open. A tap on that element closes the sideNav.\r\n\r\nThat means we have two different cases where this approach will not have the expected behavior:\r\n\r\n**Case 1: on a small screen**\r\nOn a small screen, for example 320px, with a sideNav width of 280px, the `.drag-target` element will have a 160px width. It starts to the right, but that means that it overflows of 120px on the sideNav. So, if the user taps on the right of the sideNav, it will actually tap on the `.drag-target` and then close the sideNav instead of clicking on what's there in the sideNav.\r\n\r\n**Case 2: on a big screen**\r\nAt the opposite, if the screen is big, let's say 800px, then the `.drag-target` element starts at 400px on the middle of the screen. So, there is 120px between the end of the sideNav and the beginning of the `.drag-target`, which means that if the user taps here, the sideNav will not be closed.\r\n\r\nThe solution to this problem is obvious: the width of `.drag-target` has to be `body` width minus the sideNav width. It can still overflow a little bit on the side nav to allow the user to close it swipping.\r\n\r\nBtw, performance wise, the side nav should be open with a translate3D, not with JavaScript, which causes a lot of repaint.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/Dogfalo/materialize/issues/comments/121917015","html_url":"https://github.com/Dogfalo/materialize/issues/1539#issuecomment-121917015","issue_url":"https://api.github.com/repos/Dogfalo/materialize/issues/1539","id":121917015,"user":{"login":"Flaburgan","id":930064,"avatar_url":"https://avatars.githubusercontent.com/u/930064?v=3","gravatar_id":"","url":"https://api.github.com/users/Flaburgan","html_url":"https://github.com/Flaburgan","followers_url":"https://api.github.com/users/Flaburgan/followers","following_url":"https://api.github.com/users/Flaburgan/following{/other_user}","gists_url":"https://api.github.com/users/Flaburgan/gists{/gist_id}","starred_url":"https://api.github.com/users/Flaburgan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Flaburgan/subscriptions","organizations_url":"https://api.github.com/users/Flaburgan/orgs","repos_url":"https://api.github.com/users/Flaburgan/repos","events_url":"https://api.github.com/users/Flaburgan/events{/privacy}","received_events_url":"https://api.github.com/users/Flaburgan/received_events","type":"User","site_admin":false},"created_at":"2015-07-16T10:13:05Z","updated_at":"2015-07-16T10:13:05Z","body":"Up, is the issue clear? What do you need to work on that?"}}