Merge pull request #398 from ember-learn/sidebar-grid

start using CSS grid for sidebar implementation

Author: mansona

addon/styles/sidebar-container.css

@@ -1,32 +1,27 @@
+:root {
+  --sidebar-width: 16rem;
+}
+
 .sidebar-container {
-  display: flex;
+  display: grid;
+  grid-gap: 2rem;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
   margin: auto;
   max-width: var(--container-width);
   padding: var(--spacing-6) var(--grid-margin);
 }
 
+.sidebar-container > *:not(.es-sidebar):not(.es-sidebar-toggle) {
+  grid-column: 1 / span 2;
+}
+
+.sidebar-container > .es-sidebar + .es-sidebar-toggle + * {
+  grid-column: 2 / span 2;
+}
+
 @media (max-width: 768px) {
   .sidebar-container {
     display: block;
     padding: var(--spacing-4) var(--grid-margin);
   }
 }
-
-@media (min-width: 769px) {
-  .sidebar-container > .es-sidebar {
-    width: 16rem;
-    margin-right: 2rem;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-
-  .sidebar-container > *:not(.es-sidebar):not(.es-sidebar-toggle) {
-    flex-grow: 1;
-  }
-
-  .sidebar-container > * + .es-sidebar {
-    order: 999;
-    margin-right: unset;
-    margin-left: 2rem;
-  }
-}

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

@@ -51,7 +51,7 @@ module('Integration | Component | es-sidebar', function (hooks) {
     });
     assert.dom('.sidebar-container .es-sidebar').hasStyle({
       width: '256px',
-      margin: '0px 0px 0px 32px',
+      margin: '0px',
     });
 
     await render(hbs`
@@ -63,7 +63,7 @@ module('Integration | Component | es-sidebar', function (hooks) {
 
     assert.dom('.sidebar-container .es-sidebar').hasStyle({
       width: '256px',
-      margin: '0px 32px 0px 0px',
+      margin: '0px',
     });
     assert.dom('[data-test-content-right]').hasStyle({
       width: '684px',