feat: add vibrancy sidebar for macos

package.json

@@ -240,7 +240,7 @@
     "css-loader": "^5.2.4",
     "css-minimizer-webpack-plugin": "^3.0.0",
     "del": "^6.0.0",
-    "electron": "^11.4.5",
+    "electron": "^11.4.7",
     "electron-builder": "22.10.5",
     "electron-builder-notarize": "^1.2.0",
     "electron-devtools-installer": "^3.2.0",

src/main/ui/WindowManager.js

@@ -11,6 +11,9 @@ const defaultBrowserOptions = {
   show: false,
   width: 1024,
   height: 768,
+  vibrancy: 'ultra-dark',
+  visualEffectState: 'active',
+  backgroundColor: is.macOS() ? '#00000000' : '#FFF',
   webPreferences: {
     nodeIntegration: true
   }
@@ -87,8 +90,7 @@ export default class WindowManager extends EventEmitter {
         contextIsolation: false,
         nodeIntegration: true,
         nodeIntegrationInWorker: true
-      },
-      hasShadow: !is.macOS()
+      }
     })
 
     const bounds = this.getPageBounds(page)

src/renderer/components/Aside/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-aside width="78px" :class="['aside', 'hidden-sm-and-down', { 'draggable': asideDraggable }]">
+  <el-aside width="78px" :class="['aside', 'hidden-sm-and-down', { 'draggable': asideDraggable }]" :style="vibrancy">
     <div class="aside-inner">
       <mo-logo-mini />
       <ul class="menu top-menu">
@@ -43,6 +43,13 @@
       }),
       asideDraggable () {
         return is.macOS()
+      },
+      vibrancy () {
+        return is.macOS()
+          ? {
+            backgroundColor: 'transparent'
+          }
+          : {}
       }
     },
     methods: {

src/renderer/pages/index/main.js

@@ -1,6 +1,5 @@
 import is from 'electron-is'
 import { ipcRenderer } from 'electron'
-import { getCurrentWindow } from '@electron/remote'
 import Vue from 'vue'
 import VueI18Next from '@panter/vue-i18next'
 import { sync } from 'vuex-router-sync'
@@ -99,7 +98,6 @@ function init (config) {
 
   setTimeout(() => {
     loading.close()
-    getCurrentWindow().setHasShadow(true)
   }, 400)
 }