Vue.component("unix-navbar", {
 template: `<div class="neo-table-border vue-navbar"> 
	<div  class="vue-site-info">
                <a class="vue-site-link" :href="url">{{name}}</a>
              </div>
              <div id="avatar"  v-html="theavatar" @click="OpenMemberPanel()"></div>
            </div>`,

  data() {
    return {
      name: "The UNIX and Linux Forums",
      url: "https://www.unix.com/",
      id: vbuserId,
      avatar: vbtheURL
    };
  },
  computed:{
     theavatar: function () {
      if ( this.id > 0 )
        return '<img id="avatar-img" src="' + this.avatar + '"></img>';
      else   
       return '<i id="avatar-icon" class="fas fa-user"></span>';
    }
  },
  methods: {
    OpenMemberPanel() {
      if ( this.id > 0 )
        openMemberPanel();
      else
        openLogin();
    },
    GetUID() {
       this.id = vbuserId;
    }
  },
   created(){
    var timerID = setInterval(this.GetUID, 1000);
  }

});

var vm  =
  new Vue({
    el: "#vue-navbar"
  });