Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Always on #2

Closed
bubnenkoff opened this issue Feb 22, 2017 · 10 comments
Closed

Always on #2

bubnenkoff opened this issue Feb 22, 2017 · 10 comments

Comments

@bubnenkoff
Copy link

bubnenkoff commented Feb 22, 2017

Hi! I can't find place where I can set that menu was always shown. Could you help me?

I think it should be near :toggleSelectors="['.toggle-button']" @on-open="open" but I can't figure out what I should to do? Find and modify class toggle-button ?

I want to make it's active only on desktop by default and hidden on mobile devices. Is it's possible to do with css?

@vouill
Copy link
Owner

vouill commented Feb 22, 2017

try this

@bubnenkoff
Copy link
Author

Thanks! I tried, but something seems wrong (do not work for me).

I tried several variants and it's look like I should do something like this:

/* Desktop */    
@media only screen and (min-width: 768px) {    
    .slideout-menu {
        position: fixed;
        width: 256px;
        height: 100vh;
        -webkit-overflow-scrolling: touch;
        z-index: 0;
        display: none;
        background-color: #1D1F20;
        color: white;
    }
    .toggle-button 
    {
        display: none;
    }

    .slideout-panel { // <-- add this
    margin-left: 256px;
  }
    
}

But after adding it I am getting only white space on left side. I also tried to move here slideout-panel but don't get any result...

@bubnenkoff
Copy link
Author

I got it work!!!

@bubnenkoff
Copy link
Author

Just:

  .slideout-panel {
    margin-left: 256px;
  }

  .slideout-menu {
    display: block;
  }

@vouill
Copy link
Owner

vouill commented Feb 22, 2017

👍

@bubnenkoff
Copy link
Author

@vouill It's seems that it's do not work on mobile browsers :(
http://shm.code123.org

@bubnenkoff
Copy link
Author

And it can't be toggled :(

@bubnenkoff bubnenkoff reopened this Feb 22, 2017
@vouill
Copy link
Owner

vouill commented Feb 22, 2017

It does, your website doesnt use viewport :), add this to your<head></head> in index.html

<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">

@bubnenkoff
Copy link
Author

Thaaanks!!!

@vouill
Copy link
Owner

vouill commented Feb 22, 2017

To toggle it, add a button with any class name you want
in the example in the repo

<button class="toggle-button"></button>

is registered as a triggering button by this :

<Slideout :toggleSelectors="['.toggle-button']"> </Slideout>

it can also be an id, #id

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants