Semantic UI: Collapsable sidebar with responsive content

Question

I'm trying to create an admin template with a sidebar that can be toggled. I want it to just slide in and out and the content resize accordingly. I've tried everything I can think of and nothing works.

Here is a sample of what I'm doing:

    <div class="ui vertical sidebar menu visible pushable">
    <a class="item">
        Item 1
    </a>

    <a class="item">
        Item 2
    </a>

    <a class="item">
        Item 3
    </a>
</div>

<div class="ui pusher">
    <div class="four column stackable ui grid">
        <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div>
        <div class="column">4</div>
    </div>
</div>

I tried using this and it almost works, but the reveal screws it up.

$('.ui.sidebar').sidebar({
    // Overlay will mean the sidebar sits on top of your content
    transition: 'overlay'
});

$('.ui.sidebar').sidebar('toggle');

It looks like this guy was able to do it, but I think he is using an older version of Semantic. I tried his same classes with no luck.

Any ideas?

Answer 1

Yes, I use old version here , but I think it is same in new version. To do responsive content, I write my custom CSS and JS. Also, I don't think comparing my code will help you in your case. I write this answer just to say, I think you can`t achieve this with only Semantic classes.

I think you must trigger window resize when sidebar is toggled.