Now that we have a draggable window and non-draggable menu buttons, let's add a button so that we can take a screenshot:

1. Update the App.js code and append a new button component with the icon value of camera and with the text Snip, as shown in the following example:

      <Navbar>
              <Navbar.Group align={Alignment.LEFT}>
                <Navbar.Heading>Electron Snip</Navbar.Heading>
                <Navbar.Divider />
                <Button className="bp3-minimal" icon="settings" 
                    text="Settings" />
                <Button className="bp3-minimal" icon="help" text="About" />
                <Button className="bp3-minimal" icon="camera" 
                                                      text="Snip"/>
              </Navbar.Group>
      </Navbar>

2. We also need to add an onSnipClick function stub. This is going to handle our Snip button clicks.
3. For now, let's create a simple console.log call to ensure that the handler works at runtime. We are going to get back to the real implementation shortly:

      const onSnipClick = () => {
        console.log('todo: making screenshot');
      };

4. The complete implementation of the App.js file should now look as follows:

      import React from 'react';
      import './App.css';
      import { Navbar, Button, Alignment, Icon } from '@blueprintjs/core';
      
      function App() {
        const onSnipClick = () => {
          console.log('todo: making screenshot');
        };
      
        return (
          <div className="App">
            <Navbar>
              <Navbar.Group align={Alignment.LEFT}>
                <Navbar.Heading>Electron Snip</Navbar.Heading>
                <Navbar.Divider />
                <Button className="bp3-minimal" icon="settings" 
                    text="Settings" />
                <Button className="bp3-minimal" icon="help" text="About" />
                <Button
                  className="bp3-minimal"
                  icon="camera"
                  text="Snip"
                  onClick={onSnipClick}
                />
              </Navbar.Group>
            </Navbar>

            <main className="App-main">
              <Icon icon="camera" iconSize={100} />
              <p>Electron Snip</p>
            </main>
          </div>
        );
      }

      export default App;

Now, we are going to focus on the onSnipClick function's implementation.