nav.controls
  a(href="#")#btnMobile
    i.fa.fa-mobile(alt="Mobile icon")
  
header
  h1 
    | Responsive Sitemap 
    br
    | Flexbox
  p Click the button above or resize the browser window.
  
section.window
    h3.main.thick Main Navigation
    ul.row
      li.page.stretch.join.up.down
        .thin
          h3 Home
          ul.content
            li Hero carousel
              ul.section
                li Dispatch
                li Shopping
                li Food Delivery
                li Helper tasks
            li Partner logos
            li How to use
            li Why to use
            li Showcase
            li Become a GoGetter
      li.page.stretch.join.up.down
        .thin
          h3 Gateway
          ul.content
            li Option to download native apps
            li Log in
            li Register
      li.page.stretch.join.up.down
        .thin
          h3 FAQ
      li.page.stretch.join.up.down
        .thin
          h3 Blog
    h3.main.thick Footer Navigation
      ul.thin
        li Contact Info
        li Copyright info
    ul.row
      li.page.join.down
        .thin
          h3 GoGet for Business
          ul.content
            li Option to download native apps
            li Log in
            li Register
      li.page.join.down
        .thin
          h3 Become a GoGetter
          ul.content
            li Benefits of Gogetting
            li Ground Rules
      li.page.join.down
        .thin
          h3 Sign Up Form
      li.page.join.down
        .thin
          h3 About GoGet
          ul.content
            li About GoGet
            li Our Community
            li Our Values
            li The Team
            li Link to Vacanies
      li.page.join.down
        .thin
          h3 Staff Vacancies
      li.page.join.down
        .thin
          h3 Terms of Service

$paper:   #ffeefa
$ink:     blue
$bg:      #ccc

body
  color:            $ink
  background:       $bg
  margin:           auto
  
div, ul, li, h3, h1, p
  font-family:      'Roboto Mono', monospace
  font-size:        10px
  line-height:      15px
  text-transform:   uppercase
  margin:     0
  padding:    0
  word-break: break-word

h1
  font-weight: 700
  
li
  font-weight: 400  
  list-style: none

  
@mixin pageCollapse
  display:  block
  height:   126px
  position: relative
  
  ul.content
    opacity: 0
  h3
    position:         absolute
    left:             1em
    top:              0.25em
    transform:        rotate(90deg)
    width:            300px

.join,
.up::after,
.down::before
  background-position: 50% 50%
  
.up::after,
.down::before
  background-repeat: no-repeat
  content: ''
  display: block
  height: 20px
  
.up::after
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjQiIHZpZXdCb3g9IjAgMCA3IDQiPjxwYXRoIGZpbGw9IiMwMEYiIGQ9Ik0xIDRWM2gxVjJoM3YxaDF2MWgxVjJINlYxSDVWMEgydjFIMXYxSDB2MiIvPjwvc3ZnPg==)

.down::before 
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI3cHgiIGhlaWdodD0iNHB4IiB2aWV3Qm94PSIwIDAgNyA0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3IDQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiMwMDAwRkYiIHBvaW50cz0iNiwwIDYsMSA1LDEgNSwyIDIsMiAyLDEgMSwxIDEsMCAwLDAgMCwyIDEsMiAxLDMgMiwzIDIsNCA1LDQgNSwzIDYsMyA2LDIgNywyIDcsMCAiLz48L3N2Zz4=)
  
.join
  background-repeat: repeat-y
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxcHgiIGhlaWdodD0iMXB4IiB2aWV3Qm94PSIwIDAgMSAxIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxIDEiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMwMDAwRkYiIGQ9Ik0wLDBoMXYxSDBWMHoiLz48L3N2Zz4=)

.thin,
.thick
  background: $paper

.thin
  border: 1px solid $ink
  padding: 0.5em

.thick
  border: 3px solid $ink
  padding: 1.5em

.main
  text-align: center

  ul
    display: block
    width: 150px
    margin: 1em auto 0 auto

ul.row
  width: 100%
  display: flex
  align-items: flex-start
  
  li.page
    flex:         1
    margin:       0 0.5em

    &.stretch
      align-self: stretch

    &:first-child
      margin-left:  0

    &:last-child
      margin-right: 0

    h3 + ul.content
      margin-top: 1.5em

    ul.content li
      border-top: 1px solid $ink
      padding:    2px 0
      
      ul.section li
        border-top: none
        padding:    0
        &:before
          content:  "― "



section.window
  background:  $paper
  transition:  max-width 400ms ease-in-out
  max-width:   600px
  height:      100vh
  padding:     20px
  margin:      auto
  z-index:     99
  
  .thin
    h3
      will-change: auto
      transition: transform 400ms ease-in-out
      transform-origin: 0 50%

    ul.content
      transition: opacity 200ms ease
      opacity: 1
  
section.window.narrow
  max-width:   300px
  li.page
    .thin
      @include pageCollapse
      
@media (max-width: 560px)
  li.page
    .thin
      @include pageCollapse
        
        
        
        
        
// Demo
header
  position: absolute
  bottom: 20px
  left: 20px
  max-width: 170px
  color: black
  z-index: -1

nav.controls
  position: fixed
  top: 20px
  left: 20px
  z-index: 99
  max-width: 170px
  color: black
  a
    text-align: center
    list-style: none
    font-size: 35px
    height: 70px
    width: 70px
    background: white
    border-radius: 4px
    display: table-cell
    vertical-align: middle
    color: $ink 
    &.active
      background: $ink
      color:     white
        

var viewbox = 'section.window';
var bToggle = '#btnMobile';

function fToggle(){
    $(bToggle).toggleClass('active');
    $(viewbox).toggleClass('narrow');
};

$(bToggle).click(function(e){
  e.preventDefault();
  fToggle();
});

$( document ).ready( function(){
  fToggle();
});


$( window ).resize(function() {
  $(bToggle).removeClass('active');
  $(viewbox).removeClass('narrow');
});