Top bar use buttons instead of primevue megamenu

1 year ago · f6fbebb3e4
parent 96f7c31924
commit f6fbebb3e4
4 changed files with 111 additions and 101 deletions
--- a/assets/css/scss/layout/_topbar.scss
+++ b/assets/css/scss/layout/_topbar.scss
@ -1,23 +1,74 @@
 .app-topbar {
-  @apply bg-white border-b border-solid border-gray-25 fixed left-0 p-4 top-0 w-full text-gray-50 z-10
+  @apply flex bg-white border-b border-solid border-gray-25 fixed left-0 p-4 top-0 w-full text-gray-50 z-10
    md:text-gray-90;
+
+  &__start {
+    @apply mr-auto;
+  }
+
+  &__items {
+    @apply flex grow justify-end items-center gap-6;
+  }
+
+  &__end {
+    @apply ml-6 flex items-center gap-6;
+  }
+
+  .item-button {
+    @apply w-6 h-6 relative;
+
+    .mdi,
+    &__icon {
+      @apply text-gray-50 inline-block transition-colors
+        hover:text-gray-90;
+      font-size: 18px;
+      line-height: 18px;
+      height: 18px;
+      width: 18px;
+
+      &::before {
+        font-size: 18px;
+        line-height: 18px;
+      }
+    }
+
+    &__badge {
+      @apply bg-error text-white rounded-full text-tiny font-semibold absolute;
+      height: 15px;
+      line-height: 14px;
+      right: -3px;
+      top: -4px;
+      width: 15px;
+    }
+
+    &--unread {
+      @apply text-gray-90;
+
+      .item-button__icon,
+      .mdi {
+        @apply text-gray-90;
+      }
+    }
+  }
+
+  .user-avatar {
+    @apply rounded-full w-6 h-6 text-white bg-primary leading-6 text-body-2 font-semibold;
+
+    img {
+      @apply rounded-full w-6 h-6;
+    }
+  }
 }

-.app-topbar.p-megamenu,
 .app-topbar .p-menubar {
  @apply flex;
 }

-.app-topbar.p-megamenu {
-  @apply md:px-6;
-}
-
 .app-topbar .p-menubar {
  @apply container mx-auto;
 }

 .app-topbar__user-submenu,
-.app-topbar.p-megamenu,
 .app-topbar .p-menubar {
  .p-menuitem-link {
    @apply rounded-none py-3 px-4 transition-none select-none;
@ -33,7 +84,6 @@
  }
 }

-.app-topbar .p-megamenu-root-list,
 .app-topbar .p-menubar-root-list {
  @apply bg-white grow justify-end;

@ -65,28 +115,6 @@
  }
 }

-.app-topbar.p-megamenu {
-  .p-megamenu-end {
-    @apply ml-3 flex items-center gap-3;
-  }
-
-  .p-megamenu-panel {
-    @apply border-none shadow-lg text-gray-90;
-  }
-
-  .p-megamenu-submenu-header {
-    @apply rounded-t-md font-semibold m-0 py-3 px-4;
-  }
-
-  .p-megamenu-submenu {
-    @apply py-1 px-0 w-52;
-
-    .p-menu-separator {
-      @apply border-t border-solid my-1 mx-0;
-    }
-  }
-}
-
 .app-topbar__user-submenu {
  @apply bg-white border-none rounded-lg shadow-lg py-3 px-0 w-52 max-h-60 overflow-y-auto;

--- a/assets/vue/components/basecomponents/ChamiloIcons.js
+++ b/assets/vue/components/basecomponents/ChamiloIcons.js
@ -108,4 +108,5 @@ export const chamiloIconToClass = {
  "courses": "mdi mdi-book-open-page-variant",
  "anonymous": "mdi mdi-incognito",
  "settings": "mdi mdi-tools",
+  "ticket": "mdi mdi-ticket-account",
 };
--- a/assets/vue/components/layout/Sidebar.vue
+++ b/assets/vue/components/layout/Sidebar.vue
@ -27,7 +27,7 @@
    />
  </aside>

-  <Teleport to=".p-megamenu .p-megamenu-end">
+  <Teleport to=".app-topbar__end">
    <a
      class="app-sidebar__topbar-button"
      tabindex="0"
--- a/assets/vue/components/layout/TopbarLoggedIn.vue
+++ b/assets/vue/components/layout/TopbarLoggedIn.vue
@ -1,51 +1,50 @@
 <template>
-  <MegaMenu
-    :model="menuItems"
-    class="app-topbar"
-  >
-    <template #start>
+  <div class="app-topbar">
+    <div class="app-topbar__start">
      <img
        :src="headerLogo"
        alt="Chamilo LMS"
      />
-    </template>
-
-    <template #item="{ item }">
-      <router-link
-        v-if="item.to"
-        :to="item.to"
-        class="p-menuitem-link"
-      >
-        <span
-          :class="item.icon"
-          class="p-menuitem-icon mx-0"
+    </div>
+    <div class="app-topbar__items">
+      <PrimeButton
+        v-if="'true' !== platformConfigStore.getSetting('display.show_link_ticket_notification')"
+        :icon="chamiloIconToClass['ticket']"
+        class="item-button"
+        icon-class="item-button__icon"
+        link
+        unstyled
+        @click="btnTicketsOnClick"
      />
-        <span class="p-menuitem-text hidden">{{ item.label }}</span>
-      </router-link>
-      <a
-        v-if="item.url"
-        :href="item.url"
-        aria-controls="user-submenu"
-        aria-haspopup="true"
-        class="p-menuitem-link"
-      >
-        <span
-          :class="item.icon"
-          class="p-menuitem-icon mx-0"
+
+      <PrimeButton
+        :icon="chamiloIconToClass['account']"
+        class="item-button"
+        icon-class="item-button__icon"
+        link
+        unstyled
+        @click="btnProfileOnClick"
      />
-        <span class="p-menuitem-text hidden">{{ item.label }}</span>
-      </a>
-    </template>

-    <template #end>
+      <PrimeButton
+        :icon="chamiloIconToClass['inbox']"
+        class="item-button"
+        icon-class="item-button__icon"
+        link
+        unstyled
+        @click="btnInboxOnClick"
+      />
+    </div>
+    <div class="app-topbar__end">
      <Avatar
        :image="currentUser.illustrationUrl"
-        class="cursor-pointer"
+        class="user-avatar"
        shape="circle"
+        unstyled
        @click="toogleUserMenu"
      />
-    </template>
-  </MegaMenu>
+    </div>
+  </div>

  <Menu
    id="user-submenu"
@ -58,12 +57,14 @@

 <script setup>
 import { ref } from "vue"
-import { useRoute } from "vue-router"
+import { useRouter } from "vue-router"

-import MegaMenu from "primevue/megamenu"
 import Avatar from "primevue/avatar"
 import Menu from "primevue/menu"
+import PrimeButton from "primevue/button"
 import { usePlatformConfig } from "../../store/platformConfig"
+import { chamiloIconToClass } from "../basecomponents/ChamiloIcons"
+import { useCidReq } from "../../composables/cidReq"

 import headerLogoPath from "../../../../assets/css/themes/chamilo/images/header-logo.svg"

@ -75,39 +76,19 @@ const props = defineProps({
  },
 })

-const route = useRoute()
+const router = useRouter()

 const platformConfigStore = usePlatformConfig()

-const menuItems = ref([
-  {
-    label: "Tickets",
-    icon: "pi pi-fw pi-ticket",
-    url: (function () {
-      const queryParams = new URLSearchParams(window.location.href)
-
-      const cid = route.query.cid || route.params.id || queryParams.get("cid") || 0
-      const sid = route.query.sid || queryParams.get("sid") || 0
-      const gid = route.query.gid || queryParams.get("gid") || 0
-
-      return `/main/ticket/tickets.php?project_id=1&cid=${cid}&sid=${sid}&gid=${gid}`
-    })(),
-    visible: "true" !== platformConfigStore.getSetting("display.show_link_ticket_notification"),
-    items: [],
-  },
-  {
-    label: "Profile",
-    icon: "pi pi-fw pi-user",
-    to: "/account/home",
-    items: [],
-  },
-  {
-    label: "Inbox",
-    icon: "pi pi-fw pi-inbox",
-    to: "/resources/messages",
-    items: [],
-  },
-])
+const btnTicketsOnClick = () => {
+  const { cid, sid, gid } = useCidReq()
+
+  window.location = window.location.origin + `/main/ticket/tickets.php?project_id=1&cid=${cid}&sid=${sid}&gid=${gid}`
+}
+
+const btnProfileOnClick = async () => await router.push({ name: "AccountHome" })
+
+const btnInboxOnClick = async () => await router.push({ name: "MessageList" })

 const elUserSubmenu = ref(null)
 const userSubmenuItems = [