Global toolbar in Ionic 4 (React) overlapping IonContent

Question

I am just getting to grips with Ionic from a React and Flutter background.

I am trying to achieve a global navigation top bar using Ionic 4 react. The only documentation that looks like it might work is the IonHeader.

I have tried to add this to my root App.tsx component but this does not seem to work as expected. The height of the Toolbar component is not recognised by the other components. I.e., the toolbar overlaps the page content.

Attempt at a global Toolbar from App.tsx:

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { 
    IonApp,
    IonRouterOutlet,
    IonHeader,
    IonToolbar,
    IonTitle
 } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import DashboardA from './containers/Dashboards/DashboardA';
import DashboardB from './containers/Dashboards/DashboardB';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

import styled from 'styled-components';

const App: React.FC = () => (
<div>
    <IonApp>
  <IonHeader>
      <IonToolbar>
        <IonTitle>My Global Navigation</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonReactRouter>
        <IonRouterOutlet>
        <Route
            path="/DashboardA"
            component={DashboardA}
            exact={true}
        />
        <Route
            path="/DashboardB"
            component={DashboardB}
            exact={true}
        />
        <Route
            exact
            path="/"
            render={() => <Redirect to="/DashboardB" />}
        />
        </IonRouterOutlet>
    </IonReactRouter>
    </IonApp>
</div>
);

export default App;

Dashboard A Component:

import React, { Component } from 'react';
import {
IonCard,
IonCardContent,
IonCardHeader,
IonCardTitle,
IonContent,
IonGrid,
IonRow,
IonCol
} from '@ionic/react';

class DashboardA extends Component {
render() {
    return (
    <IonContent padding-start="150">
        <IonGrid>
        <IonRow>
            <IonCol size-xs="12" size-md="6">
            <IonCard>
                <IonCardHeader>
                <IonCardTitle>Thing</IonCardTitle>
                </IonCardHeader>

                <IonCardContent>BAR CHART</IonCardContent>
            </IonCard>
            </IonCol>
            <IonCol size-xs="12" size-md="6">
            <IonCard>
                <IonCardHeader>
                <IonCardTitle>Other Thing</IonCardTitle>
                </IonCardHeader>

                <IonCardContent>BAR CHART</IonCardContent>
            </IonCard>
            </IonCol>
        </IonRow>
        </IonGrid>
    </IonContent>
    );
}
}

export default DashboardA;

The only workaround I can see is to have a navigation bar that I import and use in the IonHeader of each page but things seems really clunky. Is there a way to have one reference to the toolbar in App.tsx? I appreciate there is the obvious CSS hack to pad but I do not want to go down that route if there is a "proper" way of doing thins.

Thanks!

score 0 · Answer 1 · answered Jan 29 '20 at 15:46

Having spoken to one of the developer advocates I think that it is fair to say that what I was trying to achieve is an Ionic anti pattern.

The navigation has been designed to be added to each and in the .

So you can just have a navigation components and import where you need it.

Global toolbar in Ionic 4 (React) overlapping IonContent

1 Answers1