website is: app.superiorprediction.com
Please check orange sidebar on mobile version. When scrolling bottom on mobile browsers, its navbar and footer appear and disappear and this causes ugly stuck of my sidebar while holding the scroll with finger on mobile. Is there any fix for this or should i look for more elegant solutions and if so what are they? Here's the code of Sidebar component
<template>
<v-main style="overflow: hidden; !important; ">
<v-navigation-drawer
app
permanent
style=" z-index: 5;"
height="100%"
:width="check"
v-bind:style="miniFied ? 'v-navigation-drawer--mini-variant {overflow: hidden;} ' : null"
:mini-variant="miniFied"
class="pt-14 amber darken-1"
>
<v-list>
<v-btn
icon
@click.stop="miniFied = !miniFied"
>
<v-icon v-if="!miniFied">mdi-chevron-left</v-icon>
<v-icon v-else>mdi-chevron-right</v-icon>
</v-btn>
<v-list-item class="px-2" v-if="!miniFied">
<v-img :src="require('@/assets/logo.webp')"
max-height="80"
max-width="70"
class="mx-auto">
</v-img>
</v-list-item>
<v-container v-if="user.nameSurname" class="pa-0 ma-0">
<v-list-item>
<v-list-item-content>
<v-list-item-title v-if="!miniFied" style="font-size: 20px" class="text-center">
{{ user.nameSurname }}
</v-list-item-title>
<v-list-item-subtitle class="text-center" v-if="!mini">{{ user.email }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-container>
<v-container v-else class="pa-0">
<v-list-item>
<v-list-item-content>
<v-list-item-title v-if="!miniFied" class="text-h6 text-center">
<v-btn :to="{ path: '/register' }" dark>
Register
</v-btn>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-container>
<v-container class="pa-0 ma-0">
<v-list-item v-if="user.ipCount && user.role === 'ADMIN' || user.role === 'SUPER_ADMIN' && !miniFied"
class="ma-0 pa-0">
<v-list-item-content>
<v-list-item class="justify-center pa-0"
>
<span class="text-center text-subtitle-2">Total Unique IPs: {{ user.ipCount }}</span>
</v-list-item>
</v-list-item-content>
</v-list-item>
</v-container>
</v-list>
<v-divider></v-divider>
<v-list
nav
dense
>
<v-list-item-group
light
class="pb-16 text-left"
:value="selected"
color="primary"
>
<v-list-item link @click="clickedMenuItem('superior-predictions')" :disabled="selectedItem === 0">
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px">Dashboard</v-list-item-title>
</v-list-item>
<v-list-item link @click="clickedMenuItem('history')" :disabled="selectedItem === 1">
<v-list-item-icon>
<v-icon>mdi-history</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px">Prediction History</v-list-item-title>
</v-list-item>
<v-list-item link @click="clickedMenuItem('bank')" :disabled="selectedItem === 2">
<v-list-item-icon>
<v-icon>mdi-bank</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px">Virtual Bank</v-list-item-title>
</v-list-item>
<v-list-item link @click="clickedMenuItem('charts')" :disabled="selectedItem === 3">
<v-list-item-icon>
<v-icon>mdi-chart-bell-curve-cumulative</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px">Charts</v-list-item-title>
</v-list-item>
<v-list-item link
href="https://superiorprediction.com/blog"
target="_blank">
<v-list-item-icon>
<v-icon>mdi-newspaper-variant-outline</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px">Blog - Latest News</v-list-item-title>
</v-list-item>
<v-list-item v-if="loggedIn" link @click="clickedMenuItem('profile')" :disabled="selectedItem === 4">
<v-list-item-icon>
<v-icon>mdi-account</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px">My Profile</v-list-item-title>
</v-list-item>
<v-list-item v-if="user.role === 'ADMIN' || user.role === 'SUPER_ADMIN'" link
@click="clickedMenuItem('admin-panel')" :disabled="selectedItem === 5">
<v-list-item-icon>
<v-icon>mdi-solar-panel</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px">Admin Panel</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
<template v-slot:append style="height: 100% !important;">
<div class="pb-5">
<v-dialog
transition="dialog-bottom-transition"
max-width="600"
>
<template v-slot:activator="{ on, attrs }">
<v-list-item link v-bind="attrs"
v-on="on"
>
<v-list-item-icon>
<v-icon color="blue darken-3">mdi-send</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px" class="text-left">Join Telegram</v-list-item-title>
</v-list-item>
</template>
<template v-slot:default="dialog">
<v-card>
<v-card-text class="pa-10 text-center">
<v-img :src="require('@/assets/telegram.webp')"
max-height="200"
max-width="200"
class="mx-auto"
></v-img>
<span class="text-h6 ">Get free predictions now!</span>
<v-card-text>
<v-btn color="primary" class="btn btn-info text-white "
href="https://t.me/+nHbAu6aUFLsxZjY0" target="_blank">
Join
</v-btn>
</v-card-text>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn
color="amber darken-1"
@click="dialog.value = false"
>Close
</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
<v-dialog
transition="dialog-bottom-transition"
max-width="600"
>
<template v-slot:activator="{ on, attrs }">
<v-list-item link v-bind="attrs"
v-on="on">
<v-list-item-icon>
<v-icon color="black">mdi-gift</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px" class="text-left">Donate Paypal</v-list-item-title>
</v-list-item>
</template>
<template v-slot:default="dialog">
<v-card>
<v-img :src="require('@/assets/paypal.webp')"
max-height="140"
max-width="340"
class="mx-auto text-left"
>
</v-img>
<v-card-text class="pa-7 text-center">
<v-btn color="primary" href="https://www.paypal.com/paypalme/superiorprediction">Donate Link
</v-btn>
</v-card-text>
<v-card-actions class="justify-end">
<v-spacer></v-spacer>
<v-btn
color="amber darken-1"
@click="dialog.value = false"
>Close
</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
<v-dialog
transition="dialog-bottom-transition"
max-width="600"
>
<template v-slot:activator="{ on, attrs }">
<v-list-item link v-bind="attrs"
v-on="on">
<v-list-item-icon>
<v-icon color="grey darken-4">mdi-gift</v-icon>
</v-list-item-icon>
<v-list-item-title style="font-size: 17px" class="text-left">Donate BTC</v-list-item-title>
</v-list-item>
</template>
<template v-slot:default="dialog">
<v-card>
<v-img :src="require('@/assets/frame.png')"
max-height="200"
max-width="200"
class="mx-auto pa-0"
>
</v-img>
<v-card-text class="pb-5 text-center">
<span class="text-h6 ">Donate BTC Address: {{ donateAddress }}</span>
<input type="hidden" id="donate-address" :value="donateAddress">
</v-card-text>
<v-card-actions class="justify-end">
<v-btn color="primary" class="btn btn-info text-white copy-btn "
@click.stop.prevent="copyTestingCode">
Copy
</v-btn>
<v-spacer></v-spacer>
<v-btn
color="amber darken-1"
@click="dialog.value = false"
>Close
</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</div>
</template>
</v-navigation-drawer>
</v-main>
</template>