Hide side menu in vue app

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

1 post - 1 participant

Read full topic