feat: navigator sidebar

client/js/components/navigator.vue

@@ -9,18 +9,42 @@
       .navigator-title
         h1 {{ siteTitle }}
       .navigator-subtitle(:class='subtitleClass')
-
+        transition(name='navigator-subtitle-icon')
-        svg.icons.is-24(role='img', v-if='subtitleIcon')
+          svg.icons.is-24.navigator-subtitle-icon(role='img', v-if='subtitleIcon')
-          title {{subtitleText}}
+            title {{subtitleText}}
-          use(:xlink:href='subtitleIconClass')
+            use(:xlink:href='subtitleIconClass')
         h2 {{subtitleText}}
       .navigator-action
         .navigator-action-item
           svg.icons.is-32(role='img')
             title User
             use(xlink:href='#nc-user-circle')
-    .navigator-row
+    transition(name='navigator-sd')
-      .navigator-nav
+      .navigator-sd(v-show='sdShown')
+        .navigator-sd-actions
+          a.is-active(href='')
+            svg.icons.is-24(role='img')
+              title Search
+              use(xlink:href='#gg-search')
+          a(href='')
+            svg.icons.is-24(role='img')
+              title New Document
+              use(xlink:href='#nc-plus-circle')
+          a(href='')
+            svg.icons.is-24(role='img')
+              title Navigation
+              use(xlink:href='#nc-pen-red')
+          a(href='')
+            svg.icons.is-24(role='img')
+              title Navigation
+              use(xlink:href='#nc-restore')
+          a(href='')
+            svg.icons.is-24(role='img')
+              title New Document
+              use(xlink:href='#nc-code-editor')
+        .navigator-sd-search
+          input(type='text', placeholder='Search')
+        .navigator-sd-results
 </template>
 
 <script>
@@ -31,7 +55,9 @@ import { mapState } from 'vuex'
 export default {
   name: 'navigator',
   data() {
-    return { }
+    return {
+      sdShown: false
+    }
   },
   computed: {
     ...mapState('navigator', [
@@ -56,11 +82,12 @@ export default {
   },
   methods: {
     toggleMainMenu() {
-      this.$store.dispatch('navigator/alert', {
+      this.sdShown = !this.sdShown
-        style: 'success',
+      // this.$store.dispatch('navigator/alert', {
-        icon: 'nc-check-simple',
+      //   style: 'success',
-        msg: 'Changes were saved successfully!'
+      //   icon: 'gg-check',
-      })
+      //   msg: 'Changes were saved successfully!'
+      // })
     }
   },
   mounted() {

client/scss/base/mixins.scss

@@ -1,16 +1,3 @@
-/**
- * Clearfix
- *
- * @return     {string}  Clearfix attribute
- */
-@mixin clearfix {
-	&:after {
-		content: "";
-		display: table;
-		clear: both;
-	}
-}
-
 /**
  * Placeholder attribute for inputs
  *

client/scss/components/navigator.scss

@@ -88,7 +88,22 @@
 
     svg {
       margin-right: .5rem;
-      animation: flash 1s linear;
+      animation: flash 1s linear 1s;
+
+      &.navigator-subtitle-icon {
+        transition: all 1s ease;
+
+        &-enter-active, &-leave-active {
+          transform: scale(1);
+          width: 24px;
+          margin-right: .5rem;
+        }
+        &-enter, &-leave-to {
+          transform: scale(0);
+          width: 0;
+          margin-right: 0;
+        }
+      }
 
       use {
         color: #FFF;
@@ -130,4 +145,83 @@
       }
     }
   }
+
+  &-sd {
+    width: 350px;
+    background-color: #FFF;
+    border-radius: 0 0 5px 0;
+    padding: 0 0 1rem 0;
+    transition: all .4s ease;
+    transform-origin: top left;
+
+    &-enter-active, &-leave-active {
+      transform: scale(1);
+    }
+    &-enter, &-leave-to {
+      transform: scale(.1, 0);
+    }
+
+    &-actions {
+      background-color: mc('blue-grey', '50');
+      display: flex;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 50px;
+        width: 50px;
+        transition: all .4s ease;
+
+        &.is-active {
+          background-color: #FFF;
+        }
+
+        &:hover {
+          background-color: #FFF;
+        }
+
+        svg {
+          use {
+            color: mc('blue-grey', '500');
+            fill: mc('blue-grey', '500');
+            transition: all .4s ease;
+          }
+        }
+      }
+    }
+
+    &-search {
+      position: relative;
+
+      input {
+        display: block;
+        width: 100%;
+        padding: 0 1rem 0 1rem;
+        height: 40px;
+        border: 0;
+        font-size: .9rem;
+        color: mc('grey', '700');
+
+        &:focus {
+          outline: none;
+          border: 0;
+        }
+      }
+
+      svg {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        top: 9px;
+        left: 15px;
+
+        use {
+          color: mc('grey', '500');
+          fill: mc('grey', '500');
+          transition: all .4s ease;
+        }
+      }
+    }
+  }
 }

client/svg/icons.svg

@@ -358,4 +358,56 @@
             <path d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"></path>
         </g>
     </symbol>
+    <symbol id='gg-check' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper" fill="currentColor">
+            <path d="M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z"></path>
+        </g>
+    </symbol>
+    <symbol id='gg-search' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper" fill="currentColor">
+            <path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z"></path>
+        </g>
+    </symbol>
+    <symbol id='nc-plus-circle' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper">
+            <path fill="#72C472" d="M24,47C11.31738,47,1,36.68262,1,24S11.31738,1,24,1s23,10.31738,23,23S36.68262,47,24,47z"></path>
+            <polygon fill="#FFFFFF" points="36,21 27,21 27,12 21,12 21,21 12,21 12,27 21,27 21,36 27,36 27,27 36,27 "></polygon>
+        </g>
+    </symbol>
+    <symbol id='nc-pen-red' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper">
+            <polygon fill="#223E49" points="8.183,44.183 7,41 3.817,39.817 2.725,45.275 "></polygon>
+            <polygon fill="#EAD8C5" points="14.493,42.921 12,35.708 5.079,33.507 3.817,39.817 8.183,44.183 "></polygon>
+            <path fill="#335262" d="M34.586,4l-5.293,5.293L33,15l5.707,3.707L44,13.414c0.781-0.781,0.781-2.047,0-2.828L37.414,4 C36.633,3.219,35.367,3.219,34.586,4z"></path>
+            <rect x="2.917" y="20.218" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.2804 21.2734)" fill="#E86C60" width="34.244" height="8.071"></rect>
+            <rect x="7.125" y="25.132" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -13.0231 25.4808)" fill="#DD5E58" width="34.244" height="6.657"></rect>
+            <rect x="33" y="7.343" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0.0589 28.1421)" fill="#E6E6E6" width="2" height="13.314"></rect>
+        </g>
+    </symbol>
+    <symbol id='nc-restore' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper">
+            <path fill="#B3B3B3" d="M24,42c10.539,0,18.992-9.105,17.906-19.862c-0.862-8.531-7.863-15.387-16.409-16.077 c-6.106-0.493-11.83,2.057-15.508,6.629l7.65-1.024l0.531,3.965L6.276,17.223c-0.09,0.012-0.18,0.018-0.269,0.018 c-0.986,0-1.845-0.729-1.979-1.734L2.436,3.612L6.4,3.081l0.886,6.617c4.686-5.496,11.853-8.446,19.428-7.535 c10.097,1.214,18.149,9.444,19.17,19.562C47.212,34.873,36.881,46,24,46C12.213,46,2.561,36.682,2.024,25.026 C1.998,24.464,2.464,24,3.026,24h2.003c0.541,0,0.969,0.431,0.997,0.972C6.532,34.447,14.401,42,24,42z"></path>
+            <path fill="#43A6DD" d="M29.879,32.707l-7.293-7.293C22.211,25.039,22,24.53,22,23.999V15c0-0.552,0.448-1,1-1h2 c0.552,0,1,0.448,1,1v8.172l6.707,6.707c0.391,0.391,0.391,1.024,0,1.414l-1.414,1.414C30.903,33.097,30.269,33.097,29.879,32.707z"></path>
+        </g>
+    </symbol> 
+    <symbol id='nc-code-editor' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper">
+            <path fill="#444444" d="M47,11V6c0-1.105-0.895-2-2-2H3C1.895,4,1,4.895,1,6v5H47z"></path>
+            <path fill="#606060" d="M45,43H15V11h32v30C47,42.105,46.105,43,45,43z"></path>
+            <circle fill="#E86C60" cx="4.5" cy="7.5" r="1.5"></circle>
+            <circle fill="#EFD358" cx="9.5" cy="7.5" r="1.5"></circle>
+            <circle fill="#72C472" cx="14.5" cy="7.5" r="1.5"></circle>
+            <path fill="#4F4F4F" d="M16,43H3c-1.105,0-2-0.895-2-2V11h15V43z"></path>
+            <rect x="5" y="14" fill="#B3B3B3" width="7" height="2"></rect>
+            <rect x="5" y="20" fill="#B3B3B3" width="5" height="2"></rect>
+            <rect x="5" y="26" fill="#B3B3B3" width="7" height="2"></rect>
+            <rect x="5" y="32" fill="#B3B3B3" width="5" height="2"></rect>
+            <rect x="5" y="38" fill="#B3B3B3" width="7" height="2"></rect>
+            <rect x="20" y="14" fill="#E86C60" width="5" height="2"></rect>
+            <rect x="24" y="20" fill="#EFD358" width="7" height="2"></rect>
+            <rect x="27" y="26" fill="#FFFFFF" width="10" height="2"></rect>
+            <rect x="24" y="32" fill="#EFD358" width="7" height="2"></rect>
+            <rect x="20" y="38" fill="#E86C60" width="5" height="2"></rect>
+        </g>
+    </symbol>
 </svg>