vue.js and sidebar example

Question

I am trying to get this sidebar (https://codepen.io/andymerskin/pen/wGbEOp) to work in my webpacked vue.js project. I can't get it to translate or transition! but it changes in console as it should and no errors whatsoever. PLease help. I am completely overlooking something and have been at it for far too long. Thanks for your help in advance. ;)

I have 2 components; body and sidebar. Sidebar is being called in body.vue.

Here is my Body.vue;

<template>
  <div id="main">
    <div class="info">
      <h1 class="title">
      <pre>&lt;zap-slideout&gt;</pre>
      </h1>
      <p class="description">Give it a jolt. Click <strong>Open</strong> at the top.</p>
    </div>
    <div>
      <sidebar></sidebar>
    </div>
  </div>
</template>

<script>
import Sidebar from '../components/Sidebar'
export default {
  components: {
    'sidebar': Sidebar
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}
</style>

and my Sidebar.vue;

<template>
  <div id="sidebar" class="sidebar"
        :class="{ isOpen: isOpen }">
     <div class="sidebar-opener"
          @click="toggle">{{openerText}}</div>
     <ul class="sidebar-menu">
       <li class="sidebar-menu-item">
         <img class="zap-emoji" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/19332/zap-emoji.svg" alt="Zap Emoji" />
       </li>
       <li class="sidebar-menu-item"
         v-for="item in menu">{{item}}</li>
       <li class="sidebar-menu-item--small"
         v-for="item in smallMenu">{{item}}</li>
     </ul>
   </div>
</template>

<script type="text/javascript">
export default {
  data: () => ({
    openerText: 'Open',
    isOpen: false,
    menu: [ 'Home', 'Work', 'Contact' ],
    smallMenu: [ 'Tips', 'Resources', 'Shenanigans' ]
  }),
  methods: {
    open () {
      this.openerText = 'Close'
      this.isOpen = true
    },
    close () {
      this.openerText = 'Open'
      this.isOpen = false
    },
    toggle () {
      if (this.isOpen) {
        this.close()
      } else {
        this.open()
      }
    }
  }
}
</script>

and my main.js;

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Sidebar from './components/Sidebar'
Vue.component('sidebar', Sidebar)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

and my App.vue;

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="css">
  @import "../public/style.css";
</style>

and my index.js

import Vue from 'vue'
import Router from 'vue-router'
import Body from '@/components/Body'
import Sidebar from '@/components/Sidebar.vue'
Vue.component('sidebar', Sidebar)

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Body',
      component: Body
    }
  ]
})

and my css;

/* main css, body, etc */

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #fff;
  background-color: #2c3e50;
  -webkit-font-smoothing: antialiased;
}

strong {
  font-weight: 600;
}

.info {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%);
  text-align: center;

}

.title {
  font-size: 24px;
  font-weight: 600;
}

.description {
  margin-top: 20px;
}

/*
Sidebar styles...
 */
.sidebar {
  position: relative;
  width: 340px;
  height: 100vh;
  padding: 30px;
  background-color: #34495e;
  transform: translateX(100%);
  transition: transform 0.6s ease(out-cubic);

  &.isOpen {
    transform: translateX(0);
  }
}

.sidebar-opener {
  position: absolute;
  top: 20px;
  right: 100%;
  margin-right: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.sidebar-menu {
  font-weight: 600;
  color: #fff;
}

.sidebar-menu-item,
.sidebar-menu-item--small {
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }

  & + & {
    margin-top: 20px;
  }
}

.sidebar-menu-item {
  font-size: 36px;

  & + .sidebar-menu-item--small {
    margin-top: 30px;
  }
}

.sidebar-menu-item--small {
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ecf0f1;
}

/* The famed Zap agency logo (TM) */
.zap-emoji {
  height: 120px;
}

Answer 1

It's in the scss. Doh! Thanks for the help. Here it is with css and now is working.

/* main css, body, etc */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #fff;
  background-color: #2c3e50;
  -webkit-font-smoothing: antialiased;
}

strong {
  font-weight: 600;
}

.info {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%);
  text-align: center;

}

.title {
  font-size: 24px;
  font-weight: 600;
}

.description {
  margin-top: 20px;
}

/* responsive grid */

* {
    box-sizing: border-box;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

[class*="col-"] {
    float: left;
    padding: 15px;
    background: #e4e4e4;
}

.row {
    margin-bottom: 25px;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

/*
Sidebar styles...
 */
.sidebar {
  position: relative;
  width: 340px;
  height: 100vh;
  padding: 30px;
  background-color: #34495e;
  transform: translateX(100%);
  transition: transform 0.6s ease(out-cubic);
}
.sidebar.isOpen {
  transform: translateX(0);
}

.sidebar-opener {
  position: absolute;
  top: 20px;
  right: 100%;
  margin-right: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  cursor: pointer;
}
.sidebar-opener:hover {
  text-decoration: underline;
}

.sidebar-menu {
  font-weight: 600;
  color: #fff;
}

.sidebar-menu-item,
.sidebar-menu-item--small {
  cursor: pointer;
}
.sidebar-menu-item:hover,
.sidebar-menu-item--small:hover {
  text-decoration: underline;
}
.sidebar-menu-item + .sidebar-menu-item,
.sidebar-menu-item--small + .sidebar-menu-item, .sidebar-menu-item +
.sidebar-menu-item--small,
.sidebar-menu-item--small +
.sidebar-menu-item--small {
  margin-top: 20px;
}

.sidebar-menu-item {
  font-size: 36px;
}
.sidebar-menu-item + .sidebar-menu-item--small {
  margin-top: 30px;
}

.sidebar-menu-item--small {
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ecf0f1;
}

/* The famed Zap agency logo (TM) */
.zap-emoji {
  height: 120px;
}