Electron-React Boilerplate: Creating a Simple Navbar and Adding A Page.

Using the Electron-React Boilerplate v1.3.1, I will show how to create a simple Navbar and how to display it on all pages. I will include CSS for the Navbar buttons and the the display of the Navbar. Next I’ll show a step by step instruction on how to add a new page in addition to the counter and home page.

Setup Navbar Component

First we need a component to create the Navbar. To do this we will create a component file in app/components and name it Navbar.tsx. While we are at it lets create the CSS file in the same location and name it Navbar.css.

Navbar Files
Navbar Component

NOTE:

The cascading order of the CSS selectors matter and could cause errors when the app builds. I was able to fix this by adding stylelint to my VS Code IDE. This will help show any selectors that are out of order and where they should be to fix them.

Navbar Quick Styling
App Component — Add Navbar
Navbar Starting Display

Navbar and Global CSS Styling

Not very pretty at the moment but lets start fixing things with the buttons. Instead of having to style the buttons on every style sheet for each component, we can update the buttons styling once so all buttons look the same. To do this we modify the app/app.global.css file. The styling with all button elements will be apply globally instead of at a component level.

App Global Styling for Buttons
Navbar Final Styling
Navbar Final Styling

Adding New Page Component

Now that we have the Navbar in place, lets add another page for display!

Form Types Page File Setup
Form Types Display Page
Form Types Testing Setup
Added Route String
Added Route
Navbar Added Link
Form Types Page Styling
Form Types Display Page

Conclusion

You now should be able to add new pages and button links to those pages on the Navbar. The examples above show how global and component styling should be used. There is obviously some changes that can be made to the Home page and the Counter page but can left this out since this was a bare bones instructions on adding a Navbar. At this point you can update the Navbar as you see fit.

I am an electrical engineer that enjoyed a programming boot camp for web development. I learned the Electron-React Boiler plate to design and create a work app.