Merge pull request #478 from ember-learn/sidebar-cleanup

Sidebar clean up + full width
ember-learn · Jul 27, 2023 · 1c166e8 · 1c166e8
2 parents f385ddb + 63702c6
commit 1c166e8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/addon/styles/components/es-sidebar.css b/addon/styles/components/es-sidebar.css
@@ -9,9 +9,14 @@
   display: none;
 }
 
+.es-sidebar--border-right {
+  border-right: 2px solid var(--color-gray-300);
+}
+
 @media (max-width: 844px) {
   .es-sidebar-toggle {
     position: fixed;
+    z-index: 1;
     bottom: 30px;
     right: 30px;
 
@@ -43,6 +48,7 @@
     box-sizing: border-box;
     display: none;
     position: fixed;
+    z-index: 1;
     top: var(--es-sidebar-padding);
     left: var(--es-sidebar-padding);
     height: calc(100% - var(--es-sidebar-padding) * 2);
@@ -81,4 +87,8 @@
   .es-sidebar-close svg path {
     fill: currentColor;
   }
+
+  .es-sidebar--border-right {
+    border-right: none;
+  }
 }
diff --git a/addon/styles/sidebar-container.css b/addon/styles/sidebar-container.css
@@ -19,6 +19,11 @@
   grid-column: 2 / span 2;
 }
 
+.sidebar-container--full-width {
+  max-width: 100%;
+  padding: 0;
+}
+
 @media (max-width: 844px) {
   .sidebar-container {
     display: block;

diff --git a/docs/components/sidebar.md b/docs/components/sidebar.md
@@ -50,3 +50,42 @@ The sidebar component will automatically switch to the mobile mode once your bro
   </EsSidebar>
 </div>
 ```
+
+
+### Full Width Left Sidebar Example
+```handlebars
+<div class="sidebar-container sidebar-container--full-width">
+  <EsSidebar>
+    My Left Sidebar Content
+  </EsSidebar>
+  <div class="example-content">
+    My Content
+  </div>
+</div>
+```
+
+### Full Width Right Sidebar Example
+```handlebars
+<div class="sidebar-container sidebar-container--full-width">
+  <div class="example-content">
+    My Content
+  </div>
+  <EsSidebar>
+    My Right Sidebar Content
+  </EsSidebar>
+</div>
+```
+
+### Sidebar Right Border
+There is a class, `es-sidebar--border-right`, that you can add to your sidebar to give it a right border. This will not show up in mobile.
+```handlebars
+<div class="sidebar-container">
+  <EsSidebar class="es-sidebar--border-right">
+    My Left Sidebar Content
+  </EsSidebar>
+  <div class="example-content">
+    My Content
+  </div>
+</div>
+```
+