collapsible menu at the left side

[wilzbach]

collapsible menu at the left side

[wilzbach]

Rust uses Git Book which also has this nice grouping:

http://rustbyexample.com/hello.html

[stonemaster]

@wilzbach Do have any experience with vertical side bars already in other frameworks? I feel like this getting a more and more important priority with new content coming up and user input. I just would like to prevent to write the CSS etc. stuff from scratch :-)

[wilzbach]

Unfortunately not really. Well I guess we have to throw away most parts of the dlang menu css, but apart from the mobile view, it shouldn't be that difficult.

Most css frameworks I know support such menu bar, but they come with rather heavy dependencies. However I am happy if you find something.

[PetarKirov]

The previous version of dlang.org had vetical sidebar, btw.

[wilzbach]

The previous version of dlang.org had vetical sidebar, btw.

There are a couple of pages still online with it, e.g. http://erdani.com/d/

(but of course we should go for a bit more modern menu)

[wilzbach]

I just gave this a quick try and I think it will get a bit messy, because we have to hack the CSS ourselves, but it seems doable :)

Open questions:

• mobile view (imho one of the bigger isuees))
• show we use this change to apply #54 too (fixed height for text and code)
• I think we need to make the menu categories collapsible (except the current one), because otherwise there's to much content
• should the menu bar itself be toggle-able? (like for the Rust Tour)

quick & dirty css overwrite styles (in case someone wants to continue this attempt):

#top {
    left: 0;
    width: 250px;
    display: inline-block;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#top #cssmenu > ul > li {
     float: none;
}

body .row {
    display: inline-block;
    position: absolute;
}

#top #cssmenu .expand-container > * {
    display: block;
}

#top #cssmenu > ul > li > ul {
    position: inherit;
    border: none;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}


#top > .helper {
     padding-left: 5px;
     padding-right: 5px;
}

#top a:hover, #top #cssmenu li.open > a, #top #cssmenu li.active > a {
     background: inherit;
}

.expand-content li {
    padding-left: 5px;
}