I have the following helper classes applied to a Navigation and BottomNavigation component.
I want the BottomNavigation to show on smartphones only, the Navigation should be shown on tablets and everything greater than that. So I applied the following classes:
<template>
<v-app>
<div class="hidden-sm-and-down">
<NavigationDrawer v-if="showMenu" />
</div>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<div class="hidden-md-and-up">
<BottomNavigation v-if="showMenu" />
</div>
<Snackbar />
<Loader v-if="isLoading"></Loader>
</v-app>
</template>
But when I look for example in the Google Chrome console in an iPad view with the 1024 x 767 dimensions, it doesn't show any navigation. It doesn't have something to do with v-if="showmenu" because that function only checks on which url the user is (register/login). But if I am looking at those helper classes it should show me the Navigation component right?
I tried creating a CodeSandBox to show you that on certain screensizes it doesn't show any navigation while I think it should.
https://codesandbox.io/s/hopeful-merkle-4kgoj?fontsize=14&hidenavigation=1&theme=dark
Any help is appreciated, thanks in advance.
Your problem is not the helper classes. They are working fine.
It's v-navigation-drawer that is hiding itself in tablet view. Try adding mobile-break-point="959" prop.
<v-navigation-drawer app mini-variant mobile-break-point="959">
You may have to tweak the value to your needs.