Building a sidebar navigation in a Ionic Vue app

Ionic Framework Ionic Vue
#1

Hello there,

Trying to get into Ionic by building the sidebar of our community. The sidebar, on all devices / screen sizes, should open by clicking a hamburger icon on the top left and slide in from the left.

I have already defined some routes as described in the documentation. They point the view components, which in turn import the components that each view is composed of. So far, so simple.

To build the sidebar menu, should I now use

  1. ion-menu
  2. ion-nav / ion-nav-link
  3. ion-router-link

or a combination of all 3? The code examples, ie ionic-docs/index.html at e2503f52ed26228da9989ba43a764c2867c2fd2d · ionic-team/ionic-docs · GitHub, seem to be written in plain Javascript.

Thanks.

1 Like
#2

why don’ t you start with the template that is generated from the CLI instead of building it from scratch?

Screen Shot 2021-02-18 at 11.53.45 AM
Screen Shot 2021-02-18 at 11.53.45 AM1736Ă—584 122 KB

1 Like
#3

Thanks, I had a look at the sidemenu project.

Generally speaking, should <ion-router-outlet> be used to only display the content area? We were thinking about replacing the entire view for increased flexibility with layout changes, so the template of our App.vue currently looks like this:

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

Could this lead do a less “native app” like feeling, ie. performance issues? Since with each navigation link, the entire screen would be replaced so to speak, instead of just the content area.

#4

Well, nevermind. I can’t even get a simple menu toggle to work:

<template>
  <IonApp>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button auto-hide="false" menu="testmenu"></ion-menu-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-menu menu-id="testmenu" content-id="mycontent">
      <ion-content>
        <ion-list>
          <ion-item>
            <ion-label>Pokémon Yellow</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-content id="mycontent">Test</ion-content>
  </IonApp>
</template>

Which gives me an error in the console:

Menu: must have a "content" element to listen for drag events on.

Researching this gives me some posts about angular projects and ion-router-outlet which I’m not using obviously.

Another confusing thing is that the docs state that there should be only one ion-content in each view, but in the same docs there are code examples with multiple ion-content elements.

EDIT: Sometimes, after doing some changes, above error message goes away and everything works. After saving the component file again, the error re-appears. So confusing. Is there a problem with my configuration or is this a bug with Ionic?

1 Like