wip: sidebar

Author: markpinero

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-    "extends": "airbnb-base"
-}
+  "extends": "airbnb-base",
+  "env": {
+    "browser": true,
+    "node": true
+  }
+}

assets/sprite.svg

@@ -1,5 +1,12 @@
 const sidebarItems = document.querySelectorAll('.navigation__item');
+const sidebarMenus = [...sidebarItems].filter(item => item.contains(item.querySelector('.navigation__list')));
 
-console.log([...sidebarItems].filter(item => {
-  return item.contains(item.querySelector('.navigation__list'))
-}));
+const toggleMenu = (event) => {
+  event.preventDefault();
+  console.log('test');
+};
+
+sidebarMenus.forEach((menu) => {
+  const caret = menu.querySelector('svg');
+  caret.addEventListener('click', toggleMenu);
+});

js/sidebar.js

@@ -9,32 +9,46 @@ section(class='sidebar')
       li(class='navigation__item')
         a(href='/')
           svg(class='navigation__icon')
-            use(xlink:href='assets/sprite.svg#chevron-right')
+            use(xlink:href='assets/sprite.svg#chevron')
           | Release Notes
-        ul(class='navigation__list')
-          li(class='navigation__item navigation__item--active') dcos
-          li(class='navigation__item') dcos auth
-          li(class='navigation__item') dcos config
-          li(class='navigation__item') dcos experimental
-          li(class='navigation__item') dcos help
       li(class='navigation__item')
         a(href='/')
           svg(class='navigation__icon')
-            use(xlink:href="assets/sprite.svg#chevron-right")
+            use(xlink:href="assets/sprite.svg#chevron")
           | Overview
       li(class='navigation__item')
         a(href='/')
           svg(class='navigation__icon')
-            use(xlink:href="assets/sprite.svg#chevron-right")
+            use(xlink:href="assets/sprite.svg#chevron")
           | Installing & Upgrading
       li(class='navigation__item')
         a(href='/')
           svg(class='navigation__icon')
-            use(xlink:href="assets/sprite.svg#chevron-right")
+            use(xlink:href="assets/sprite.svg#chevron")
           | GUI
-      li(class='navigation__item')
+      li(class='navigation__item navigation__item--active')
         a(href='/')
           svg(class='navigation__icon')
-            use(xlink:href="assets/sprite.svg#chevron-right")
+            use(xlink:href="assets/sprite.svg#chevron")
           | CLI
+        ol(class='navigation__list')
+          li(class='navigation__item')
+            a(href='/') Installing the CLI
+          li(class='navigation__item')
+            a(href='/') Configuring the CLI
+          li(class='navigation__item')
+            a(href='/') Updating the CLI
+          li(class='navigation__item')
+            a(href='/') Uninstalling the CLI
+          li(class='navigation__item')
+            a(href='/')
+              svg(class='navigation__icon')
+                use(xlink:href="assets/sprite.svg#chevron")
+              | Command Reference
+            ol(class='navigation__list')
+              li(class='navigation__item navigation__item--active') dcos
+              li(class='navigation__item') dcos auth
+              li(class='navigation__item') dcos config
+              li(class='navigation__item') dcos experimental
+              li(class='navigation__item') dcos help
           //- li(class='navigation__item navigation__item--selected') Uninstalling the CLI

layouts/partials/sidebar.pug

@@ -13,7 +13,7 @@
   @include md {
     flex-direction: row;
     &__sidebar {
-      width: 300px;
+      width: 350px;
       display: flex;
       flex-direction: column;
     }

scss/base/_layout.scss

@@ -11,27 +11,39 @@
 }
 
 .navigation {
-  padding: 1rem;
+  padding: 2rem;
   &__list {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
   color: rgba(255, 255, 255, 0.6);
   &__item {
-    line-height: 1.7;
+    position: relative;
+    line-height: 1.8;
     a {
-      display: flex;
-      align-items: center;
       color: rgba(255, 255, 255, 0.6);
       // color: $color-light;
       text-decoration: none;
     }
+    &--active {
+      svg {
+        transform: rotate(90deg);
+      }
+    }
   }
   &__icon {
+    position: absolute;
     width: 16px;
     height: 16px;
-    margin-right: 5px;
+    top: 5px;
+    left: -20px;
     color: rgba(255, 255, 255, 0.6);
   }
+  & ol li {
+    margin-left: 1rem;
+    & li {
+      margin-left: 1rem;
+    }
+  }
 }

scss/components/_sidebar.scss

@@ -1,7 +1,8 @@
 /*! Typebase.scss v0.1.0 | MIT License */
 
+// TODO Needs media queries?
 // Typesetting variables. Edit these!
-$baseFontSize:16; // in pixels. This would result in 22px on desktop
+$baseFontSize:14; // in pixels. This would result in 22px on desktop
 $baseLineHeight:1.5; // how large the line height is as a multiple of font size
 $leading:$baseLineHeight * 1rem;
 // Rate of growth for headings