How can I make my vuetify website responsive

26 views Asked by At

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>`
0

There are 0 answers