How to have a header in one side of the IonSplitPane

Hi,

I’m trying to have my app diagramed as following.

image1342×866 26.3 KB

I don’t how to have in the right pane my fixed header, and I haven’t been able to find anything like this.

Here is my App.tsx where my router is and where I believe this should come together.

As I’m using styled component you will see some different ionic component names but the functions remain the same.

My question is, where and how could I add my <MainHeader /> component.

<StyledIonApp>
        <IonReactRouter>
          <StyledIonSplitPane contentId={"main"}>
            <MainMenu />
            <IonRouterOutlet id={"main"}>
              <Route path="/home" component={Home} exact />
              <Route path="/login" component={LoginPage} exact />
              <Route path="/app/login/email-confirmation" exact render={() => <EmailConfirmationPage />} />
              <Route path="/app/embed/:videoSlug" exact render={() => <VideoPlayerEmbed />} />
              <Route path="/iframe/:videoSlug" exact render={() => <VideoPlayerIframed />} />
              <Route path="/video-player/:videoSlug" exact render={() => <VideoPlayerPage />} />
              <Route path="/meetings" exact render={() => <MeetingRepository />} />
              <Route path="/profile" exact render={() => <UserProfile />} />
              <Route exact path="/" render={() => <Redirect to="/home" />} />
            </IonRouterOutlet>
          </StyledIonSplitPane>
        </IonReactRouter>
      </StyledIonApp>

1 post - 1 participant

Read full topic