Hide side menu in vue app

Ionic Framework Ionic Vue
1

I am relatively new to ionic and vue, I created an application with a sidemenu, however I would like to hide this sidemenu on specified views lets say the login view, below is my code

<template>
       <IonApp>
           <IonSplitPane content-id="main-content">
                 <ion-menu content-id="main-content" type="push">
                      <ion-header :translucent="true">
                          <ion-toolbar>
                              <ion-title class="main-title">
                                   <img src="/assets/images/logo.png" alt="Arms logo" />
                                         <span class="ion-padding-start">Sample</span>
                              </ion-title>
                         </ion-toolbar>
                     </ion-header>
                <ion-content>
          <ion-list>
         <ion-menu-toggle auto-hide="false" v-for="(p, i) in appPages" :key="i">
              <ion-item @click="selectedIndex = i" router-direction="root" :router-link="p.url" lines="none"  
                  detail="false" class="hydrated" :class="{ selected: selectedIndex === i }">
                <ion-icon slot="start" :ios="p.iosIcon" :md="p.mdIcon" ></ion-icon>
                <ion-label>{{ p.title }}</ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
      <ion-router-outlet id="main-content"></ion-router-outlet>
    </IonSplitPane>
  </IonApp>
</template>
<script lang="ts">
import {
  IonApp,
  IonContent,
  IonIcon,
  IonItem,
  IonList,
  IonMenu,
  IonMenuToggle,
  IonRouterOutlet,
  IonSplitPane,
  IonTitle,
  IonToolbar,
  IonHeader,
  IonLabel
} from "@ionic/vue";
import { defineComponent, ref } from "vue";
import { useRoute } from "vue-router";
import { Stores} from './register_store';
import {
  heartOutline,
  cogOutline,
  appsOutline,
  peopleOutline,
  newspaperOutline,
  bulbOutline,
} from "ionicons/icons";
export default defineComponent({
  name: "App",

  components: {
    IonApp,
    IonContent,
    IonIcon,
    IonItem,
    IonList,
    IonMenu,
    IonMenuToggle,
    IonRouterOutlet,
    IonSplitPane,
    IonTitle,
    IonToolbar,
    IonHeader,
    IonLabel
  },
  provide: Stores,
  setup() {
    const showPane = ref(true)
    const selectedIndex = ref(0);
    const appPages = [
      {
        title: "Dashboard",
        url: "/Dashboard",
        mdIcon: appsOutline,
      },
      {
        title: "Birth",
        url: "/birth/landing",
        mdIcon: peopleOutline,
      },
      {
        title: "Death",
        url: "/death/landing",
        mdIcon: newspaperOutline,
      },
      {
        title: "Configurations",
        url: "/advanced/configurations",
        mdIcon: cogOutline,
      }
    ];
    const path = window.location.pathname.split("views/")[1];
    if (path !== undefined) {
      selectedIndex.value = appPages.findIndex(
        (page) => page.title.toLowerCase() === path.toLowerCase()
      );
    }
    const route = useRoute();
    if (route.name === "login") {
      showPane.value = false
    }
    return {
      showPane,
      selectedIndex,  
      appPages,
      heartOutline,
      cogOutline,
      appsOutline,
      peopleOutline,
      newspaperOutline,
      bulbOutline,
      isSelected: (url: string) => (url === route.path ? "selected" : ""),
    };
  },
});
</script>

Any help will be highly appreciated :slight_smile:

2

Is there a reason why you aren’t using the standard Vue Router and separate pages/views for each screen?

3

Can you please elaborate?

4

My bad, I thought you were rolling your own logic but after looking at the starter project for the Side Menu, you followed that.

I believe using showPane would cause weird routing issues. I would remove the menu from App.vue so you can create regular pages without the menu. Here is a sample project that you can reference. It is set up similar to how the tabs starter project is with children routes and a second IonRouterOutlet.

1 Like
5

@robomano-glitch hide the menu if the specific route has the hideMenu flag specified in the meta property

      <ion-menu
        v-if="$route?.meta?.hideMenu === undefined"
        content-id="main-content"
        type="overlay"
      >
        <!-- ..menu content... -->
     </ion-menu>

down in the routes, define the hideMenu property on the appropriate routes

  {
    path: "/login",
    component: () => import("../views/Login.vue"),
    meta: { hideMenu: true }
  }
2 Likes
6

This worked almost perfectly for me, but I noticed that after navigating to a page without the menu and then back to one with it, the menu changed to displaying as an overlay only when clicked (i.e. the same as it does on mobile/narrow screens) even in a large desktop browser window (where the menu was previously shown permanently in a fixed position on the left side of the screen)

Setting the disabled property to true seems to have the same effect of hiding the menu completely without causing this issue, so my code is now:

<ion-menu content-id="main-content" type="overlay" :disabled="$route?.meta?.hideMenu !== undefined">