Why can't I click on any buttons?

Question

Im not understanding why it is I cannot seem to click on the menu I made.

I am slightly new to electrons, but it seems that when I add my own HTML script, say in a webview, it works but then when I add a <script> or <link> or just in general, the buttons or clicking on anything will not work. I am speaking of the menu bar at top right corner. Some help shed some knowledge in this old buzzard please. [Here is a link to a 30 second demo][1] if what I am talking about.

Ive tried almost everything from stripping whats not needed down to the css and still nothing works. Im trying to get this to work for my electron app using

my electronjs here

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css'>
    <link rel="stylesheet" href="../assets/css/style.css">
                <!--Navbar -->
                <nav class="mb-4 navbar navbar-expand-lg navbar-dark unique-color-dark">
                    <a class="navbar-brand" href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" alt=""></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4" aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent-4">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#"><i class="fa fa-heart"></i> Follow <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><i class="fa fa-thumbs-up"></i> Collaboration</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-newspaper-o"></i> Media </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-cyan" aria-labelledby="navbarDropdownMenuLink-4">
                                    <a class="dropdown-item" href="#">Facebook</a>
                                    <a class="dropdown-item" href="#">Instagram</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </nav>
                <!--/.Navbar -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js'></script>
    <webview src ="https://mdbootstrap.com/products/jquery-ui-kit/" style ="width:100%; height:100%;"></webview>

    <script type = "text/javascript">
      // Event handlers for loading events.
      // Use these to handle loading screens, transitions, etc
      onload = () => {
         const webview = document.getElementById('foo')
         const indicator = document.querySelector('.indicator')

         const loadstart = () => {
            indicator.innerText = 'loading...'
         }

         const loadstop = () => {
            indicator.innerText = ''
         }

         webview.addEventListener('did-start-loading', loadstart)
         webview.addEventListener('did-stop-loading', loadstop)
      }

and my HTML file here

const { app, BrowserWindow } = require('electron');
    const path = require('path');
    // This will work in a renderer process, but be `undefined` in the
    // main process:
    const { remote } = require('electron')

    let mainWindow = ({ backgroundColor: '#2e2c29' });
    // let secondWindow;

    const createWindow = () => {

      mainWindow = new BrowserWindow({
        width: 1260,
        height: 850,
         nodeIntegration: true,
        title: "MDB: Desktop",
        show: true,
        // icon: path.join(__dirname, 'assets/img/app.png')
      });

      mainWindow.loadURL(path.join(__dirname, 'src/app.html'));

      mainWindow.on('ready-to-show', () => {
        mainWindow.show()
      });

    // Disable Default Menubar
     mainWindow.setMenu(null);

      mainWindow.on('closed', () => {


        mainWindow = null;
      });
    };

    app.on('ready', createWindow);

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

      if (process.platform !== 'darwin') {
        app.quit();
      }
    });

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

      if (mainWindow === null) {
        createWindow();
      }
    });

Nothing Ive tried seems to work and it seems like that on other apps ive tried creating too using implementing HTML like a normal web page. Heres a 20 second video showing in detail https://www.dropbox.com/s/l1fc2tl1hwh1n84/7SKe69ttq4.mp4?dl=0