Vue-material: Sidenav like vue-material site

[Dennisoost]

Hi!
So i was wondering if there is a (built-in) way to show the side nav like on the vue-material site?
https://marcosmoura.github.io/vue-material/#/
Can't seem to find it myself.

[marcosmoura]

Sorry, but I didn't understand. You mean the expansion lists? The sidenav sticked on the desktop version? Or the header with the logo?

[mixedCase]

@marcosmoura In simpler terms, is the source code for the website uploaded anywhere to see?

[marcosmoura]

@mixedCase Yes. Of course. It's on the docs folder of this repository. :)

[mixedCase]

Well after going through everything I have no idea how I should set-up md-sidenav to stay open by default when on a desktop. Any hints?

[marcosmoura]

Well. Right now Vue Material doesn't have any way (built in) to make the md-sidenav opened on desktop by default. I have plans to add this on the future along with other sidenav examples.
You can have the same thing adding a media query to your own css:

@media (min-width: 1280px) {
  .your-page-container {
    padding-left: 304px;
  }
}

The idea is to push the content of your page creating a space to "hold" the sidenav.
The trick is here: https://github.com/marcosmoura/vue-material/blob/master/docs/src/App.vue#L175

Let me know if you have success on this.
Put your code on codepen and I will fix this for you! :D
Thanks!

[mixedCase]

Thanks, but unfortunately no success. Nothing shows up in the space left by the padding.

Regardless, I simply reverted to a more performant solution I was previously using and did away with md-sidenav. Hope to see that functionality land! :)

[marcosmoura]

Oh. I think I forgot another thing:

@media (min-width: 1280px) {
  .md-sidenav-content {
    top: 0;
    pointer-events: auto;
    transform: translate3d(0, 0, 0); //This is the trick!
  }
}

Try this for one more time, please.

[mixedCase]

I have no way of importing the $material-shadow-2dp variable that I can think of.

[marcosmoura]

Yep. You're right. You don't even need this shadow. :)
I updated the snippet.

[mixedCase]

I'm afraid I already rearchitected everything to use flexbox with the old solution and honestly too tired to retry making sure that my own css doesn't prevent md-sidebar from working. I apologize :( But thanks for your help!

[marcosmoura]

Uh. Too bad! :(
I hope that you can try this later. I will try to prioritize this md-sidenav change.

[Morgul]

Just to chime in, the transform: translate3d(0, 0, 0); does the trick perfectly. For now, it's a reasonable work-around.

[ChristopherDosin]

+1 to have such a sidebar.

[marcosmoura]

154 #275

[Eder87rh]

@marcosmoura @mixedCase

transform: translate3d(0, 0, 0) !important;

works for me only with the !important css text :) thanks

[miclefebvre]

Needed the !important too. Thanks