076server/resources/assets/js/components/site/components/navbar.vue

<template>
  <nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-md">
    <button type="button" aria-label="Toggle navigation" aria-controls="nav_collapse" aria-expanded="false" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
    <div class="navbar-brand" @click="$router.replace('/home')">０７６</div>
    <div id="nav_collapse" class="navbar-collapse collapse" style="display: none;" v-for="(m, i) in menuItem" :key="`menu-${i}`">
      <ul class="navbar-nav"><li class="nav-item"><a target="_self" :href="`/$(m.slug)`" class="nav-link">{{ m.title }}</a></li></ul>
    </div>
    <ul class="navbar-nav ml-auto" v-if="whoami === 0">
      <li class="nav-item"><a target="_self" href="https://user.076.ne.jp/#/login" class="nav-link">サインイン</a></li>
      <li class="nav-item"><a target="_self" href="https://user.076.ne.jp/#/register" class="nav-link">新規登録</a></li>
    </ul>
    <ul class="navbar-nav ml-auto" v-else>
      <!-- new-page v-if="canAddPage === 1" -->
      <li class="nav-item b-nav-dropdown dropdown" id="__BVID__9">
        <a href="#" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle" id="__BVID__9__BV_button_">
          <span v-if="notification.length === 0">通知</span>
          <span v-else>通知 {{ notification.length }}</span>
        </a>
        <ul v-if="notification.length > 0" tabindex="-1" class="dropdown-menu dropdown-menu-right" aria-labelledby="__BVID__9__BV_button_">
          <span>
            <li v-for="(n, j) in notification" :key="`tsuchi-${j}`" :href="n.url" @click="delNotify(n.id)"><a role="menuitem" target="_self" href="#" class="dropdown-item">{{ n.text }}</a></li>
          </span>
        </ul>
        <ul v-else tabindex="-1" class="dropdown-menu dropdown-menu-right" aria-labelledby="__BVID__9__BV_button_">
          <span>
            <li><a role="menuitem" target="_self" href="#" class="dropdown-item">通知がありません</a></li>
          </span>
        </ul>
      </li>
      <li class="nav-item b-nav-dropdown dropdown" id="__BVID__11">
        <a href="#" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle" id="__BVID__11__BV_button_">
          <img :src="`https://srv.076.ne.jp/${userAvatar}`" height="25px">
          <span :style="userColour">{{ userName }}</span>
        </a>
        <ul tabindex="-1" class="dropdown-menu dropdown-menu-right" aria-labelledby="__BVID__11__BV_button_">
          <li><a role="menuitem" target="_self" href="https://user.076.ne.jp/#/member" class="dropdown-item">ユーザーリスト</a></li>
          <li><a role="menuitem" target="_self" :href="`https://user.076.ne.jp/#/profile/${whoami}`" class="dropdown-item">プロファイル</a></li>
          <li><a role="menuitem" target="_self" href="#" @click="logout" class="dropdown-item">サインアウト</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

<script>
  import Vue from 'vue';
  import Cookie from 'js-cookie';
  import auth from '../../../auth';
  // import NewPage from './newpage';

  export default {
    // components: { NewPage },
    data: function () {
      return {
        whoami: 0,
        groupCol: [],
        showName: '',
        showCol: '',
        userName: '',
        userColour: '',
        userAvatar: '',
        menuItem: [],
        notification: [],
        canAddPage: 0
      }
    },
    created: function () {
      const tok = Cookie.get('kero_token');

      if (tok) {
        axios.post('/api/auth/getpermissions', {
          kero_token: tok
        }).then(res => {
          res.data.forEach(cb => {
            this.canAddPage = cb.blg_addpage;
          });
        });

        axios.post('/api/auth/checkauth', {
          kero_token: tok
        }).then(res => {
          this.whoami = res.data.id;
          axios.get('/api/rpc/user/user/getgroupcolours').then(res => {
            res.data.forEach(cb => {
              this.groupCol.push({
                'id': cb.id,
                'name': cb.name,
                'male': cb.colour_m,
                'female': cb.colour_f,
                'unknown': cb.colour_u
              });
            });
          }).then(() => {
            axios.get('/api/rpc/user/user/getuser/' + res.data.id, { params: { kero_token: tok } }).then(des => {
              des.data.forEach(cb => {
                if (cb.display_name !== '') this.showName = cb.display_name;
                else this.showName = cb.username;

                if (cb.name_style !== '') this.showCol = cb.name_style;
                else {
                  this.groupCol.forEach(re => {
                    if (re.id === cb.perm_id) {
                      if (cb.gender === 1) this.showCol = re.male;
                      else if (cb.gender === 2) this.showCol = re.female;
                      else this.showCol = re.unknown;
                    }
                  });
                }
                this.userName = this.showName;
                this.userAvatar = (cb.avatar !== '' ? cb.avatar : 'assets/avatars/haznoavaz.png');
                this.userColour = this.showCol;
              });
            });
          });
        });
      }
      axios.get('/api/rpc/site/page/get/menu', {
        params: {
          kero_token: Cookie.get('kero_token')
        }
      }).then(des => {
        des.data.forEach(cb => {
          this.menuItem.push({
            title: cb.title,
            slug: cb.slug,
            int: true
          });
        });
      }).then(() => {
        this.menuItem.push({
          title: 'サポート掲示板',
          slug: 'https://board.076.ne.jp',
          int: false
        });
      });
      axios.get('/api/rpc/user/notification/get', {
        params: {
          kero_token: Cookie.get('kero_token')
        }
      }).then(nes => {
        nes.data.forEach(cb => {
          this.notification.push(cb);
        });
      });
    },
    methods: {
      delNotify: function (id) {
        axios.post('/api/rpc/user/notification/del', {
          kero_token: Cookie.get('kero_token'),
          id: id
        });
      },
      logout: function () {
        auth.logout();
      }
    }
  }
</script>