I wrote my code for the normal laptop screen, but I need it to be responsive for mobile users. I want the navbar to change to a dropdown, if the device is mobile. The dropdown should be on the right side of the navbar as the logo is on the left. How can I do it ? It would be good if the color could stay the same if not, it is not a big problem. Thanks
<template>
<v-app>
<v-app-bar app>
<v-app-bar-title>
<v-img :width="180"
src="images/airguard-logo.png" scale>
</v-img>
</v-app-bar-title>
<router-link to="/" class="nav-link" exact-active-class="selected">
<v-btn class="normal-button" >Home</v-btn>
</router-link>
<router-link to="/daten" class="nav-link" exact-active-class="selected">
<v-btn class="normal-button">Daten</v-btn>
</router-link>
<router-link to="/statistik" class="nav-link" exact-active-class="selected" >
<v-btn class="normal-button">Statistik</v-btn>
</router-link>
<router-link to="/about" class="nav-link" exact-active-class="selected">
<v-btn class="normal-button">About Us</v-btn>
</router-link></v-app-bar>
<v-col v-if="$vuetify.breakpoint.xs">
<v-footer app>
<v-row justify="center">
<v-col v-for="(image, index) in this.images" :key="index" cols="12" md="2" class="image-col">
<v-img :src="image.src" alt="Bild" width="80%" height="100"></v-img>
</v-col>
</v-row>
</v-footer>
</v-col>
<router-view/>
</v-app>
</template>
<style>
.selected {
color: #418245 !important; /* Ändern Sie hier die gewünschte Farbe für den ausgewählten Navigationspunkt */
text-decoration: underline !important;
opacity: 1 !important;
}
.nav-link{
text-decoration: none;
color:gray;
}
.normal-button{
font-size: 100%;
}
</style>
<script>
export default {
name: 'App',
data() {
return {
images: [
{ src: "" },
{ src: "" },
{ src: "" },
{ src: "" },
{ src: "" },
]
}
},
}
</script>`