palizvani-front-vite/src/components/Template/Header/UserPanelHeader.vue

<template>
  <div class="header-inside col">
    <div class="admin-top-menu">
      <div class="logo gt-sm">
        <router-link :to="{name: 'Public.Home'}">
          <q-img class="logo-image"
                 src="/assets/images/admin/layout/admin-logo.png" />
        </router-link>
      </div>
      <div class="top-menu-items">
        <div class="right-side">
          <q-btn flat
                 icon="menu"
                 class="lt-md"
                 @click="updateLayoutLeftDrawerVisible(true)" />
          <q-btn flat
                 class="items-center"
                 :to="{name: 'Public.Home'}">
            <q-icon name="home"
                    class="material-icons-outlined" />
            صفحه اصلی
          </q-btn>
        </div>
        <div class="left-side">
          <q-btn flat
                 :to="{name: 'UserPanel.Notice.List'}">
            <q-icon name="notifications_none" />
            پیام ها
            <q-badge v-if="myNotSeenNotificationsCount !== 0"
                     color="warning">
              {{ myNotSeenNotificationsCount }}
            </q-badge>
          </q-btn>
          <q-btn flat>
            <q-icon name="person"
                    class="material-icons-outlined" />
            {{ user.fullname() }}
            <q-menu>
              <q-list style="min-width: 100px">
                <q-item v-if="user.canSeeUserProfilePanel()"
                        v-close-popup
                        clickable
                        :to="{name: 'UserPanel.Profile.UserInfo'}">
                  <q-item-section>پروفایل</q-item-section>
                </q-item>
                <q-item v-close-popup
                        clickable
                        @click="logOut">
                  <q-item-section>خروج</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { User } from 'src/models/User.js'
import { APIGateway } from 'src/api/APIGateway.js'

export default {
  name: 'UserPanelHeader',
  data () {
    return {
      user: new User(),
      topMenuItems: [
        // {
        //   title: 'معرفی پروژه',
        //   scrollTo: '#introSection',
        //   routeName: 'aaaaaaaaaaaa'
        // },
        // {
        //   title: 'مجامع',
        //   scrollTo: '#majameSection',
        //   routeName: 'aaaaaaaaaaaa'
        // },
        // {
        //   title: 'مشاورین حقوقی',
        //   scrollTo: '#moshaverinSection',
        //   routeName: 'aaaaaaaaaaaa'
        // },
        // {
        //   title: 'تصاویر',
        //   scrollTo: '#gallerySection',
        //   routeName: 'aaaaaaaaaaaa'
        // },
        // {
        //   title: 'اخبار و رویدادها',
        //   scrollTo: '#newsSection',
        //   routeName: 'aaaaaaaaaaaa'
        // },
        // {
        //   title: 'ارتباط با ما',
        //   scrollTo: '#feedback',
        //   routeName: 'aaaaaaaaaaaa'
        // }
      ]
    }
  },
  computed: {
    myNotSeenNotificationsCount: {
      get () {
        return this.$store.getters['Auth/myNotSeenNotificationsCount']
      },
      set (newValue) {
        return this.$store.commit('Auth/updateMyNotSeenNotificationsCount', newValue)
      }
    },
    isAdminPage () {
      return this.$route.name && this.$route.name.includes('Admin.')
    },
    isProfilePage () {
      return this.$route.name && this.$route.name.includes('UserPanel.Profile.')
    },
    isHomePage () {
      return this.$route.name && this.$route.name === 'Public.Home'
    }
  },
  mounted () {
    this.loadAuthData()
  },
  methods: {
    getMyNotSeenNotificationsCount () {
      APIGateway.noticeReceiver.myNotSeenNotificationsCount()
        .then((count) => {
          this.myNotSeenNotificationsCount = count
        })
    },
    loadAuthData () {
      this.user = this.$store.getters['Auth/user']
    },
    ...mapMutations('AppLayout', [
      'updateLayoutLeftDrawerVisible'
    ]),
    goToHome () {
      this.$router.push({ name: 'Public.Home' })
    },
    goToAdminDashboard () {
      this.$router.push({ name: 'Admin.Content.Index' })
    },
    logOut () {
      this.$store.dispatch('Auth/logOut')
    },
    toggleLeftDrawer () {
      this.updateLayoutLeftDrawerVisible(true)
    },
    hasRoute (route) {
      if (!route) {
        return
      }
      return !!(route.name || route.path)
    },
    getRoute (route) {
      if (!this.hasRoute(route)) {
        return { name: null }
      }
      if (route.name) {
        return { name: route.name }
      } else if (route.path) {
        return { path: route.path }
      } else {
        return { name: null }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.header-inside {
  height: 70px;
  border-bottom: 1px solid #DFE1EC;
  .admin-top-menu {
    display: flex;
    flex-flow: row;
    height: 100%;
    background: #F6F7FB;
    .top-menu-items {
      width: calc( 100% - 240px );
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      .q-btn {
        height: 40px;
        padding: 4px 4px;
        svg {
          margin-right: 10px;
        }
      }
      .right-side {
        display: flex;
        flex-flow: row;
        align-items: center;
        padding-left: 50px;
        @media screen and (max-width: 1023px) {
          & {
            padding-left: 0;
          }
        }
      }
      .left-side {
        display: flex;
        flex-flow: row;
        align-items: center;
        padding-right: 50px;
        @media screen and (max-width: 1023px) {
          & {
            padding-right: 0;
          }
        }
      }
      @media screen and (max-width: 1023px) {
        & {
          width: 100%;
        }
      }
    }
    .logo {
      width: 240px;
      height: 100%;
      background: #FBF4EA;
      border-right: solid 1px #DFE1EC;
      display: flex;
      align-items: center;
      justify-content: center;
      .logo-image {
        width: 106px;
        height: auto;
      }
    }
  }
}

.top-menu-items {
  border-radius: 10px;
  @media screen and (max-width: 1023px) {
    & {
      margin-left: 0;
    }
  }
  @media only screen and (max-width: 500px) {
    .q-btn__content {
      margin: 4px;
      font-size: 0.7rem;
    }
  }
  @media only screen and (max-width: 400px) {
    .q-btn__content {
      margin: 3px;
      font-size: 0.6rem;
    }
  }
}

.breadcrumbs {
  .q-breadcrumbs__separator {
    .q-icon {
      font-size: 22px;
    }
  }
}

.drawer-btn {
  .q-btn {
    flex-direction: row !important;

    &.toolbar-button {
      margin-left: 0 !important;
    }
  }
}

.q-btn {
  &.toolbar-button {
    margin-left: 12px;
    height: 48px;
    width: 48px;
    box-shadow: -2px -4px 10px rgba(255, 255, 255, 0.6), 2px 4px 10px rgba(112, 108, 162, 0.05);
    border-radius: 16px;
    border: solid 1px #c5c5c5;
  }
}

.q-icon {
  padding: 2px;
}

.left-side {
  .q-btn {
    &.toolbar-button {
      .q-btn__content {
        .q-btn-dropdown__arrow {
          display: none !important;
        }
      }
    }
  }
}

.drawer-btn {
  display: none;
  @media screen and (max-width: 1439px) {
    & {
      display: block;
    }
  }
  @media screen and (max-width: 599px) {
    & {
      margin-bottom: 10px;
    }
  }
}

.right-side {
  display: flex;
  align-items: center;
  @media screen and (max-width: 1439px) {
    & {
      margin-left: 78px;
    }
  }
  @media screen and (max-width: 1023px) {
    & {
      margin-left: 42px;
    }
  }
  @media screen and (max-width: 599px) {
    & {
      margin-left: 16px;
    }
  }

  .breadcrumbs {
    &:deep(> *) {
      font-style: normal;
      font-weight: bold;
      font-size: 16px;
      line-height: 31px;
      text-align: right;
      color: #23263B;

      div:first-child {
        font-size: 18px;
      }
    }
  }
}

.left-side {
  display: flex;
  justify-content: flex-end;
  @media screen and (max-width: 1439px) {
    //position: absolute;
    //right: 30px;
  }
  @media screen and (max-width: 599px) {
    & {
      margin-right: 16px;
      align-items: center;
    }
  }
}
</style>