fix(sidebar): scroll when there are a lot of languages

README.md

@@ -52,7 +52,7 @@ npm run build
 npm test
 
 # lint all JS/Vue component files in `src/`
-npm run lint
+npm run eslint
 
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "code-notes",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "author": "Laurent THIEBAULT <thiebault.laurent@gmail.com>",
   "description": "A simple code snippet manager for developers built with Electron 🚀",
   "license": "MIT",

src/renderer/Sidebar.vue

@@ -5,47 +5,59 @@
     </p>
     <ul class="menu-list">
       <li>
-        <a :class="{'is-active': languageSelected === 'all'}" @click="selectLanguage('all')">All <b-tag class="is-pulled-right" type="is-dark">{{totalFiles}}</b-tag></a>
+        <a :class="{'is-active': languageSelected === 'all'}" @click="selectLanguage('all')">All
+          <b-tag class="is-pulled-right" type="is-dark">{{totalFiles}}</b-tag>
+        </a>
       </li>
       <li v-for="(list, value) in Array.from(languages)">
-        <a :class="{'is-active': languageSelected === list[0]}" @click="selectLanguage(list[0])">{{list[0] | capitalize}} <b-tag class="is-pulled-right" type="is-dark">{{list[1]}}</b-tag></a>
+        <a :class="{'is-active': languageSelected === list[0]}" @click="selectLanguage(list[0])">{{list[0] | capitalize}}
+          <b-tag class="is-pulled-right" type="is-dark">{{list[1]}}</b-tag>
+        </a>
       </li>
     </ul>
   </aside>
 </template>
 
 <script>
-import Vuex from 'vuex';
+  import Vuex from 'vuex';
+  // eslint-disable-next-line
+  import { screen } from 'electron';
 
-export default {
-  name: 'cn-sidebar',
-  data() {
-    return {};
-  },
-  methods: {
-    selectLanguage(language) {
-      this.$store.dispatch('selectLanguage', language);
+  export default {
+    name: 'cn-sidebar',
+    data() {
+      return {
+      };
     },
-  },
-  computed: {
-    ...Vuex.mapGetters(['languages', 'notes', 'languageSelected', 'totalFiles']),
-  },
-};
+    methods: {
+      selectLanguage(language) {
+        this.$store.dispatch('selectLanguage', language);
+      },
+    },
+    computed: {
+      ...Vuex.mapGetters(['languages', 'notes', 'languageSelected', 'totalFiles'])
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-aside {
-  position: fixed;
-  top: 48px;
-  width: 22%;
-  margin-top: 24px;
+  aside {
+    position: fixed;
+    top: 48px;
+    width: 22%;
+    margin-top: 24px;
+
+    ul {
+      overflow: auto;
+      max-height: 77vh;
 
-  li {
-    margin: 5px 0;
+      li {
+        margin: 5px 0;
 
-    a {
-      padding-bottom: 11px !important;
+        a {
+          padding-bottom: 11px !important;
+        }
+      }
     }
   }
-}
 </style>