I'm currently trying to implement combined navigation drawers in a project.
My issue is when I try to adapt to mobile. Meaning that if I use the "normal" way of show/hide I can't keep the left navigation drawer (small and nice on mobile) and toggle the other.
Here's an example: https://jsfiddle.net/3r87152u/
<v-navigation-drawer
v-model="drawer"
disable-resize-watcher
width="100%"
>
<v-row class="fill-height" no-gutters>
<v-navigation-drawer
dark
mini-variant
mini-variant-width="56"
permanent
>
I would like to be able to, when in mobile, hide the navigation drawer of the right side and keep the other. Since the navigation drawer of the left side is inside of the right one, I'm completely lost. Is there a way of doing that? Thank you for trying to help!
Related
I have a page structured like this:
<v-navigation-drawer fixed></v-navigation-drawer>
<router-view></router-view>
But the nav drawer is not appearing.
In addition to that, is there a better way for routing from a nav drawer?
Any ideas on the problem?
I'm using <v-navigation-drawer> and I have it working almost like I want. The problem is I want the app prop to be false on 'xs' screens so the navigation drawer is over top of the content :
app property
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-main component to function properly. You can more information about layouts on the application page. Note: this prop automatically applies position: fixed to the layout element. You can overwrite this functionality by using the absolute prop
Basically what I want to do is remove the app prop for xs screens, or figure out how to make make ` over the card in this example:
Codepen example
Add a conditional and fixed property to <v-navigation-drawer :app="drawer" fixed>
I am using Vuetify v-tabs for a list of days in a week:
<v-tabs
v-model="tab"
background-color="theme"
center-active
icons-and-text
show-arrows
grow
dark
>
<v-tabs-slider color="primary"></v-tabs-slider>
<v-tab v-for="item in week" :key="item.id">
<div>{{item.date}}</div>
<div>{{item.day}}</div>
</v-tab>
</v-tabs>
The result is currently like this:
The thing is that the arrow only appears when the tab-slider display is overloaded (when displaying on mobile) but not present while viewing on desktop.
What i would like to do is:
Make the arrows display always regardless of the screen size.
Modify the behavior of the arrow, instead of switching between the tabs items, to change the display week.
any ideas of alternatives of how this could be implemented?
Thanks.
I've implemented a navigation drawer in Vuetify that scrolls towards an anchor in the same page.
When I click an anchor it gets selected and this works just fine.
However now I want to update the selected item in the navigation drawer as soon as the user scroll in a different sections.
<v-navigation-drawer
app
clipped
>
<v-list shaped>
<v-list-item-group v-model="item" color="primary" selectedItem=0>
<v-list-item
v-for="section in sections"
:key="section.title"
#click="$vuetify.goTo(section.id, 0, 0)"
>
<v-list-item-icon>
<v-icon>{{ section.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="section.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
I've looked in the documentation and it looks like I can use Intersection observer (https://vuetifyjs.com/directives/intersect) for this but I don't know how to bind it to the v-list-item.
Do you have a clue on how to bind this?
Cheers
I found the solution to this problem.
V-intersect shows an element is being visited. List item has an
active-class prop and 'input-value' prop to state the item is active.
I'll try to see if I can piece these together.
I started with those 3 thoughts and was able to solve this problem with those 3: v-intersect, input-value prop of list-item, and 'color' prop of list-item. I can define an active-class if I want, but color is good enough for me.
References:
https://vuetifyjs.com/en/directives/intersect/
https://vuetifyjs.com/en/components/lists/
I used vuex to solve this easily. I'm not fond of props/events to communicate with parent/child components. So you need one state each for all v-list-items. Set the color of v-list-item to something distinctive. [2]
Now for each of the components, set up a v-intersect. Following the docs # [1], the onIntersect function will mutate the respective vuex state earlier. Note that from entries[0].isIntersecting, the isIntersecting is part of entries[0], don't change that.
Done, now when you scroll down, you should see the nav items update to color in real time.
Previous thoughts:
I wanted to write a comment, but I need 50 'points'. I'm fairly new at asking/answering questions here. I do read a lot.
Anyways, I'm in the same situation now. I'm starting to look into this. Intersect seems like the answer, but not quite at the same time. If you have found the answer, then please share with me :)
Obviously, there must be a way to do this since VueJS docs has implemented this. https://v2.vuejs.org/v2/guide/custom-directive.html. Nav on left has highlighted title/subtitle based on scroll.
V-intersect shows an element is being visited. List item has an
active-class prop and 'input-value' prop to state the item is active.
I'll try to see if I can piece these together.
I know we can cheat by using vue-scrollactive, but I don't want to do that yet.
I am new to VueJs and I started working on my first project which requires me to have a side panel (drawer) to serve as a navigation bar and it will always be visible.
So far so good it is done and it looks exactly as I wanted it.
The problem is that each time I put a lot of links the drawer doesn’t scroll in order to see all the links I have put there.
I have tried with css but nothing happens. Does anyone have any hint on what I should do?
I just need the drawer to be scrollable when links exceed the page or when the screen it’s small.
What I did is that I enclosed my drawer in a div with a class"scrollable" and added the below css:
.scrollable{ height:100%; overflow:auto;}
I also tried this as it was the closest thing I could find to my problem
I was facing the same issue because of the 'absolute' keyword in the v-navigation-drawer. Try removing it and it might work.
<v-navigation-drawer class="blue-grey lighten-5 height-app" v-model="drawer" temporary app width="310"> </v-navigation-drawer>
Navigation drawers should be scrollable if you add the app option as per the documentation
I still had the problem once where I could not add the app option to the drawer since I had two drawers side by side.
I just added this style to my drawer and it did the trick :
calc(100% - 48px); height: 100vh;
For me, the problem was that i did not put the app attribute on th v-navigation-drawer
I just change:<v-navigation-drawer absolute temporary ></v-navigation-drawer>
For:
<v-navigation-drawer absolute temporary app ></v-navigation-drawer>
The adittion of app allow scrolling on my v-navigation-drawer
Just add app attribute to v-navigation-drawer tag
<v-navigation-drawer
temporary
app
width="280"
height="100vh"
>