It’s time to implement an electron app navigation in the Electron tutorial app. Not the main kind of menubar but a left menu kind. For this step some use react or some other framework. But i wanted to keep it simple so this tutorial does not use a UI framework. This is the way the navigation is implemented in the Electron api demos application.
The name of the app is now called Electron tutorial app instead of electron hello world as it was before. I thought that name suits it better since it’s not only a hello world from now on. To get the source code of this application as it looks at the end of this tutorial you can download it from github.
1. Adding a design
First off the app looks pretty dull and does not have a menu. Since the design is out of scope for the tutorial we will use a template from HTML5up called hyperspace. Go ahead and download it.
Electron tutorial app - dull look
Once you’ve downloaded and unpacked hyperspace, copy the folder called assets into the root folder of our electron app. Then copy this HTML-markup into our index.html.
This is the hyperspace markup but with two differences
Internet explorer specific css has been removed. Electron uses chromium.
The import of jquery at the bottom has been changed
The media query that show the menu in hyperspace is defined to be over 1280 pixels. So go into our main.js file and go to line 13 and make it look like this:
We change the startup width to 1281, the startup height to 800 and setting the minWidth and minHeight to the same values. You can read more about the BrowserWindow Class and it’s properties at the official documentation.
Hyperspace is a single page layout. So it works as it is now. But that’s not what i’m going for. If you scroll the main window you can see all the pages in our app. And if you click on a menu item you will be scrolled down to that section. An app with a lot of menu items will create a lot of markup in index.html this way. In this step we’ll make all the menu items load it’s own .html file with the markup we want.
2.1 Extract sections
Create a new folder called sections and add four new files to it that are called: getintouch.html, welcome.html, whatwedo.html and whoweare.html
2.2 Empty index.html wrapper
Now the sections are extracted into their own respective files we can empty the div with the id wrapper in index.html. This is not the full index.html, only what the wrapper looks like. the HTML above and under should be left as is.
3. Preparing the menu and importing sections
In index.html there is a navigation in the sidebar section. Update the anchor tags to look like this:
3.2 Importing section html files
4. Making the menu do something
Add a new script to the assets/js folder called menu.js and import in in index.html with the require function.
And now to the contents of menu.js:
Lets go trough it. Start by looking in the init() function. This function will run when the document is loaded. It calls importSectionsToDOM(), setMenuOnClickEvent() and showStartSection().
This function loads all the rel=”imports” that we added to the head section in index.html and adds it to the div with id #wrapper in index.html.
This function adds an eventlistener and looks for events where the data attribute section is set. If it is it calls hideAllSections() and showSection(event). More on these soon.
We need to show a section when the app is started the first time. That is what this function does. Line 36 make sure that the first menu item is clicken, 37 and 38 makes the start section show.
This function is called before a new sections is shown. As the name hints it hides all the other sections so they are not in the way of the one that is about to show.
If the user has clicked a menu item this function will be called on line 24. it takes the id of the section to be shown and uses jquerys show to display it.
This makes our menu work. But the hyperspace template needs some updates to make it work better.
5. Updating hyperspace to work with our menu
Hyperspace uses sass so we’ll continue to do that. If you don’t want to do that. you can do the changes directly to assets/css/main.css or just download the css from the repo and replace the your own file with it.
5.1 Adding config.rb
Add this content to a file and name it config.rb to get the correct paths to sass files. Save it in the same directory as index.html
5.2 Updating some styles
open the file assets/sass/components/_section.scss and add this:
Next go into assets/sass/layout/_intro.scss and change #intro to .intro and add .inner:
Hyperspace uses scrollex on some pages, that does not work to well now when we split the sections to separate files. open up assets/js/main.js then go to line 149 and comment out that function all the way to line line 185:
Thats it for this short(oh my satan it’s to long!) tutorial.