jade nav

    if (user)
      ul#slide-out.side-nav.hide-on-med-and-down.z-depth-0.grey.lighten-5(style='transform: translateX(0px); ')
        li.light-blue.darken-3
          .userView
            //img.background(src='images/office.jpg')
            a(href='#!user')
              img.circle(src='#{grav}')
            a(href='#!name')
              span.white-text.name Email: #{user.username}
            a(href='#!email')
              span.white-text.email Key: #{user.id}
        li
          a(href='#!')
            i.material-icons cloud
            | Make a Call
        li
          .divider
        li
          .row
            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='1')
                i.center.white-text.d-pad 1
            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='2')
                i.center.white-text.d-pad 2
            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='3')
                i.center.white-text.d-pad 3

            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='4')
                i.center.white-text.d-pad 4
            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='5')
                i.center.white-text.d-pad 5
            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='6')
                i.center.white-text.d-pad 6

            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='7')
                i.center.white-text.d-pad 7
            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='8')
                i.center.white-text.d-pad 8
            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='9')
                i.center.white-text.d-pad 9

            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='*')
                i.center.white-text.d-pad *
            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='0')
                i.center.white-text.d-pad 0
            .col.s4
              a.btn-floating.btn-large.waves-effect.waves-light.light-blue.darken-4.dial(data-value='#')
                i.center.white-text.d-pad #

        li
          a.waves-effect(href='#!') Third Link With Waves
        #call-controls
          p.instructions Make a Call:
          input#phone-number(type='text', placeholder='Enter a phone # or client name')
          a.waves-effect.waves-light.btn-large.green#button-call Make a call
          //button#button-hangup Hangup
          a.waves-effect.waves-light.btn-large.red#button-hangup
            i.material-icons.left call_end
            |  End Call