Tray in Electron Js

• In Electron.js, a tray refers to a system tray or menu bar icon that provides quick access to your application from the desktop. It allows you to display a small icon and associated menu options in the taskbar or menu bar of the user's operating system.

• To implement the tray concept in Electron.js, you need to use the `tray` module provided by Electron.

Here's an example of how you can create a simple tray with a menu in Electron.js:

    const { app, Tray, Menu, BrowserWindow } = require('electron');

    const path = require('path');

    let tray = null;

    function createWindow() {

        let win = new BrowserWindow({

            width: 800,

            height: 600

        });

        win.loadFile('public/index.html');

        tray = new Tray(path.join(__dirname, './icon.png'));

        const handleTrayItemClick = (e) => {

            console.log("e", e)

        }

        // Create a context menu for the tray

        const contextMenu = Menu.buildFromTemplate([

            { label: 'Item 1', type: 'normal', click: (e) => handleTrayItemClick(e) },

            { label: 'Item 2', type: 'normal', click: (e) => handleTrayItemClick(e) },

            { type: 'separator' },

            { label: 'Quit', type: 'normal', click: () => app.quit() }

        ]);

        tray.setToolTip('This is my application.')

        // Set the tray's context menu

        tray.setContextMenu(contextMenu);

        // Handle clicking on the tray icon

        tray.on('click', () => {

            win.show()

        });

        win.on('minimize', () => {

            win.hide(); // Hide the window instead

        });

    }

    app.on('ready', () => {

        createWindow()

    });

    // Quit the app when all windows are closed

    app.on('window-all-closed', () => {

        if (process.platform !== 'darwin') {

            app.quit();

        }

    });

• In the example above, we first import the necessary modules: `app`, `Tray`, `Menu`, and `path`. The `app` module is used to control the lifecycle of your Electron application, while `Tray` is used to create and manipulate the tray icon. `Menu` is used to build the context menu for the tray, and `path` helps in resolving the path to the tray icon file.

• Inside the `createWindow` function, we create a new `Tray` instance by providing the path to the icon file. Then, we create a context menu using `Menu.buildFromTemplate()` and define menu items with their labels, types, and actions. In this example, we have two normal items, a separator, and a "Quit" item that calls `app.quit()` to exit the application.

• After creating the context menu, we set it as the tray's context menu using `tray.setContextMenu()`. We also handle the tray icon's click event using the `tray.on('click', ...)` function.

• Finally, we listen to the `window-all-closed` event of the `app` module to quit the application when all windows are closed, except on macOS (`darwin`), where applications typically stay active until explicitly quit by the user.

• Remember to replace `'icon.png'` with the actual path to your tray icon file.

• With this example, you should be able to create a basic tray implementation in your Electron.js application.