feat(context): add context menu

src/renderer/src/main.js

@@ -5,8 +5,20 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 
+import './utils/contextMenu';
+
 Vue.config.productionTip = false;
 
+/*
+Small plugin to support auto resizing before create a Vue
+You can use it like this in your components:
+{
+  electron: {
+    width: 100,
+    height: 100
+  }
+}
+*/
 const Electron = {
   install(Vue) {
     Vue.mixin({

src/renderer/src/utils/contextMenu.js

@@ -0,0 +1,47 @@
+const { remote } = window.require('electron');
+const { Menu, MenuItem } = remote;
+
+const menu = new Menu();
+let mousePosition = {
+  x: 0,
+  y: 0
+};
+
+// Add dec context menu
+if (process.env.NODE_ENV === 'development') {
+  menu.append(
+    new MenuItem({
+      label: 'Inspect Element',
+      click: e =>
+        remote
+          .getCurrentWindow()
+          .inspectElement(mousePosition.x, mousePosition.y)
+    })
+  );
+  menu.append(new MenuItem({ type: 'separator' }));
+}
+
+// Menu items -> https://electronjs.org/docs/api/menu-item
+menu.append(
+  new MenuItem({
+    label: 'MenuItem2',
+    type: 'normal'
+  })
+);
+
+window.addEventListener(
+  'contextmenu',
+  e => {
+    e.preventDefault();
+
+    mousePosition = {
+      x: e.x,
+      y: e.y
+    };
+
+    menu.popup({
+      window: remote.getCurrentWindow()
+    });
+  },
+  false
+);