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.
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:
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
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.
import logo from './firstname.lastname@example.org', 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
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
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
Navigation item is consumed by
Poll.route() in order to show a left item inside
Back item is passed when you invoke
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
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.