Adds documentation

ember-learn · Jul 27, 2023 · 63702c6 · 63702c6
1 parent d32a300
commit 63702c6
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/addon/styles/components/es-sidebar.css b/addon/styles/components/es-sidebar.css
@@ -9,6 +9,10 @@
   display: none;
 }
 
+.es-sidebar--border-right {
+  border-right: 2px solid var(--color-gray-300);
+}
+
 @media (max-width: 844px) {
   .es-sidebar-toggle {
     position: fixed;
@@ -83,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
@@ -24,10 +24,6 @@
   padding: 0;
 }
 
-.es-sidebar--border-right {
-  border-right: 2px solid var(--color-gray-300);
-}
-
 @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>
+```
+