How to use the menubar.menubar function in menubar

'use strict'

const path = require('path')
const { menubar } = require('menubar')
const { ipcMain } = require('electron')

/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
  global.__static = path.join(__dirname, '/static').replace(/\\/g, '\\\\')
}

const mb = menubar({
  browserWindow: {
    transparent: true
  },
  // Note: Icon downloaded from https://icons8.com/icon/1935/display
  icon: path.join(process.cwd(), '/static/favicon/icon.png'),
  index: process.env.NODE_ENV === 'development'
    ? `http://localhost:9080`
    : `file://${__dirname}/index.html`
})

mb.on('ready', () => {
  console.log('Macas app is ready!')
})

ipcMain.on('quit-app', () => mb.app.quit())

//   notification.on("show", () => console.log("notification called"))
  //   notification.show();
  // }



  mainWindow = new BrowserWindow({
    show: false,
    width: 600,
    height: 820,
    webPreferences: {
      devTools: process.env.NODE_ENV === 'development' ? true : false
    }
  });

  const mb = menubar({
    show: false,
    browserWindow: {
      width: 600,
      height: 820,
    },
    index:`file://${__dirname}/app.html`,
    resizable: false
  });

  mb.on('ready', () => {
    console.log('Menubar app is ready.');
  });

const { menubar } = require("menubar");
const { exec } = require("child_process");
const { Menu } = require("electron");

const UPDATE_INTERVAL = 10000;

const mb = menubar({
  tooltip: "Remaining battery",
});

function getRemainingTime() {
  return new Promise((resolve, reject) => {
    exec('pmset -g batt|grep remaining|cut -d" " -f1,5', function(
      err,
      stdout,
      stderr
    ) {
      if (stdout) {
        if (/\d{1,2}:\d{1,2}/g.test(stdout) && !/^\s0:00/.test(stdout)) {
          resolve(String(stdout));
        } else {
          resolve('');
        }

const createAsync = () => {
  attachToMenubar = getPreference('attachToMenubar');
  if (attachToMenubar) {
    const menubarWindowState = windowStateKeeper({
      file: 'window-state-menubar.json',
      defaultWidth: 400,
      defaultHeight: 400,
    });

    mb = menubar({
      index: REACT_PATH,
      icon: path.resolve(__dirname, '..', 'menubarTemplate.png'),
      preloadWindow: true,
      showOnRightClick: true,
      tooltip: 'Singlebox',
      browserWindow: {
        x: menubarWindowState.x,
        y: menubarWindowState.y,
        width: menubarWindowState.width,
        height: menubarWindowState.height,
        webPreferences: {
          nodeIntegration: true,
          webSecurity: false,
          preload: path.join(__dirname, '..', 'preload', 'menubar.js'),
        },
      },

const createWindow = () => {
  const updaterEnabled = process.env.SNAP == null && !process.mas && !process.windowsStore;
  const attachToMenubar = getPreference('attachToMenubar');
  if (attachToMenubar) {
    mb = menubar({
      index: REACT_PATH,
      icon: path.resolve(__dirname, 'images', 'menubarTemplate.png'),
      preloadWindow: true,
      browserWindow: {
        alwaysOnTop: getPreference('alwaysOnTop'),
        width: 400,
        height: 500,
        minWidth: 400,
        minHeight: 500,
        webPreferences: {
          nodeIntegration: true,
          preload: path.join(__dirname, 'preload', 'menubar.js'),
        },
      },
    });

static setTrayWindow() {
        logger.info('Creating tray window.');
        /**
         * Docs:
         * https://github.com/maxogden/menubar
         */
        let icon = os.platform() === 'darwin' ? config.icon : config.iconBig;
        const url = config.isDev
            ? 'http://localhost:3000/#/trayApp'
            : `file://${__dirname}/index.html#/trayApp`;

        this.menubar = menubar({
            index: url,
            icon: icon,
            preloadWindow: true,
            showDockIcon: false,

            browserWindow: {
                webPreferences: {
                    zoomFactor: 1.0,

                    preload: preloadScript,
                },
                width: 500,
                height: 600,
            },
        });

const createAsync = () => {
  attachToMenubar = getPreference('attachToMenubar');
  if (attachToMenubar) {
    const menubarWindowState = windowStateKeeper({
      file: 'window-state-menubar.json',
      defaultWidth: 415,
      defaultHeight: 500,
    });

    mb = menubar({
      index: REACT_PATH,
      icon: path.resolve(__dirname, '..', 'menubar-icon.png'),
      preloadWindow: true,
      browserWindow: {
        x: menubarWindowState.x,
        y: menubarWindowState.y,
        width: menubarWindowState.width,
        height: menubarWindowState.height,
        minWidth: 415,
        minHeight: 500,
        webPreferences: {
          nodeIntegration: true,
          webSecurity: false,
          preload: path.join(__dirname, '..', 'preload', 'menubar.js'),
        },
      },

const createAsync = () => {
  attachToMenubar = getPreference('attachToMenubar');
  if (attachToMenubar) {
    const menubarWindowState = windowStateKeeper({
      file: 'window-state-menubar.json',
      defaultWidth: 400,
      defaultHeight: 400,
    });

    mb = menubar({
      index: REACT_PATH,
      icon: path.resolve(__dirname, '..', 'menubar-icon.png'),
      preloadWindow: true,
      browserWindow: {
        x: menubarWindowState.x,
        y: menubarWindowState.y,
        width: menubarWindowState.width,
        height: menubarWindowState.height,
        webPreferences: {
          nodeIntegration: true,
          preload: path.join(__dirname, '..', 'preload', 'menubar.js'),
        },
      },
    });

    const contextMenu = Menu.buildFromTemplate([

if (process.platform !== 'mac') {
      menuOptions.unshift({
        label: 'Toggle Window',
        click: () => {
          if (mb.window.isVisible()) {
            mb.hideWindow()
          } else {
            mb.showWindow()
          }
        }
      })
    }

    const contextMenu = Menu.buildFromTemplate(menuOptions)

    mb = menubar({
      browserWindow: {
        alwaysOnTop,
        transparent: true,
        backgroundColor: '#00FFFFFF',
        frame: false,
        resizable: false,
        fullscreenable: false,
        width: 320,
        height: 420,
        webPreferences: {
          preload: preloadPath
        },
        title: 'Grid Nano'
      },
      index: makePath(`${__dirname}/ui/nano.html`),
      showDockIcon: true,

<p style="margin: 10px; font-size: 12px;">Copyright © 2018 xxhomey19</p>
  `;

  aboutWindow.loadURL(`data:text/html;charset=utf-8, ${encodeURI(html)}`);
  aboutWindow.on('close', e =&gt; {
    aboutWindow.hide();

    e.preventDefault();
  });

  return aboutWindow;
};

let aboutWindow;

const mb = menubar({
  icon: path.join(app.getAppPath(), 'resources/menubarDefaultTemplate.png'),
  browserWindow: {
    alwaysOnTop: isDev,
    minWidth: 300,
    maxWidth: isDev ? undefined : 300,
    minHeight: 465,
    maxHeight: isDev ? undefined : 465,
    resizable: isDev,
    movable: false,
    webPreferences: { webSecurity: false },
  },
  preloadWindow: true,
});

const reload = () =&gt; {
  if (isDev) {