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?
Related
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'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!
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"
>
i want to know if it's possible with bootstrap, to create the header with the logo and others informations, and then the navigation bar.
But the logo won't be fixe, only the navagation bar will be when it will be at the top of the page.
Here an example of header i'm trying to do with bootstrap
This partly depends on what you mean by "Header".
Often the "jumbotron" class is used as a header like this:
<div class="jumbotron"><img src='logo.png'>My Cool Company</div>
And the navigation bar is an independent element, specifically a navbar. It can be fixed on the page (scrolls with content) or Static on the screen (stays at the top or bottom)
Nabber example (always at the top):
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
Link 1
Link 2
</nav>
You can find the other details on the Bootstrap page for Navbar:
Bootstrap Components navbar Placement
And the placement in this example is "navbar-fixed-top" so that it stays at the top of the screen, even when scrolling.
You may also want the navigation under the header, and want both to scroll until the navbar hits the top of the screen where it would then be fixed at the the top. This is sometimes called a sticky navbar. It can be done with jQuery, but at this time, I don't know of a way in Bootstrap without adding custom javascript.
Sticky Menu in jQuery - answer
If you do want the second option, without jQuery, ask another question on how to use Javascript switch from Fixed to Static when scrolling past the top of the screen.
thank you for your answer, but i think it s not my question, and i think my solution is not related to jumbotron.
if you look at the link i have give below, you can see that the logo of the site (w3school.com) is on the top when we are on the top of the page.
when we scrool down, this logo will disapear and only the nav bar (home, html, css, ...) will stay at the top.