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.
Just in case one doesn’t know, keep the .css files the same name as the component it is styling. This helps with organization and where styling needs to be updated.
Since we are using TypeScript, the file needs to be a .tsx file. TypeScript will then convert and add the .js files itself.
In the Navbar.tsx component, lets start by adding the following code to create the links to the Home page and the Counter page.
React is imported and react-router-dom to create the links. We import the already created routes file to show where the link needs to go, one for HOME and one for COUTNER. Then we need to import our CSS by importing the Navbar.css file. You could use other names other than styles but I did this since it was displayed this way on most of the examples I found.
A button is added inside the <Link> element so that when we can display a button rather than just text.
Now to add some quick styling so when we add at a minimum see the Navbar.tsx component when it’s displayed. Lets add the css to Navbar.css.
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.
Before we can see the Navbar we need to add it to display on every page of the app. We can do this by adding the Navbar component to the app/Routes.tsx file.
Here we imported the Navbar.tsx file and created the self-closing element <Navbar /> just inside the <App> element and before <Switch>. This allows the Navbar to be displayed on every page rather than just one. Now lets see what our Navbar looks like right now.
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.
Add the following styling for now to make our buttons look the same. I didn’t like having the opacity set on links so I removed the opacity lines from the “a” tag and the “a.hover” tag.
Keep in mind this is only to keep all the buttons to look the same globally. Try not setting positioning options here unless it would be the same for most if not all the app.
Now to position the buttons in the middle of the Navbar we can use FlexBox. Modify the app/Navbar.css file.
Now we should be seeing the Navbar on the top of both the Home page and the counter page.
Adding New Page Component
Now that we have the Navbar in place, lets add another page for display!
Let start by creating our new page components. This will be a form component page but I will discuss the form setup in a different instruction set. The Electron-React Boilerplate v1.3.1 now has the components stored in app/features/componentName/files. This will help with the organization of new components instead of originally having them all stored in the app/components folder.
Here we will create a new folder formTypes and add our component files FormTypes.tsx and FormTypes.css. We will also need to create the container for the FormTypesPage.tsx component in app/containers.
Lets update app/containers/FormTypesPage.tsx to grab and display the app/features/formTypes/FormTypes.tsx component.
Then update app/features/formTypes/FormTypes.tsx to return a text component for display.
Now we need to add the route and button to get to our new component page. First we need to add the FormTypes route to the app/constants/routes.json file.
Next add the path in app/Routes.tsx after we import the FormTypesPage.tsx. Electron-React Boilerplate v1.3.1 has updated to use Code-Splitting for adding linked routes. This means we need to create a the Lazy functions to pull in the container and add to the route. I added the LazyFormTypesPage and FormTypesPage functions and then I was able to add the FORMTYPES route.
Now we can add a button to open our new Form Types Page on app/components/Navbar.tsx.
Finally, we need to update the CSS so we can display the FormTypes component. As an example, update app/features/formTypes/FormTypes.css .
You should now be able to use the Navbar to open all three pages in the application and when you click on the the Form Types Navbar button you should see the display look like this.
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.