Display Header in React Web App

A Noob Meets Wep Apps, Episode 7

In previous episode I introduced code splitting without adding any feature. Now it’s time to move on and to code an header component with logo, title and navigation commands.

Layout component

It is useful to create a general layout component to make sure every screen have same UI structure.

This is not the correct structure: in actual header I will display poll title, so I need to ensure that poll state will be on top of future header component. <Layout> must be moved from App level to routes:

Nothing changes in UI, but now you have poll available when you define <Layout> and, so, <Header>.

Inserting logo

Define a module in features/header and move Header.tsx inside it. Do the same for Layout. We will use two new Bulma components: icon and level. Let’s add them in global index.scss file:

Create features/layout/index.scss to reduce padding:

We need to elaborate features/header/component.tsx to include a centered logo image. Accessibility text is taken from i18n service prop.

Thanks to import logo from './logo_h34@4x.png', Webpack correctly understands to include image file inside final bundle. logo is the path to reach the image. Note that I’ve included a 4x version of my logo in order to make the logo to display well on hi-resolution displays.

Display a title

We add a prop to Header to display a title under app logo.

We just need to add some style and we are good.

If you refresh, you will notice that, at first, header is not displayed. There are two places where Layout is not used: Suspense fallback for LazyFirebase deferred load; authentication inside API component.

Display a back navigation button

I would like to display a back button to return from poll detail to highlighted polls.

Firstly, I have to render an optional left item inside Header component.

Then I implement a basic borderless button, with an optional icon:

I create module in features/navigation where I define an item that describes a screenful of content. What is more, I declare a more handy BackButton component:

Navigation item is consumed by Poll.route() in order to show a left item inside Header:

Back item is passed when you invoke HighlightedPolls.route() inside App.tsx:

Back button is displayed only when user comes from highlighted polls, not directly from URL

Checking larger sizes

If you enlarge browser window, you will notice logo is stretching. It’s easy to fix: you only need to add a rule inside features/header/index.scss:

Image is ok but, especially at large widths, layout is quite strange. I want title to be always aligned to logo. A solution — not ideal but quite effective — is to create two columns: the former to contain back button, the latter to host logo and title, vertically aligned.