Merge pull request #507 from ember-learn/fix-sidebar

make sidebar content slightly wider and add background colour

Author: mansona

addon/styles/components/es-sidebar.css

@@ -13,7 +13,11 @@
   border-right: 2px solid var(--color-gray-300);
 }
 
-@media (max-width: 844px) {
+.es-sidebar {
+  background-color: var(--color-gray-200);
+}
+
+@media (width <= 844px) {
   .es-sidebar-toggle {
     position: fixed;
     z-index: 1;

addon/styles/sidebar-container.css

@@ -1,5 +1,5 @@
 :root {
-  --sidebar-width: 18.5rem;
+  --sidebar-width: 21rem;
 }
 
 .sidebar-container {
@@ -11,6 +11,10 @@
   padding: var(--spacing-6) var(--grid-margin);
 }
 
+.sidebar-container > *:not(.es-sidebar-toggle) {
+  padding: var(--spacing-4) var(--spacing-2);
+}
+
 .sidebar-container > *:not(.es-sidebar):not(.es-sidebar-toggle) {
   grid-column: 1 / span 2;
 }

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

@@ -27,46 +27,4 @@ module('Integration | Component | es-sidebar', function (hooks) {
     await click('.es-sidebar-close');
     assert.dom('.es-sidebar').hasAttribute('aria-expanded', 'false');
   });
-
-  test('it has the correct styles when in a .sidebar-container', async function (assert) {
-    await render(hbs`
-      <div class="sidebar-container">
-        <EsSidebar>Test</EsSidebar>
-      </div>
-    `);
-
-    assert.dom('.sidebar-container .es-sidebar').hasStyle({
-      width: '296px',
-    });
-
-    await render(hbs`
-      <div class="sidebar-container">
-        <div data-test-content-left>Content left</div>
-        <EsSidebar>Test</EsSidebar>
-      </div>
-    `);
-
-    assert.dom('[data-test-content-left]').hasStyle({
-      width: '644px',
-    });
-    assert.dom('.sidebar-container .es-sidebar').hasStyle({
-      width: '296px',
-      margin: '0px',
-    });
-
-    await render(hbs`
-      <div class="sidebar-container">
-        <EsSidebar>Test</EsSidebar>
-        <div data-test-content-right>Content right</div>
-      </div>
-    `);
-
-    assert.dom('.sidebar-container .es-sidebar').hasStyle({
-      width: '296px',
-      margin: '0px',
-    });
-    assert.dom('[data-test-content-right]').hasStyle({
-      width: '644px',
-    });
-  });
 });