Merge pull request #6 from nikandlv/development

Responsive update

.eslintignore

@@ -1,3 +1,4 @@
 test/unit/coverage/**
 test/unit/*.js
 test/e2e/*.js
+src/main/*.js

src/main/index.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { app, BrowserWindow } from 'electron'
-
+import store from '../renderer/store/index'
 /**
  * Set `__static` path to static files in production
  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html

src/renderer/App.vue

@@ -43,4 +43,8 @@ $lato-font-path: '/node_modules/lato-font/fonts'
   .page
     flex-grow: 1
     overflow: auto
+    transition: padding-top 300ms
+@media(max-width: 800px)
+  .page
+    padding-top: 64px
 </style>

src/renderer/components/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-    <span>
+    <span :class="{'nopadding' : nopadding === true}">
         <img src="/static/logo-2.svg" alt="Jukebox">
         Jukebox.
     </span>
@@ -7,7 +7,8 @@
 
 <script>
 export default {
-  name: 'Logo'
+  name: 'Logo',
+  props: ['nopadding']
 }
 </script>
 
@@ -16,6 +17,9 @@ span
     margin-bottom: 12px
     font-size: 1.5rem
     color: lighten(black,40)
+    &.nopadding
+        margin-bottom: 0px
+
 img
     width: 24px
     height: auto

src/renderer/layouts/DockableSidebar.vue

@@ -1,6 +1,23 @@
 <template>
-    <section>
-        <Logo />
+    <div>
+        <section class="handle">
+            <div @click="toggleMenuStatus" class="icon">
+                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
+                    <g>
+                    <g id="Menu_1_">
+                        <path d="M12.03,120.303h360.909c6.641,0,12.03-5.39,12.03-12.03c0-6.641-5.39-12.03-12.03-12.03H12.03
+                            c-6.641,0-12.03,5.39-12.03,12.03C0,114.913,5.39,120.303,12.03,120.303z"/>
+                        <path d="M372.939,180.455H12.03c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03
+                            S379.58,180.455,372.939,180.455z"/>
+                        <path d="M372.939,264.667H132.333c-6.641,0-12.03,5.39-12.03,12.03c0,6.641,5.39,12.03,12.03,12.03h240.606
+                            c6.641,0,12.03-5.39,12.03-12.03C384.97,270.056,379.58,264.667,372.939,264.667z"/>	
+                    </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
+                </svg>
+            </div>
+            <Logo :nopadding="true"/>
+        </section>
+        <section class="sidebar" :class="{'open': menuStatus === true}">
+            <Logo class="logo" />
             <MenuGroup>
                 <template v-slot:title>Menu</template>
                 <MenuItem to="/artists">
@@ -80,6 +97,7 @@
                 </MenuItem>
             </MenuGroup>
         </section>        
+    </div>
 </template>
 
 <script>
@@ -87,18 +105,50 @@ import MenuGroup from '../components/MenuGroup'
 import MenuItem from '../components/MenuItem'
 import projectPackage from '~/package.json'
 import Logo from '../components/Logo'
+import { mapActions, mapGetters } from 'vuex'
+
 export default {
   name: 'DockableSidebar',
   components: { MenuGroup, MenuItem, Logo },
   data: () => {
     return { version: projectPackage.version }
-  }
+  },
+  methods: {
+    ...mapActions(['toggleMenuStatus'])
+  },
+  computed: mapGetters(['menuStatus'])
 }
 </script>
 
 <style scoped lang="sass">
-section
+section.handle
+    position: absolute
+    left: 0
+    top: 0
     width: 100%
+    height: 64px
+    box-sizing: border-box
+    transition: transform 300ms
+    background-color: #fcfcfc
+    transform: translateY(-100%)
+    display: flex
+    align-items: center
+    padding: 0 1rem
+    .icon
+        margin: 0 10px
+        width: 24px
+        height: 24px
+        padding: 0.8rem
+        cursor: pointer
+        transition: background-color 200ms
+        border-radius: 100%
+        &:hover
+            background-color: rgba(black,0.05)
+        svg
+            width: 24px
+            height: 24px
+section.sidebar
+    width: 250px
     max-width: 250px
     min-height: 100vh
     padding: 2rem 2rem 0rem 2rem
@@ -107,6 +157,7 @@ section
     display: flex
     flex-direction: column
     overflow: auto 
+    transition: width 300ms,transform 300ms,padding 500ms
     .icon
         width: 18px
         height: auto
@@ -114,4 +165,17 @@ section
             fill: lighten(gray,20)
     .grow
         flex-grow: 1
+@media(max-width: 1000px)
+    section.sidebar
+        width: 200px
+        overflow: auto
+        padding: 1rem 1rem 0rem 1rem
+@media(max-width: 800px)
+    section.sidebar
+        transform: translateX(-100%)
+        width: 0
+        overflow: hidden
+        padding: 2rem 0rem 0rem 0rem
+    section.handle
+        transform: translateY(0%)
 </style>

src/renderer/store/modules/Counter.js

@@ -1,25 +0,0 @@
-const state = {
-  main: 0
-}
-
-const mutations = {
-  DECREMENT_MAIN_COUNTER (state) {
-    state.main--
-  },
-  INCREMENT_MAIN_COUNTER (state) {
-    state.main++
-  }
-}
-
-const actions = {
-  someAsyncTask ({ commit }) {
-    // do something async
-    commit('INCREMENT_MAIN_COUNTER')
-  }
-}
-
-export default {
-  state,
-  mutations,
-  actions
-}

src/renderer/store/modules/Sidebar.js

@@ -0,0 +1,26 @@
+const state = {
+  menu_open: false
+}
+
+const getters = {
+  menuStatus: (state) => state.menu_open
+}
+
+const mutations = {
+  TOGGLE_MENU (state) {
+    state.menu_open = !state.menu_open
+  }
+}
+
+const actions = {
+  toggleMenuStatus ({ commit }) {
+    commit('TOGGLE_MENU')
+  }
+}
+
+export default {
+  actions,
+  state,
+  mutations,
+  getters
+}