CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuetify.js
garagnoth
garagnoth

Reputation: 234

Vuie.js - How to have 2 rows of navigation header on Vuetify

I'm trying to create navigation header with 2 rows of components. Each having their own background color. This is similar to the one being used here:

enter image description here

This is how I currently setup my App.vue:

<v-app-bar height="100px" flat app dark flex wrap>
        <v-container>
            <v-layout row>
                test
            </v-layout>
            <v-layout row class="second-layer">
                <div class="center d-flex">
                    <div class="d-flex align-center">
                        <v-img alt="Vuetify Logo" class="shrink mr-2" contain src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40" />
                        <v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100" src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="200" />
                    </div>
                    <v-spacer></v-spacer>
                    <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
                        <span class="mr-2">Latest Release</span>
                        <v-icon>mdi-open-in-new</v-icon>
                    </v-btn>
                </div>
            </v-layout>
        </v-container>
    </v-app-bar>

And here is the scoped CSS for the class:

    .second-layer {
       z-index: 999;
    }
   .second-layer:before {
       content: ' ';
       background-color: rgb(214, 214, 55);
       position: absolute;
       height: 70px;
       width: 4000px;
       left: -2000px;
       z-index: -1;
    }

With that, I managed to get it like this:

enter image description here

Is there any better way of doing this in Vuetify?

Upvotes: 1

Views: 1527

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

I think you should use these components v-system-bar in the top of page and under it use v-app-bar :

var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <div>
      <v-system-bar window dark>

        <span>Test</span>
        <v-spacer></v-spacer>

      </v-system-bar>
      <v-app-bar color="deep-purple accent-4" dense dark>


        <div class="d-flex align-center">
          <v-img alt="Vuetify Logo" class="shrink mr-2" contain src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40" />
          <v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100" src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="200" />
        </div>
        <v-spacer></v-spacer>
        <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
          <span class="mr-2">Latest Release</span>
          <v-icon>mdi-open-in-new</v-icon>
        </v-btn>




      </v-app-bar>
    </div>
  </v-app>
</div>

Upvotes: 4

Related Questions