Merge pull request #464 from ember-learn/change-width-sidebar

Increase width sidebar

Author: MinThaMie

addon/styles/components/es-sidebar.css

@@ -9,7 +9,7 @@
   display: none;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 844px) {
   .es-sidebar-toggle {
     position: fixed;
     bottom: 30px;

addon/styles/sidebar-container.css

@@ -1,5 +1,5 @@
 :root {
-  --sidebar-width: 16rem;
+  --sidebar-width: 18.5rem;
 }
 
 .sidebar-container {
@@ -19,7 +19,7 @@
   grid-column: 2 / span 2;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 844px) {
   .sidebar-container {
     display: block;
     padding: var(--spacing-4) var(--grid-margin);

docs/components/sidebar.md

@@ -4,7 +4,7 @@
 
 The sidebar component can be used together with the sidebar-container class to add a responsive sidebar to the page. If the sidebar is the first element in the sidebar-container it will display as a left sidebar. Otherwise it will display as a right sidebar.
 
-The sidebar component will automatically switch to the mobile mode once your browser window is smaller than or equal to 768px.
+The sidebar component will automatically switch to the mobile mode once your browser window is smaller than or equal to 844px.
 
 <style>
   .sidebar-container {
@@ -20,7 +20,7 @@ The sidebar component will automatically switch to the mobile mode once your bro
     background: #FFF;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 844px) {
     .sidebar-container .es-sidebar {
       width: calc(100% - var(--es-sidebar-padding) * 2);
     }

tests/integration/components/es-sidebar-test.js

@@ -36,7 +36,7 @@ module('Integration | Component | es-sidebar', function (hooks) {
     `);
 
     assert.dom('.sidebar-container .es-sidebar').hasStyle({
-      width: '256px',
+      width: '296px',
     });
 
     await render(hbs`
@@ -47,10 +47,10 @@ module('Integration | Component | es-sidebar', function (hooks) {
     `);
 
     assert.dom('[data-test-content-left]').hasStyle({
-      width: '684px',
+      width: '644px',
     });
     assert.dom('.sidebar-container .es-sidebar').hasStyle({
-      width: '256px',
+      width: '296px',
       margin: '0px',
     });
 
@@ -62,11 +62,11 @@ module('Integration | Component | es-sidebar', function (hooks) {
     `);
 
     assert.dom('.sidebar-container .es-sidebar').hasStyle({
-      width: '256px',
+      width: '296px',
       margin: '0px',
     });
     assert.dom('[data-test-content-right]').hasStyle({
-      width: '684px',
+      width: '644px',
     });
   });
 });