Rewrite Off-canvas example and code

1 files changed, 11 insertions, 5 deletions

diff --git a/docs/src/docs.scss b/docs/src/docs.scss
index 3a88102..f441630 100644
--- a/docs/src/docs.scss
+++ b/docs/src/docs.scss
@@ -18,10 +18,6 @@
   .off-canvas-sidebar {
     width: 12rem;
   }
-
-  .off-canvas-content {
-    padding: 0 4rem;
-  }
 }
 
 .docs-navbar {
@@ -85,6 +81,10 @@
   flex: 1 1 auto;
   width: calc(100vw - 12rem);
 
+  &.off-canvas-content {
+    padding: 0 4rem;
+  }
+
   & > .container {
     margin-left: 0;
     max-width: 800px;
@@ -282,8 +282,14 @@
   }
 
   .off-canvas {
-    height: 20rem;
     position: relative;
+
+    .off-canvas-toggle {
+      left: $layout-spacing;
+      position: absolute;
+      top: $layout-spacing;
+      z-index: $zindex-0;
+    }
   }
 }