Custom Window With (min,max,close buttons) In Electron.Net App with Asp.net or Blazor

I have Converted My Asp.Net Core / Blazor Application To Electron App. But I NeedFrameless Windows So That I can Customize My Application Window

I am Using this Code To Make It Frameless

 public async void Bootstrap()
    {
        var options = new BrowserWindowOptions
        {
            //Width = 1200,
            //Height = 600,
            //MinWidth = 940,
            //MinHeight = 560,
            Frame = false,

            WebPreferences = new WebPreferences
            {
                ContextIsolation = true,
                DevTools = true,
                WebSecurity = false,
            }
        };
        await Electron.WindowManager.CreateWindowAsync(options);
    }

Now I have create a Custom Html file here

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Electron Frameless Window</title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
        }

        #title-bar {
            -webkit-app-region: drag;
            height: 40px;
            text-align: center;
            line-height: 40px;
            vertical-align: middle;
            background-color: #B4C4C7;
            padding: none;
            margin: 0px;
        }

        #title {
            position: fixed;
            top: 0px;
            left: 6px;
            color: white;
        }

        #title-bar-btns {
            -webkit-app-region: no-drag;
            position: fixed;
            top: 0px;
            right: 6px;
        }
    </style>
</head>
<body>
    <div id="title-bar">
        <div id="title">
            <span style="vertical-align: middle;">Menu</span>
            Title Bar
        </div>
        <div id="title-bar-btns">
            <button id="min-btn">-</button>
            <button id="max-btn">+</button>
            <button id="close-btn">x</button>
        </div>
    </div>
    <div style="text-align:center;">
        <h4>Page Data Will Be Loaded Here</h4>

    </div>

</body>
</html>

But I am not understanding how to add functionality to these buttons please help me solve my problem.

Solution

Use Latest Version of ElectronNet From Here Or From Nuget Then

public async void Bootstrap()
{
    var options = new BrowserWindowOptions
    {
       
        Frame = false,

        WebPreferences = new WebPreferences
        {
            ContextIsolation = true,
            DevTools = false,
            WebSecurity = false,
            EnableRemoteModule = true
        }
    };
    await Electron.WindowManager.CreateWindowAsync(options);
}

Then In Your Layout.Cshtml Create Three Button

    <button id="minimize" onclick="minimizeWindow()">Min Window</button>
    <button id="maximize" onclick="maximizeWindow()">Max Window</button>
    <button id="close" onclick="closeWindow()">Close Window</button>

And Use JavaScript Code

const {remote} = require('electron');
const getWindow = () => remote.BrowserWindow.getFocusedWindow();

    function closeWindow () {
        getWindow().close();
    }

    function minimizeWindow () {
        getWindow().minimize();
    }

    function maximizeWindow () {
        const window = getWindow();
        window.isMaximized() ? window.unmaximize() : window.maximize();
    }

Build the App ie It.