Skip to content

Instantly share code, notes, and snippets.

@oliverbth05

oliverbth05/app.css

Last active September 9, 2022 20:39
Show Gist options
  • Save oliverbth05/9834e9114b52b1f4ea77a0ae2d353e2f to your computer and use it in GitHub Desktop.
Save oliverbth05/9834e9114b52b1f4ea77a0ae2d353e2f to your computer and use it in GitHub Desktop.
Download ZIP
Vuetify Responsive Toolbar with Navigation Drawer
Raw
app.css
#drawer{
background: rgba(240, 240, 240, 1);
}
Raw
app.js
new Vue ({
el: "#app",
data: {
drawer: null
}
})
Raw
index.html
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id = "app">
<v-toolbar clipped-left>
<v-toolbar-side-icon @click.stop="drawer = !drawer" class="hidden-md-and-up"></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
v-model="drawer"
temporary
absolute
width = "200"
id = "drawer"
>
</v-navigation-drawer>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
</body>
@s3rgeym
Copy link

s3rgeym commented Sep 9, 2022

NOT WORKING

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment