ramsaylanier

const types = {
  TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR' 
}

// initial state
const state = {
  sidebarOpen: false
}

// getters

ramsaylanier

import Vue from 'vue'
import Vuex from 'vuex'
import ui from './modules/ui'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  modules: {

ramsaylanier

import Vue from 'vue'
import App from './App'
import store from './store/index.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,

ramsaylanier

<template>
  <div id="app">
    <div :class="$style.container">
      
    </div>
    <sidebar/>
    <sidebar-toggle/>
  </div>
</template>

ramsaylanier

<template>
  <button :class="[open ? $style.active : '', $style.button]" @click="handleClick">    
    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
    </svg>
  </button>
</template>

<script>

ramsaylanier

<template>
  <div :class="$style.sidebar"/>
</template>

<script>
  import {TweenMax, Power4} from 'gsap'

  export default {
    name: 'sidebar',
    mounted () {

ramsaylanier

import * as types from '../mutation-types'

// initial state
// shape: [{ id, quantity }]
const state = {
  sidebarOpen: false,
  sidebarComponent: null
}

// getters

ramsaylanier

<template>
  <div id="app">
    <div :class="$style.container">
      
    </div>
    <sidebar/>

    <div :class="$style.toggles">
      <sidebar-toggle :sidebarComponent="addForm" :icon="searchIcon"/>
      <sidebar-toggle :sidebarComponent="searchForm" :icon="addIcon"/>

ramsaylanier

<template>
  <button :class="[open ? $style.active : '', $style.button]" @click="handleClick">    
    <component :is="icon"/>
  </button>
</template>

<script>
  export default {
    name: 'sidebar-toggle',
    props: ['sidebarComponent', 'icon'],

ramsaylanier

<template>
  <div :class="$style.sidebar">
    <component :is="component"/>
  </div>
</template>

<script>
  import {TweenMax, Power4} from 'gsap'

  export default {