I want to set navigation drawer alone with toolbar and toggle drawer from toolbar.
Code:
<v-navigation-drawer absolute temporary left v-model="drawer">
<v-list-item-title class="text-h6"> </v-list-item-title>
<v-list nav dense>
<div v-for="(link, i) in links" :key="i">
<v-list-item v-if="!link.subLinks" :to="link.to" class="v-list-item">
<v-list-item-icon>
<v-icon>{{ link.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title v-text="link.text" class="subtitle-2" />
</v-list-item>
<v-list-group
v-else
:key="link.text"
no-action
:prepend-icon="link.icon"
:value="false"
>
<template v-slot:activator>
<v-list-item-title>{{ link.text }}</v-list-item-title>
</template>
<v-list-item
v-for="sublink in link.subLinks"
:to="sublink.to"
:key="sublink.text"
>
<v-list-item-icon>
<v-icon>{{ sublink.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title class="subtitle-2">{{ sublink.text }}</v-list-item-title>
</v-list-item>
</v-list-group>
</div>
</v-list>
</v-navigation-drawer>
<v-toolbar color="primary" right #click.stop="drawer = !drawer">
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
</v-toolbar>
As you can see I have set both navigation-drawer and toolbar.
Currently:
Expected:
Replace the v-toolbar with v-app-bar
Add app clipped-left props to v-app-bar
Remove absolute temporary props from the drawer
Add app clipped fixed props to the drawer
Related
I've this v-navigation drawer in my project. It contains both v-list-items and a v-list-group. When clicking an v-list-item, and the v-list-group is expanded, I want the group to be collapsed. How can this be done?
<v-app id="t">
<v-navigation-drawer dark v-model="sidebar" app>
<v-list>
<v-list-item router-link to='/Test'>
<v-list-item-title>Test</v-list-item-title>
</v-list-item>
<v-list-item router-link to='/Test2'>
<v-list-item-title>Test2</v-list-item-title>
</v-list-item>
<v-list-group :value="true">
<template v-slot:activator>
<v-list-item-title>Title</v-list-item-title>
</template>
<v-list-item
v-for="item in mobAdminItems"
:key="item.title"
:to="item.linkTo"
>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<v-list-item router-link to='/Test3'>
<v-list-item-title>Test3</v-list-item-title>
</v-list-item>
<v-list-item router-link to='/Test4'>
<v-list-item-title>Test4</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
You can just add v-model into v-list-group component and assign it to some variable. Changing this variable will lead to expand / collapse actions.
<v-list-group v-model="groupOpened">
<template v-slot:activator>
<v-list-item-title>Title</v-list-item-title>
</template>
<v-list-item
v-for="item in mobAdminItems"
...
#click="groupOpened = false"
>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
...
data () {
return {
...
groupOpened: false,
}
}
Test this at CodePen.
When the navigation drawer is closed or open, it creates a big gap on the page based on it's height. How can that be avoided?
In the second image it's clearly visible between the navbar and Create Post component that the drawer takes up room
<template>
<v-app>
<v-navigation-drawer clipped v-model="sideNav">
<v-list>
<v-list-item
v-for="item in items"
:key="item.title"
#click="onClickMenuItem(item.title)"
>
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar
dark
fixed
class="default-layout__navbar"
extended
extension-height="3"
>
<v-app-bar-nav-icon
#click.native.stop="sideNav = !sideNav"
class="hidden-sm-and-up"
>
</v-app-bar-nav-icon>
<v-toolbar-title>
<router-link to="/" tag="span" style="cursor: pointer">
Blog
</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-xs-only">
<v-btn
v-for="item in items"
:key="item.title"
#click="onClickMenuItem(item.title)"
>
<v-icon left dark>{{ item.icon }}</v-icon>
{{ item.title }}
</v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<!-- <span class="nav-user" v-if="loggedInUser.token">{{
loggedInUser.username
}}</span> -->
</v-app-bar>
<v-content class="default-layout__main-content">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</v-content>
</v-app>
</template>
If I understand the question, you're looking for a layout like this. Notice how the app prop is used in both the v-navigation-drawer and app-bar...
<v-app>
<v-navigation-drawer v-model="sideNav" app>
<v-list>
<v-list-item v-for="item in items" :key="item.title" #click="onClickMenuItem(item.title)">
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar dark fixed app class="default-layout__navbar" extended extension-height="3">
<v-app-bar-nav-icon #click.native.stop="sideNav = !sideNav" class="hidden-sm-and-up">
</v-app-bar-nav-icon>
<v-toolbar-title>
<router-link to="/" tag="span" style="cursor: pointer"> Blog </router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-xs-only">
<v-btn v-for="item in items" :key="item.title" #click="onClickMenuItem(item.title)">
<v-icon left dark>{{ item.icon }}</v-icon>
{{ item.title }}
</v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<span class="nav-user"> username </span>
</v-app-bar>
<v-content class="default-layout__main-content">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</v-content>
</v-app>
Demo: https://codeply.com/p/KNNSlNEmzM
I found this codepen: https://codepen.io/carl_/pen/QWwgqBa, which closely does as I want.
But there is no content/text on the right side.
And I cant figure out how to add content on the right side.
I have tried to google the problem and found solutions like "add v-content", "it needs to be inside v-app". But none of these actually got the content on the right side. It ended below the card or inside the navigation-drawer.
How can I manage to get content on the right side of the menu?
<div id="app">
<v-app id="inspire">
<v-card style="width:800px;margin:40px auto">
<v-navigation-drawer
expand-on-hover
permanent
>
<template v-slot:prepend>
<v-list>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
</v-list-item-avatar>
</v-list-item>
<v-list-item
link
two-line
>
<v-list-item-content>
<v-list-item-title class="title">Sandra Adams</v-list-item-title>
<v-list-item-subtitle>sandra_a88#gmail.com</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-menu-down</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
</template>
<v-divider></v-divider>
<v-list
nav
dense
>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-folder</v-icon>
</v-list-item-icon>
<v-list-item-title>My Files</v-list-item-title>
</v-list-item>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-account-multiple</v-icon>
</v-list-item-icon>
<v-list-item-title>Shared with me</v-list-item-title>
</v-list-item>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-star</v-icon>
</v-list-item-icon>
<v-list-item-title>Starred</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-card>
</v-app>
</div>
<v-layout> was the attribute I needed to add.
I have a vuetify navigation drawer in the navbar of my vuejs app. It open and closes properly. The issue is that none of the items inside are clickable. The correct functionality is that the items inside of the navdrawer should act as links to other pages. Currently, only the logout button is hooked up, but even that does not work.
My code:
<template>
<v-app-bar flat app>
<!--Logo-->
<v-toolbar-title class="text-uppercase">
<v-img src="#/assets/jawnfinder-logo.png" class="logo" contain max-height="75px" center></v-img>
</v-toolbar-title>
<!--Signup button and process-->
<div v-if="!user"><Signin /></div>
<!--Logout button-->
<v-btn text target="_blank" color="yellow darken-2" v-if="user">
<span class="logout btn" #click="logout">Logout</span>
</v-btn>
<!--Account button, maybe this should be it's own component. It's kinda long-->
<v-app-bar-nav-icon class="blue--text" #click="account = !account" v-if="user">Account</v-app-bar-nav-icon>
<v-navigation-drawer v-model="account" class="yellow" right temporary app>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>Account</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Profile</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Toolboxes</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Settings</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title #click="logout">Logout</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-navigation-drawer>
</v-app-bar>
</template>
The navdrawer below should be bright yellow! Not a greyed out yellow. Any suggestions?
Your code looks fine, need to add a fix in navigation-drawer component
remove temporary property from navigation drawer component
<v-navigation-drawer v-model="account" class="yellow" right **temporary** app>
Replace with
<v-navigation-drawer v-model="account" class="yellow" right app>
With Vuetify I would like to display two v-navigation-drawers next to each other and be able to hide the right one with a button within the left one. My current code (see below) displays the right drawer over the left one, but I want it to display right drawer next to the left one (see screens below).
I tried to find something useful in the official documentation and went through a few different sample templates but nothing was helpful in my case.
I was able to come up with the following code:
<template>
<v-app dark>
<v-navigation-drawer v-model="leftMenu" app clipped>
<v-container ma-0 pa-0>
<v-toolbar flat>
<span>Some helper toolbar</span>
</v-toolbar>
</v-container>
<v-container pa-1 mt-1>
<v-layout row wrap>
<v-list>
<v-list-tile>
<v-list-tile-action>
<span><a #click.stop="toggleRightMenu"><v-icon>android</v-icon> Task Menu</a></span>
</v-list-tile-action>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<span><v-icon>android</v-icon> Menu Element #1</span>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-layout>
</v-container>
</v-navigation-drawer>
<v-navigation-drawer v-model="rightMenu" app clipped>
<v-container>
<v-layout>
<v-list>
<v-list-tile>
<v-list-tile-action>
<span><v-icon>android</v-icon> Testing...</span>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-layout>
</v-container>
</v-navigation-drawer>
<v-toolbar app clipped-left>
<v-toolbar-side-icon #click="leftMenu = !leftMenu"></v-toolbar-side-icon>
<v-toolbar-title class="headline">
<span>Testing...</span>
</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-content>
<router-view/>
</v-content>
<v-footer app>
<span>Footer</span>
</v-footer>
</v-app>
</template>
<script>
export default {
name: 'App',
data() {
return {
leftMenu: true,
rightMenu: false
}
},
methods: {
toggleRightMenu() {
this.rightMenu = !this.rightMenu;
}
}
}
</script>
Currently I have the following: https://i.ibb.co/txdN0X8/current-drawer.png
I am looking for something like that: https://i.ibb.co/b514yyC/target-drawer.png
The trick is to have a v-layout that fills the height and contains both of the navigation drawers.
One more thing that you need to make sure to apply is to have a z-index on both navigation drawers. Otherwise, when you toggle the right nav it will go at the top of the left nav. And when you want to toggle the left nav you actually have to toggle both.
I have created a Codepen using your data example.
<v-toolbar flat>
<v-toolbar-side-icon #click="toggleLeftMenu"></v-toolbar-side-icon>
<v-toolbar-title class="headline">
<span>Testing...</span>
</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-layout fill-height>
<v-navigation-drawer
style="z-index: 2"
dark
clipped
stateless
v-model="leftMenu"
>
<v-container ma-0 pa-0>
<v-toolbar flat>
<span>Some helper toolbar</span>
</v-toolbar>
</v-container>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon #click="rightMenu = !rightMenu">android</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Task Menu</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-icon>android</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Menu Element #1</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-navigation-drawer
dark
style="z-index: 1"
v-model="rightMenu"
class="pb-0"
stateless
>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon>android</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Testing right nav</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</v-layout>
Hope it helps :)
You could try achieve by having 2 navigation drawers.
The second one's margin-left should be equivalent to the first drawer.
Please take a look at this code pen. Hope this helps.
https://codepen.io/Jubels/pen/xeazYY?&editable=true&editors=101
<div id="app">
<v-app id="inspire">
<v-layout
wrap
style="height: 200px;"
>
<v-container>
<v-layout justify-center>
<v-btn
color="pink"
dark
#click.stop="drawer = !drawer"
>
Toggle Drawer 1
</v-btn>
<v-btn
color="pink"
dark
#click.stop="drawer2 = !drawer2"
>
Toggle Drawer 2
</v-btn>
</v-layout>
</v-container>
<v-navigation-drawer
v-model="drawer"
:mini-variant="mini"
absolute
dark
>
<v-list class="pa-1">
<v-list-tile v-if="mini" #click.stop="mini = !mini">
<v-list-tile-action>
<v-icon>chevron_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile avatar tag="div">
<v-list-tile-avatar>
<img src="https://randomuser.me/api/portraits/men/85.jpg">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>John Leider</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon #click.stop="mini = !mini">
<v-icon>chevron_left</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider light></v-divider>
<v-list-tile
v-for="item in items"
:key="item.title"
#click=""
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-navigation-drawer :style="`margin-left: ${drawer ? '300px' : '0'}`"
v-model="drawer2"
:mini-variant="mini"
absolute
dark
>
<v-list class="pa-1">
<v-list-tile v-if="mini" #click.stop="mini = !mini">
<v-list-tile-action>
<v-icon>chevron_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile avatar tag="div">
<v-list-tile-avatar>
<img src="https://randomuser.me/api/portraits/men/85.jpg">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>John Leider</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon #click.stop="mini = !mini">
<v-icon>chevron_left</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider light></v-divider>
<v-list-tile
v-for="item in items"
:key="item.title"
#click=""
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</v-layout>
</v-app>
</div>
I made it like bitbucket design, one is fixed (mini-variant) and the other one is a drawer
https://codepen.io/admica/pen/PoozMNw?editors=1010
<div id="app">
<v-app id="inspire">
<v-navigation-drawer
mini-variant
mini-variant-width="56"
app
clipped
>
<v-list dense>
<v-list-item
v-for="item in items"
:key="item.text"
#click=""
>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-subheader class="mt-3 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
<v-list>
<v-list-item
v-for="item in items2"
:key="item.text"
#click=""
>
<v-list-item-avatar>
<img
:src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`"
alt=""
>
</v-list-item-avatar>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item>
</v-list>
<v-list-item
class="mt-3"
#click=""
>
<v-list-item-action>
<v-icon color="grey darken-1">add_circle_outline</v-icon>
</v-list-item-action>
<v-list-item-title class="grey--text text--darken-1">Browse Channels</v-list-item-title>
</v-list-item>
<v-list-item #click="">
<v-list-item-action>
<v-icon color="grey darken-1">settings</v-icon>
</v-list-item-action>
<v-list-item-title class="grey--text text--darken-1">Manage Subscriptions</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar
app
color="red"
dense
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-icon class="mx-3">fab fa-youtube</v-icon>
<v-toolbar-title class="mr-5 align-center">
<span class="title">Youtube</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-layout
row
align-center
style="max-width: 650px"
>
<v-text-field
:append-icon-cb="() => {}"
placeholder="Search..."
single-line
append-icon="search"
color="white"
hide-details
></v-text-field>
</v-layout>
</v-app-bar>
<v-content>
<v-container fluid fill-height>
<v-layout
align-center
style="position:relative"
>
<v-navigation-drawer
v-model="drawer"
v-if="drawer"
>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
ahmed ali
</v-layout>
</v-container>
</v-content>
</v-app>
</div>