Add a sidebar navigation to the styleguide

[jhilden]

For bigger styleguides it's very nice to have a fixed sidebar navigation to:
a) navigate to other parts of the styleguide
b) see where you are in the styleguide

This code inside my main .lsg file already works pretty decently:

@javascript-after transpiler: coffee-script
  $ ->
    $nav = $('<nav id="toc" class="lsg--toc"></nav>')

    $.each $('.lsg--anchor'), (index, anchor) ->
      $anchor = $ anchor
      $navLink = $ "<a href=\"#{$anchor.attr('href')}\">#{$anchor.parent().text()}</a>"
      $navLink.addClass "active" if index == 0
      $nav.append $navLink

    $('body').append $nav

    $(window).on 'scroll', ->
      scrollPosition = $(window).scrollTop()
      $firstVisibleHeadlineAnchor = $('.lsg--anchor').filter ->
        $(this).position().top >= scrollPosition

      $("#toc .active").removeClass 'active'
      $("#toc [href=#{$firstVisibleHeadlineAnchor.attr('href')}]").addClass 'active'

@sass
  @at-root
    .lsg--toc
      position: fixed
      top: 20px
      left: 0px
      width: 200px

      > a
        display: block
        padding: 2px 8px

        &.active
          font-weight: bold

      @media only screen and (max-width: 840px)
        display: none 

It's required that you have jQuery included in the stylguide.

It does not yet handle different levels of (sub)headlines.

This is what it currently looks like:

[hagenburger]

Our RailsGirlsSoC team planned on working on #72 next. This is a good start.

/cc @fanxhe-pair @freewomancode @anxhe

[jhilden]

Sounds good. Let me know if I can help in any way.

[hagenburger]

Let’s have the discussion in here. (FYI: They are based in Mexico and 7 h behind us.)

This should be released as a plugin. People might have very different requirements on a navigation.

I don’t know yet if we can implement everything in JavaScript. In future, the LivingStyleGuide should accept projects as inputs (in other words multiple in/output files). But maybe the navigation between and within a file are two different things anyway.

[jhilden]

I can see the idea behind making this a plugin, however I personally would think this would be something useful for almost every styleguide. But that's not really important.

But maybe the navigation between and within a file are two different things anyway.

I also think that the navigation between pages of the styleguide and the navigation within one file should be somewhat separate UI components.

[hagenburger]

For version 2 I’m fine with having it in. For later versions we should think about what is a core feature and what’s better delivered as plugin.

[anxhe]

We have thought about doing it with ruby, would you like we use a filter to allow the user to choose how to display the menu: horizontal or vertical.

For the vertical one, we could use Jakob's styles, using the lsg-- variables.

This afternoon we will be looking at how to do it with ruby.