title: Electron v1.7: Close, Maximize and Maximize
body: <p>I am trying to build a Simple App having Close, Maximize and Minimize buttons.</p>
  
  <p>The problem with the application is that the Close, Maximize and Minimize are not working properly. The <code>console.log()</code> when the buttons are clicked, is functioning properly and displaying the proper messages, however, it is not performing the actual Close, Maximize and Minimize operations. </p>
  
  <p>Also, not that in the CSS, I have added <code>-webkit-app-region: drag;</code> for the header but added <code>-webkit-app-region: no-drag;</code> for options, i.e., buttons.</p>
  
  <p>Attaching a screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/Uoov8.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Uoov8.jpg" alt="enter image description here"></a></p>
  
  <p>The content of driver index.js is: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const {app, BrowserWindow} = require('electron');
  const url = require('url');
  
  let win = null;
  
  function boot() {
      win = new BrowserWindow({
          width: 640,
          height: 480,
          frame: false
      });
      win.loadURL(`file://${__dirname}/index.html`);
      win.on('closed', () =&gt; {
          win = null;
      });
  }
  
  app.on('ready', boot);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-start;
      background: #353535;
      color: black;
      align-self: stretch;
      -webkit-app-region: drag;
  }
  
  #content {
      display: flex;
      height: 100vh;
      flex-direction: column;
      background: black;
      align-items: center;
  }
  
  .option {
      color: white;
      padding: 10px 25px;
      font-size: 16px;
      cursor: pointer;
      -webkit-app-region: no-drag;
      
  }
  
  .option:hover {
      background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;
          &lt;title&gt;Sample App&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="content"&gt;
              &lt;header&gt;
                  &lt;div class="option" id="close"&gt;X&lt;/div&gt;
                  &lt;div class="option" id="minimize"&gt;-&lt;/div&gt;
                  &lt;div class="option" id="maximize"&gt;=&lt;/div&gt;         
              &lt;/header&gt;               
          &lt;/div&gt;
          
          &lt;script src="js/script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, the contents of script.js is</p>
  
  <pre><code>    const {remote} = require('electron');
  
  document.getElementById('close').addEventListener('click', closeWindow);
  document.getElementById('minimize').addEventListener('click', minimizeWindow);
  document.getElementById('maximize').addEventListener('click', maximizeWindow);
  
  
  
  function closeWindow () {        
      var window = remote.getCurrentWindow();
      window.close();
  }
  
  function minimizeWindow () {   
      var window = remote.getCurrentWindow();
      window.minmize();
  }
  
  function maximizeWindow () {
      var window = remote.getCurrentWindow()
      window.isMaximized() ? window.unmaximize() : window.maximize();
  }
  </code></pre>