fix(ui-stylus): Move demo pages into a sidebar

Author: vio

packages/ui-stylus/demo/_layout.pug

@@ -11,12 +11,15 @@ html(lang="en")
     title Demo - #{currentPage.title}
   body
     .demo-header
-      .demo-header__inner
-        a.demo-header__title(href="index.html") Orbit UI
+      button.demo-header__menu.ui-button-icon(type="button")
+        i.ui-icon menu
+      h1.demo-header__title
+        a.demo-header__title__link(href="index.html") Orbit UI
 
-        each page in pages.slice(1)
-          a.demo-header__link(
-            href= page.slug + ".html",
+    .demo-side-nav
+      each page in pages.slice(1)
+        a.demo-side-nav__link(
+          href= page.slug + ".html",
             class= page.slug === currentPage.slug ? "active" : ""
           )= page.title
 
@@ -28,3 +31,11 @@ html(lang="en")
     .demo-footer
       .demo-container
         a(href=repository)= `v ${version}`
+
+    script.
+      var sideNavElm = document.querySelector('.demo-side-nav');
+      var menuBtnElm = document.querySelector('.demo-header__menu');
+
+      menuBtnElm.addEventListener('click', function () {
+        sideNavElm.classList.toggle('visible');
+      });

packages/ui-stylus/demo/styles/_demo.styl

@@ -9,32 +9,32 @@
 
 .demo-header {
   fixed(left top right)
+  inner-space($space-xxsmall);
   z-index: 1000;
+  flex();
+  align-items: center;
   background: $dark;
+  color: $light;
 
-  &__inner {
-    margin: 0 auto;
-    padding: 0 $space-medium;
-    max-width: $container-max-width;
+  &__menu {
+    color: $light;
   }
 
   &__title {
-    padding: $space-xsmall $space-xsmall $space-xsmall 0;
+    margin: 0;
     font-weight: bold;
-    type-scale(medium)
-    text-decoration: none;
+    type-scale(large)
   }
 
-  &__link {
+  &__title__link {
     inline-block();
     relative();
-    padding: $space-xsmall;
     color: $light;
     font-weight: bold;
     text-decoration: none;
 
     &:hover {
-      color: rgba($light, 0.8);
+      color: rgba($light, 0.6);
     }
 
     &.active::after {
@@ -45,6 +45,28 @@
   }
 }
 
+.demo-side-nav {
+  fixed(left top 56px bottom);
+  box(240px, 100%);
+  inner-space($space-xxsmall 0)
+  bg($gray-dark);
+  color: $light;
+  z-index: 1001;
+
+  display: none;
+
+  &.visible {
+    display: block;
+  }
+}
+
+.demo-side-nav__link {
+  block();
+  inner-space($space-xxxsmall $space-small);
+  color: inherit;
+  text-decoration: none;
+}
+
 .demo-content {
   box(cover);
   debug-baseline(rgba($gray, 0.2));