%article
  %header
    %h1 TopBar
    %a{ href: '/styleguide/' } Back to Index
  %hr
  %pre closed on small
  %nav.topbar.js-topbar{role: 'navigation'}
    .topbar__mobile-menu
      %button
        Menu
        - streusel_icon( 'menu')
    %ul.topbar__list
      %li.topbar__item
        %a{ href: '#'} Nav content 1
      %li.topbar__item.topbar__item--active
        %a{ href: '#'} Nav active 1
      %li.topbar__item
        %a{ href: '#'} Nav long long 1
      %li.topbar__item
        %a{ href: '#'} Nav another 1
      %li.topbar__item
        %a{ href: '#'} Nav last 1

  %hr.sc-hr-alternate
  %pre 1lvl open on small (.topbar--open)
  %nav.topbar.js-topbar.topbar--open{role: 'navigation'}
    .topbar__mobile-menu
      %button
        Menu
        - streusel_icon( 'menu')
    %ul.topbar__list
      %li.topbar__item
        %a{ href: '#'} Nav content 1
      %li.topbar__item.topbar__item--active
        %a{ href: '#'} Nav active 1
        %ul.topbar__sub-list
          %li.topbar__sub-item
            %a{ href: '#'} Nav content 1
          %li.topbar__sub-item
            %a{ href: '#'} Nav active 1
      %li.topbar__item
        %a{ href: '#'} Nav long long 1
      %li.topbar__item
        %a{ href: '#'} Nav another 1
      %li.topbar__item
        %a{ href: '#'} Nav last 1

  %hr.sc-hr-alternate
  %pre 1lvl open on small, 2lvl level open (.topbar__sub-list--open)
  %nav.topbar.js-topbar.topbar--open{role: 'navigation'}
    .topbar__mobile-menu
      %button
        Menu
        - streusel_icon( 'menu')
    %ul.topbar__list
      %li.topbar__item
        %a{ href: '#'} Nav with sub 1
      %li.topbar__item.topbar__item--active
        %a{ href: '#'} Nav with sub 1
        %ul.topbar__sub-list.topbar__sub-list--open
          %li.topbar__sub-item
            %a{ href: '#'} Nav content 1
          %li.topbar__sub-item
            %a{ href: '#'} Nav active 1
      %li.topbar__item
        %a{ href: '#'} Nav long long 1 Nav long long 1 Nav long long 1
      %li.topbar__item
        %a{ href: '#'} Nav another 1
      %li.topbar__item
        %a{ href: '#'} Nav last 1

  %hr.sc-hr-alternate