I have this layout in my ionic vue codebase,

<template>
    <ion-app :class="[className, 'overflow-y-scroll home__bg']">
        <ion-split-pane content-id="main-content">
            <!-- Side Menu -->
            <ion-menu content-id="main-content" type="overlay">
                <ion-header>
                    <ion-toolbar>
                        <ion-title>Menu</ion-title>
                    </ion-toolbar>
                </ion-header>
                <ion-content>
                    <ion-list>
                        <ion-menu-toggle auto-hide="false" v-for="item in navItems" :key="item.title">
                            <ion-item :router-link="item.to" router-direction="root" lines="none">
                                <ion-icon :icon="item.icon" slot="start" />
                                <ion-label>{{ item.title }}</ion-label>
                            </ion-item>
                        </ion-menu-toggle>
                    </ion-list>
                </ion-content>
            </ion-menu>

            <!-- Main Content -->
            <div class="ion-page" id="main-content">
                <ion-header>
                    <ion-toolbar>
                        <ion-buttons slot="start">
                            <ion-menu-button></ion-menu-button>
                        </ion-buttons>
                        <ion-title>{{ pageTitle }}</ion-title>
                        <ion-buttons slot="end">
                            <ion-button router-link="/notifications">
                                <ion-icon :icon="notificationsOutline" slot="icon-only" />
                            </ion-button>
                        </ion-buttons>
                    </ion-toolbar>
                </ion-header>

                <ion-content :class="['bg-background-primary']">
                    <div class="w-full">
                        <main class="py-5 px-10">
                            <ion-router-outlet />
                        </main>
                    </div>
                </ion-content>

                <!-- Bottom Navigation (visible only on mobile) -->
                <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 rounded-tr-3xl rounded-tl-2xl shadow-xl">
                    <div class="flex justify-around">
                        <router-link
                            v-for="item in bottomNavItems"
                            :key="item.to"
                            :to="item.to"
                            class="flex flex-col items-center py-2 px-3 text-gray-600 hover:text-primary"
                            active-class="text-primary"
                        >
                            <ion-icon :icon="item.icon" class="w-6 h-6" />
                            <span class="text-xs mt-1">{{ item.title }}</span>
                        </router-link>
                    </div>
                </nav>
            </div>
        </ion-split-pane>
    </ion-app>
</template>


<script setup lang="ts">
import { ISiteHeader, ISiteNavigation } from 'asc-lib'
import { ref, computed } from 'vue'
import { RouterLink, useRouter, useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { useAuthenticationStore } from "@/stores/authentication";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { IonContent, IonApp, IonRouterOutlet, IonIcon, IonTabButton, IonTabs, IonLabel, IonTabBar  } from "@ionic/vue";
import { usePatientFaqService } from '@/composables/patients/usePatientFaqService';
import { usePatientKnowledgeDeskService } from '@/composables/patients/usePatientKnowledgeDeskService';
import {usePageTitle} from "@/composables/usePageTitle";
import { homeOutline, searchOutline, personOutline } from 'ionicons/icons';

const router = useRouter();
const route = useRoute();
const authenticationStore = useAuthenticationStore();
const isSiteNavigationOpen = ref<boolean>(false)
const { userType, user, lastLoginDate } = storeToRefs(authenticationStore);
const { pageTitle } = usePageTitle();
const { getAllCached: getAllFaqCached, faqs } = usePatientFaqService();
const { getAllCached: getAllKdCached, knowledgeDesks } = usePatientKnowledgeDeskService();

function toggleMenu() {
    isMenuOpen.value = !isMenuOpen.value
    isSiteNavigationOpen.value = !isSiteNavigationOpen.value
}

const className = route.meta.wrapperClass;

const navItems = ref([
    {
        title: 'Home',
        icon: 'house',
        to: { name: 'dashboard' }
    },
    {
        title: 'My Health',
        icon: 'heart',
        to: { name: 'dashboard' }
    },
    {
        title: 'Test Results',
        icon: 'clipboard',
        to: { name: 'dashboard' }
    },
    {
        title: 'Health Surveys',
        icon: 'clipboard-question',
        to: { name: 'surveys' }
    },
    {
        title: 'My Clinical Team',
        icon: 'people-group',
        to: { name: 'dashboard' }
    },
    {
        title: 'Information',
        icon: 'circle-info',
        to: { name: 'dashboard' }
    },
    {
        title: 'My Appointments',
        icon: 'calendar-days',
        to: { name: 'dashboard' }
    },
    {
        title: 'Notifications',
        icon: 'bell',
        to: { name: 'dashboard' }
    },
    {
        title: 'Logout',
        icon: 'right-from-bracket',
        to: { name: 'auth.logout' }
    }
]);

const bottomNavItems = ref([
    { title: 'Home', to: '/home', icon: homeOutline },
    { title: 'Health', to: '/search', icon: searchOutline },
    { title: 'Clinical Health', to: '/profile', icon: personOutline },
    { title: 'Test Results', to: '/profile', icon: personOutline },
    { title: 'Appts', to: '/profile', icon: personOutline },
]);

const isMenuOpen = ref<boolean>(false);

getAllFaqCached().then(function () {
    if (faqs.value && faqs.value.length) {
        faqs.value.forEach(function (faq) {
            navItems.value.splice(navItems.value.length - 1, 0, {
                component: RouterLink,
                title: faq.name,
                icon: 'circle-question',
                to: { name: 'faqs', params: { id: faq.id } }
            });
        })
    }
});

getAllKdCached().then(function () {
    if (knowledgeDesks.value && knowledgeDesks.value.length) {
        knowledgeDesks.value.forEach(function (knowledgeDesk) {
            navItems.value.splice(navItems.value.length - 1, 0, {
                component: RouterLink,
                title: knowledgeDesk.name,
                icon: 'circle-info',
                to: { name: 'knowledgeDesk', params: { id: knowledgeDesk.id } }
            });
        })
    }
});

const siteLink = computed(() => {
    if (userType.value == "practitioner") {
        return "/admin/dashboard"
    }

    return "/"
})

const handleProfileClick = () => {
    router.push({name: 'user.profile'})
}

</script>

<style lang="postcss" scoped>

.page__title {
    @apply text-title;
}

.home {
    .page__title {
        @apply text-white
    }

    .home__bg {
        background-image:url(/images/hero_section.png);
        background-position:top left;
        background-repeat: no-repeat;
        background-size:100%;
    }
}

</style>

The bottom nav displays at the bottom of the viewport in my browser, but when viewing on a mobile device, there is no bottom nav, and I cannot figure out why, not sure if it's a CSS, vue, ionic or platform problem?