Electron.js kullanıyorsanız uygulamanız için özel bir "System Bar" hazırlamak uygulamayı görsel olarak daha çekici hale getiriyor. Ben her hazırladığım uygulamalarda mutlaka bu alanı da tasarıma göre özelleştiriyorum. Hazır nazır el altında bulunması adına buradan da yayınlamak istedim.

Vue Component

System Bar için componentimizi oluşturalım ve aşağıdaki şekilde düzenleyelim.

<template>
  <q-header class="titlebar bg-accent">
    <q-toolbar>
      <q-toolbar-title
        class="flex items-center no-wrap text-body1 text-weight-medium text-primary"
      >
        <q-icon name="fingerprint" left size="md" />
        Desktop App
      </q-toolbar-title>
      <q-space></q-space>
      <q-btn
        round
        size=".53rem"
        color="primary"
        unelevated
        class="titlebar-button q-mr-sm"
        @click="minimizeWindow"
      >
        <q-icon name="remove" class="text-weight-bold"></q-icon>
      </q-btn>
      <q-btn
        round
        size=".53rem"
        color="primary"
        unelevated
        class="titlebar-button q-mr-sm"
        @click="maximizeWindow"
      >
        <q-icon
          v-show="!isMaximized"
          name="filter_none"
          class="text-weight-bold"
        ></q-icon>
        <q-icon
          v-show="isMaximized"
          name="crop_square"
          class="text-weight-bold"
        ></q-icon>
      </q-btn>
      <q-btn
        round
        size=".53rem"
        color="primary"
        unelevated
        class="titlebar-button"
        @click="closeWindow"
      >
        <q-icon name="close" class="text-weight-bold"></q-icon>
      </q-btn>
    </q-toolbar>
  </q-header>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Platform } from 'quasar';

declare global {
  interface Window {
    WindowAPI: {
      isMaximized: () => boolean;
      minimize: () => void;
      toggleMaximize: () => void;
      close: () => void;
    };
  }
}

const isMaximized = Platform.is.electron ? window.WindowAPI.isMaximized : () => false;

export default defineComponent({
  name: 'SystemBar',

  data: () => ({
    isMaximized: !isMaximized(),
    restore: false
  }),

  methods: {
    minimizeWindow() {
      window.WindowAPI.minimize();
    },
    maximizeWindow() {
      this.isMaximized = isMaximized();

      window.WindowAPI.toggleMaximize();
    },
    closeWindow() {
      window.WindowAPI.close();
    }
  }
});
</script>

<style scoped>
.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

.titlebar-button {
  -webkit-app-region: no-drag;
}
</style>

Burada CSS kodları önemli bir nokta çünkü doğru ayarlanmazsa ekleyeceğinizi çeşitli işlevleri yerine getiremezsiniz. Mesela -webkit-app-region: drag; özelliği üzerine mouse tıklayıp tuttuğunuzda penceri sürükleme işlemini gerçekleştiriyor. -webkit-app-region: no-drag; özelliği ise istediğimiz alanları veya işlevleri(buton, link) sürükleme eyleminin dışında bırakıyoruz.

Disable Default Frame

Varsayılan olarak sisteme ait bar’ı kaldıracağız. src-electron/electron-main.js içerisinde mainWindow = *new* BrowserWindow({ tanımı yapılan alana frame: *false* değerini ekliyoruz.

function createWindow() {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon
    width: 1500,
    height: 850,
    minWidth: 450,
    // `frame` option,
    frame: false,
    useContentSize: true,
    webPreferences: {
    ...

Electron Middleware

Sonrasında src-electron/electron-preload.js içerisine electron. Burada gerçekleştirilen işlemler Electron ile Vue arasında bir middleware olarak yorumlanıyor. contextBridge üzerinden Vue projemiz üzerinde kullanacağımız yeni bir nesne sağlıyoruz.

import { BrowserWindow } from '@electron/remote';

// Window actions
contextBridge.exposeInMainWorld('WindowAPI', {
  isMaximized() {
    const win = BrowserWindow.getFocusedWindow();

    return win?.isMaximized();
  },

  minimize() {
    BrowserWindow.getFocusedWindow()?.minimize();
  },

  toggleMaximize() {
    const win = BrowserWindow.getFocusedWindow();

    if (win?.isMaximized()) {
      win.unmaximize();
    } else {
      win?.maximize();
    }
  },

  close() {
    BrowserWindow.getFocusedWindow()?.close();
  }

});

Böylelikle uygulamamızdaki System Bar kısmını özelleştirmiş oluyoruz.