Quick reaction…
You could still use the IonSplitPane setup to achieve this. The trick would be to hide the menu toggle button on mobile and render the menu list as your mobile home page content.
To keep things DRY, you’d use the same component to output your list (home page content on mobile, side menu on desktop).
A quick setup could look likes this:
App.vue
<!-- App.vue -->
<template>
<ion-app>
<ion-split-pane content-id="main">
<!-- the side menu -->
<the-side-menu v-if="!isMobile" />
<!-- the main content -->
<ion-router-outlet id="main" />
</ion-split-pane>
</ion-app>
</template>
<script lang="ts">
import { IonApp, IonRouterOutlet, IonSplitPane, isPlatform } from "@ionic/vue";
import { defineComponent } from "vue";
import MenuItems from "@/components/MenuItems.vue";
export default defineComponent({
name: "App",
components: {
IonApp,
IonRouterOutlet,
MenuItems,
IonSplitPane,
},
setup() {
return {
isMobile: isPlatform("mobile"),
}
}
});
</script>
The side menu (visible on desktop)
<!-- components/TheSideMenu.vue -->
<template>
<ion-menu content-id="main">
<ion-content>
<menu-items />
</ion-content>
</ion-menu>
</template>
<script>
import { defineComponent } from "vue";
import { IonContent } from "@ionic/vue";
import MenuItems from "@/components/MenuItems.vue";
export default defineComponent({
name: "TheSideMenu",
components: {
IonContent,
MenuItems,
},
});
</script>
The shared menu
<!-- components/MenuItems.vue -->
<template>
<ion-list>
<ion-item
v-for="page in pages"
:key="page.name"
@click.prevent="navigate(page.routeName)"
button
>
<ion-label>
<h3>{{ page.title }}</h3>
<p>{{ page.description }}</p>
</ion-label>
</ion-item>
</ion-list>
</template>
<script>
import { IonList, IonItem, isPlatform } from "@ionic/vue";
import { useRouter, useRoute } from "vue-router";
export default {
name: "MenuItems",
setup() {
const router = useRouter();
const navigate = (location) => router.push(location);
const pages = [
{
name: "item1",
title: "Item one title",
description: "Item one description",
location: "itemone",
},
{
name: "item2",
title: "Item two title",
description: "Item two description",
location: "itetow",
},
{
name: "item3",
title: "Item three title",
description: "Item thre description",
location: "itemthree",
},
];
return { pages, navigate };
},
};
</script>
Home page content
<!-- views/Home.vue -->
<template>
<!-- render list for mobile only -->
<menu-items v-if="isMobile" />
<!-- otherwise render desktop content -->
<div v-else>
Your deskptop home page content
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MenuItems from "@/components/MenuItems.vue";
export default defineComponent({
name: "Home",
components: {
MenuItems,
},
setup() {
return {
isMobile: isPlatform("mobile"),
};
},
});
</script>
I didn’t test it, but it should hopefully set you on the right path
