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.
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.
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
In this situation, I need help with vuetify`s styles
Can someone clarify how I can change the style of lists inside in select?
for now, highlighted whole block with an available list
Basically, I m need to highlight only one option from this list
If someone knows how to change this styles I'm were very grateful
This is my code
<v-select
ref="hoverSelect"
v-model="productData.filters"
:items="filterGroup"
:rules="fieldRules"
item-text="name"
item-value="id"
chips
label="Filters"
multiple
solo
class="hoverSelect"
>
<template v-slot:item="{item, index}">
<v-list tile subheader style="width: 100%" >
<v-list-item >
<v-list-item-content>
<v-subheader>{{item.name}}</v-subheader>
</v-list-item-content>
<v-list-item-action-text>Кол-во фильтров: {{item.filters_count}} шт</v-list-item-action-text>
</v-list-item>
<v-divider class="ma-0"></v-divider>
<v-list-item-group multiple v-for="filter in item.filters" :key="filter.id" >
<v-list-item>
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ filter.name }}</v-list-item-title>
</v-list-item-content>
</template>
</v-list-item>
</v-list-item-group>
<v-divider class="ma-0"></v-divider>
</v-list>
</template>
</v-select>
my employer decided to expand the menu bar with another sub-pages, and things that works completely fine previously (simple one sub-menu) now don't want to work, because it has sub-menu, under another sub-menu.
Here is the pics:
As you can see when I hover "Acts" the sub menu with External and Internal documents works perfectly fine
but when I would like to move cursor on another sub-menu with "Director's Orders", whole menu is hiding. I think it's because second sub-menu (grandchild) don't pass info to main menu element (grandparent) to keep menu active, but I have no idea how to fix it.
Here is the code:
<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
<template v-slot:activator="{ on }">
<v-list-item link v-on="on">
<v-list-item-content>
<v-list-item-title class="subtitle-1">Acts <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list color="#F0FAFE">
<router-link to="/External"><v-list-item link>
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">External</v-list-item-title>
</v-list-item-content>
</v-list-item></router-link>
<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
<template v-slot:activator="{ on }">
<v-list-item link v-on="on">
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">Internal <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list color="#F0FAFE">
<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
<template v-slot:activator="{ on }">
<v-list-item link v-on="on">
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">Director's Orders <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list
color="#F0FAFE"
v-for="(item, index) in Orders"
:key="index"
>
<router-link :to="'/' + item.title"><v-list-item link>
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item></router-link>
</v-list>
</v-menu>
<router-link to="/Other"><v-list-item link>
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">Other</v-list-item-title>
</v-list-item-content>
</v-list-item></router-link>
</v-list>
</v-menu>
</v-list>
</v-menu>
And little disclaimer. Yes I know this type of menu isn't a Material Design menu, which is the base for vuetify
I don't think v-menu supports nested menus (at least not when opening them with mouseover).
You'd have to make one yourself with nested v-hover. You can create a recursive component building the menu from a nested array of items.
Something like this:
<template>
<v-list color="#F0FAFE" class="menu">
<v-hover v-for="item in items" :key="item.title" v-slot="{ hover }">
<router-link v-if="item.route" :to="item.route" class="item">
<v-list-item link>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</router-link>
<v-list-item v-else class="item">
<v-list-item-content>
<v-list-item-title>{{ item.title }} -></v-list-item-title>
</v-list-item-content>
<NestedMenu v-if="item.children && hover" :items="item.children"/>
</v-list-item>
</v-hover>
</v-list>
</template>
<script>
export default {
name: "NestedMenu",
props: {
items: { type: Array, default: () => [] }
}
};
</script>
Here is a working example (which need some styling tho): https://codesandbox.io/s/nestedmenu-u8tk1?file=/src/components/NestedMenu.vue
Add more items and levels on menuItems in App.vue.
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>