• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109

<template>
  <div>
    <!-- Icon and drawer. we only want these on mobile -->
      
    

    <v-toolbar app fixed clipped-right dark>
      <DialogLogin />
      <v-toolbar-items>
        <v-btn flat  to='/' id='navlogo'></v-btn>
      </v-toolbar-items>   
      <v-spacer></v-spacer>
      <v-btn flat  to='/about' hidden>About us</v-btn>
      <div v-if="$store.state.user.token">          
        <v-btn to='/dashboard' flat>My Dashboard</v-btn>          
      </div>
      <div v-else>
        <v-btn flat @click.native.stop="toggleDialog('login')">Log in</v-btn>
        <v-btn flat @click.native.stop="toggleDialog('register')">Register</v-btn>
      </div>
      <v-btn to='/crates' id='ship'>SHIP A CRATE</v-btn>    

      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      
    </v-toolbar>
    
    <v-navigation-drawer fixed right clipped app v-model="drawer">
        <v-list dense>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>dashboard</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dashboard</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
      </v-navigation-drawer>
  </div>

</template>
<script>  
  import DialogLogin from './DialogLogin'
  
  export default {
    components: {
      DialogLogin
    },
    data ()
    {
      return {
        drawer: false
      }
    },
    methods: {
    // Opens a LoginRegister dialog, displaying @form
    toggleDialog (form)
    {
      this.$store.dispatch('toggleDialog', {
        dialogKey: 'loginRegister',
        show: true,
        args: {
          form
        }
      })     
    },
   
    async logout()
    {
      var req = await axios.get(`${window.api}/api/user/logout`)
      if (req.data.result)
      {
        this.$router.push('/')
      }
    }
  }

    
  }
</script>

<style lang="stylus">
  @require '../assets/css/variables.styl'
  #navlogo
    color $blue
    //border 1px dashed $blue
    background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAAA0CAMAAAAntD+UAAAAAXNSR0IB2cksfwAAAFdQTFRFAAAANpa2Npm3OJq5MJW6N5q3OJezOI+vNZi4N5i3Npm4Npm3OJe3OJe6OJq3N5m2OJm5Npq5Npm5M5m5Npi4N5i2OJm5Npu5MI+vOZq2N5u4N5q3Npq3ty/N3wAAAB10Uk5TAIX1/zC/QCCP369fgGDgcKDv8FDQkMB/ED9Pn7BFTLMHAAAA+UlEQVR4nO3YzQ6DIAwAYLU4p1NRnOh+3v85Vx3GZQehhmbZRi/CwS+ApYpR9G0RJ+AxktioPtEpnq7XsU6RzCw2fC7pwgU2sJ9kRZqmDOyBOJvABnYHmx1zvBYnd9YSM1sulT8XLvc4ssXLK6XyxwLUEocpGmy1fsY7s6XpCAVAqhCb7DrxDntehvuWYGeAnoHFnNAMLK5Cy8A6bzra5q0AlBNHY3vb2u5ja1smENg1b6U1bwksDKPptNb8orCQD5dxvN6wpSybjMA2awFT3bZKYFUklVFra0Fw/arRGh991ms07w7F9ic/7QL7NyzTmZfphM70P4EjHv1IDqIEa7ZoAAAAAElFTkSuQmCC') no-repeat center
    background-size 80%
    

      
  nav 
    background #2d3e50!important
    //background #273337!important
    background white
  
    #ship
      background $darksalmon
      
      font-weight bold
</style>