fe-accone/apps/components/oneNavbarComponent.vue

<template>
  <div>
    <one-menu-drawer :drawer="drawer"> </one-menu-drawer>
    <!-- <one-menu-notification :drawer="drawer_notification"> </one-menu-notification> -->
    <one-dialog-notification></one-dialog-notification>
    <v-toolbar id="topbar" fixed app>
      <v-toolbar-side-icon
        class="hidden-sm-and-down"
        style="color:#795548"
        @click.stop="togleDrawer()"
      ></v-toolbar-side-icon>
      <v-layout row>
        <v-flex class="pt-1" xs8>
          <p class="mb-0">
            <a
              href="#"
              style="
                padding-bottom: 0px;
                margin-bottom: 0px;
                text-decoration: none;
                color:#795548;
                font-size: 18px;
                font-weight: bold;
              "
              >ACCONE</a
            >
          </p>
          <p class="mb-0">
            <span
              style="text-decoration: none; color: #682913; font-size: 12px"
              class="ml-0 mt-0 bread-crumb"
              >{{ bread_crumb }}</span
            >
          </p>
        </v-flex>
        <v-flex xs4 class="mt-2 text-xs-right align-right">
          <a
            href="#"
            class="mt-3"
            style="
              min-height: 10px;
              text-decoration: none;
              color: #795548;
              font-size: 22px;
              margin-right: 15px;
            "
            >{{ xusername }}</a
          >
          <v-badge color="red">
            <template v-if="total > 0" v-slot:badge>
              <span>{{ total }}</span>
            </template>
            <v-btn
              class="pt-0 pb-2"
              icon
              @click="openNotification"
              flat
            >
              <v-icon style="color: #795548;" medium> notifications </v-icon>
            </v-btn>
          </v-badge>
        </v-flex>
      </v-layout>

      <!-- <v-btn class="ml-4" icon>
      <v-icon>apps</v-icon>
    </v-btn> -->

      <!-- PROFILE MENU -->
      <v-menu
        :close-on-content-click="true"
        :nudge-width="200"
        offset-overflow
        left
        bottom
      >
        <template v-slot:activator="{ on }">
          <v-btn class="" icon v-on="on">
            <v-icon style="color: #795548;">apps</v-icon>
          </v-btn>
        </template>

        <v-card>
          <v-list>
            <v-list-tile avatar>
              <v-list-tile-content>
                <v-list-tile-title>{{ xusername }}</v-list-tile-title>
                <v-list-tile-sub-title>{{ xstaffname }}</v-list-tile-sub-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>

          <v-divider></v-divider>

          <v-list>
            <v-list-tile @click="change_password">
              <v-list-tile-action>
                <v-icon>security</v-icon>
              </v-list-tile-action>
              <v-list-tile-title>Change Password</v-list-tile-title>
            </v-list-tile>
          </v-list>
          <v-list>
            <v-list-tile @click="logout">
              <v-list-tile-action>
                <v-icon>no_meeting_room</v-icon>
              </v-list-tile-action>
              <v-list-tile-title>Log Out</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-card>
      </v-menu>
      <!-- End of PROFILE MENU -->

      <one-cp></one-cp>
    </v-toolbar>
  </div>
</template>
<style scoped>
.bread-crumb {
  margin-left: 20px;
  font-weight: normal !important;
}
.v-badge__badge {
  top: 0px;
  right: 0px;
}
#topbar{
  background-color: #F2E5D3;
}
</style>
<script>
module.exports = {
  components: {
    "one-menu-drawer": httpVueLoader("./oneMenuDrawer.vue"),
    "one-cp": httpVueLoader("./oneChangePassword.vue"),
    "one-menu-notification": httpVueLoader("./oneNotificationDrawer.vue"),
    "one-dialog-notification": httpVueLoader("./oneDialogNotification.vue"),
  },

  data: function () {
    return {
      drawer: false,
      drawer_notification: false,
    };
  },
  watch: {
    is_page_allowed: function (new_ipa, old_ipa) {
      if (!new_ipa) {
        var dashboard = this.$store.state.system.dashboard;
        if (dashboard == "") {
          //this.logout()
          console.log("go-to", "logout");
        } else {
          //window.location.href = '/' + dashboard
          console.log("go-to dashboard", dashboard);
        }
      }
    },
  },
  mounted() {
    this.$store.dispatch("system/getlistnotif")
  },
  computed: {
    total() {
      return this.$store.state.system.total;
    },
    is_page_allowed() {
      return this.$store.state.system.is_page_allowed;
    },
    bread_crumb() {
      return this.$store.state.system.bread_crumb;
    },
    xusername() {
      var un = "";
      if (localStorage.getItem("user")) {
        var retrievedObject = localStorage.getItem("user");
        var dtuser = JSON.parse(retrievedObject);

        un = dtuser.M_UserUsername;
      }
      return un;
    },
    xstaffname() {
      var un = "";
      if (localStorage.getItem("user")) {
        var retrievedObject = localStorage.getItem("user");
        var dtuser = JSON.parse(retrievedObject);

        un = dtuser.M_StaffName;
      }
      return un;
    },
  },

  methods: {
    openNotification() {
      this.$store.commit("system/update_dialogNotification", true)
    },
    togleDrawer() {
      this.drawer = !this.drawer;
    },
    change_password() {
      this.$store.commit("system/update_change_password_dialog", true);
    },
    logout() {
      window.one_logout("/one-ui/test/vuex/one-login");
    },
  },
};
</script>