@apptegy/nuxt-navigation 0.1.125 → 0.2.0-alpha.0

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.125",
+  "version": "0.2.0-alpha.0",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

package/dist/runtime/components/Nav/Avatar.vue

@@ -1,7 +1,33 @@
 <template>
-  <div class="avatar-container">
-    <img v-if="src" :src="src" class="avatar-size" alt="">
-    <span v-else class="avatar-size">
+  <PAvatar
+    v-if="isBeaconNavEnabled"
+    :image="src || void 0"
+    :label="!src ? initials : void 0"
+    class="beacon-avatar"
+    shape="square"
+    size="normal"
+  >
+    <template
+      v-if="!src && !initials"
+      #icon
+    >
+      <Icon name="lucide:user" />
+    </template>
+  </PAvatar>
+  <div
+    v-else
+    class="avatar-container"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      class="avatar-size"
+      alt=""
+    />
+    <span
+      v-else
+      class="avatar-size"
+    >
       {{ initials }}
     </span>
     <svg
@@ -14,22 +40,39 @@
       xmlns="http://www.w3.org/2000/svg"
       aria-label="Impersonated user"
     >
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6263 1.6087C13.0678 2.13532 13.3333 2.81151 13.3333 3.54897C13.3333 5.22916 11.9559 6.59105 10.2565 6.59105C10.1797 6.59105 10.1036 6.58826 10.0282 6.58278C10.1737 6.83855 10.2567 7.13375 10.2567 7.44821C10.2566 7.73741 10.1864 8.01033 10.0619 8.25129C11.0877 8.74406 11.795 9.78216 11.7952 10.9856C11.7952 11.5456 11.3356 12 10.7692 12H2.56467C1.99821 12 1.53867 11.5456 1.53867 10.9856C1.53881 9.78225 2.2461 8.74396 3.27171 8.25107C3.14726 8.01017 3.07705 7.73732 3.077 7.44821C3.077 7.13376 3.16002 6.83855 3.30555 6.58278C3.23004 6.58826 3.15377 6.59105 3.07683 6.59105C1.37761 6.59088 0 5.22905 0 3.54897C7.92599e-05 2.81135 0.265697 2.13503 0.707484 1.60836C0.585132 1.44137 0.513 1.23606 0.513 1.01408C0.513 0.454021 0.972207 0 1.53867 0H4.61567C5.18213 0 5.64133 0.454021 5.64133 1.01408C5.64133 1.2362 5.56911 1.44165 5.4466 1.6087C5.85423 2.09487 6.11177 2.70851 6.14899 3.38016H7.18434C7.22158 2.70836 7.47929 2.09458 7.88715 1.60836C7.7648 1.44137 7.69267 1.23605 7.69267 1.01408C7.69267 0.454021 8.15187 0 8.71833 0H11.7953C12.3618 0 12.821 0.454021 12.821 1.01408C12.821 1.2362 12.7488 1.44165 12.6263 1.6087ZM8.90015 2.02817C8.47434 2.39969 8.20577 2.94329 8.20567 3.54897C8.20567 4.66898 9.12373 5.57762 10.2565 5.57779C11.3894 5.57779 12.3085 4.66909 12.3085 3.54897C12.3084 2.94329 12.0396 2.39969 11.6136 2.02817H8.90015ZM5.64083 8.70988C5.64083 9.12681 6.24532 9.46433 6.66701 9.46433C7.0887 9.46433 7.69283 9.12681 7.69283 8.70988C7.69284 8.57344 7.74842 8.44248 7.84708 8.34709C7.94289 8.25457 8.07191 8.20267 8.20583 8.20267H8.46759C8.8892 8.20267 9.23051 7.86502 9.23067 7.44821C9.23067 7.03128 8.88929 6.6926 8.46759 6.6926H8.20583C7.96517 6.6926 7.75636 6.52752 7.70452 6.29516L7.28033 4.39457H6.05334L5.62915 6.29516C5.57734 6.52735 5.36945 6.69237 5.129 6.6926H4.86607C4.44452 6.69277 4.103 7.03138 4.103 7.44821C4.10316 7.86492 4.44462 8.2025 4.86607 8.20267H5.129L5.2295 8.21307C5.32786 8.23262 5.41926 8.28053 5.49126 8.35171C5.58728 8.44677 5.64082 8.57552 5.64083 8.70988ZM1.026 3.54897C1.0261 2.94329 1.29467 2.39969 1.72048 2.02817H4.43389C4.85992 2.39969 5.12874 2.94329 5.12883 3.54897C5.12883 4.66909 4.20975 5.57779 3.07683 5.57779C1.94407 5.57762 1.026 4.66898 1.026 3.54897Z" fill="black"/>
-      <path d="M1.026 3.54897C1.0261 2.94329 1.29467 2.39969 1.72048 2.02817H4.43389C4.85992 2.39969 5.12874 2.94329 5.12883 3.54897C5.12883 4.66909 4.20975 5.57779 3.07683 5.57779C1.94407 5.57762 1.026 4.66898 1.026 3.54897Z" fill="#C8D5F0"/>
-      <path d="M8.90015 2.02817C8.47434 2.39969 8.20577 2.94329 8.20567 3.54897C8.20567 4.66898 9.12373 5.57762 10.2565 5.57779C11.3894 5.57779 12.3085 4.66909 12.3085 3.54897C12.3084 2.94329 12.0396 2.39969 11.6136 2.02817H8.90015Z" fill="#C8D5F0"/>
-      <path d="M5.64083 8.70988C5.64083 9.12681 6.24532 9.46433 6.66701 9.46433C7.0887 9.46433 7.69283 9.12681 7.69283 8.70988C7.69284 8.57344 7.74842 8.44248 7.84708 8.34709C7.94289 8.25457 8.07191 8.20267 8.20583 8.20267H8.46759C8.8892 8.20267 9.23051 7.86502 9.23067 7.44821C9.23067 7.03128 8.88929 6.6926 8.46759 6.6926H8.20583C7.96517 6.6926 7.75636 6.52752 7.70452 6.29516L7.28033 4.39457H6.05334L5.62915 6.29516C5.57734 6.52735 5.36945 6.69237 5.129 6.6926H4.86607C4.44452 6.69277 4.103 7.03138 4.103 7.44821C4.10316 7.86492 4.44462 8.2025 4.86607 8.20267H5.129L5.2295 8.21307C5.32786 8.23262 5.41926 8.28053 5.49126 8.35171C5.58728 8.44677 5.64082 8.57552 5.64083 8.70988Z" fill="#E4B7B7"/>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.6263 1.6087C13.0678 2.13532 13.3333 2.81151 13.3333 3.54897C13.3333 5.22916 11.9559 6.59105 10.2565 6.59105C10.1797 6.59105 10.1036 6.58826 10.0282 6.58278C10.1737 6.83855 10.2567 7.13375 10.2567 7.44821C10.2566 7.73741 10.1864 8.01033 10.0619 8.25129C11.0877 8.74406 11.795 9.78216 11.7952 10.9856C11.7952 11.5456 11.3356 12 10.7692 12H2.56467C1.99821 12 1.53867 11.5456 1.53867 10.9856C1.53881 9.78225 2.2461 8.74396 3.27171 8.25107C3.14726 8.01017 3.07705 7.73732 3.077 7.44821C3.077 7.13376 3.16002 6.83855 3.30555 6.58278C3.23004 6.58826 3.15377 6.59105 3.07683 6.59105C1.37761 6.59088 0 5.22905 0 3.54897C7.92599e-05 2.81135 0.265697 2.13503 0.707484 1.60836C0.585132 1.44137 0.513 1.23606 0.513 1.01408C0.513 0.454021 0.972207 0 1.53867 0H4.61567C5.18213 0 5.64133 0.454021 5.64133 1.01408C5.64133 1.2362 5.56911 1.44165 5.4466 1.6087C5.85423 2.09487 6.11177 2.70851 6.14899 3.38016H7.18434C7.22158 2.70836 7.47929 2.09458 7.88715 1.60836C7.7648 1.44137 7.69267 1.23605 7.69267 1.01408C7.69267 0.454021 8.15187 0 8.71833 0H11.7953C12.3618 0 12.821 0.454021 12.821 1.01408C12.821 1.2362 12.7488 1.44165 12.6263 1.6087ZM8.90015 2.02817C8.47434 2.39969 8.20577 2.94329 8.20567 3.54897C8.20567 4.66898 9.12373 5.57762 10.2565 5.57779C11.3894 5.57779 12.3085 4.66909 12.3085 3.54897C12.3084 2.94329 12.0396 2.39969 11.6136 2.02817H8.90015ZM5.64083 8.70988C5.64083 9.12681 6.24532 9.46433 6.66701 9.46433C7.0887 9.46433 7.69283 9.12681 7.69283 8.70988C7.69284 8.57344 7.74842 8.44248 7.84708 8.34709C7.94289 8.25457 8.07191 8.20267 8.20583 8.20267H8.46759C8.8892 8.20267 9.23051 7.86502 9.23067 7.44821C9.23067 7.03128 8.88929 6.6926 8.46759 6.6926H8.20583C7.96517 6.6926 7.75636 6.52752 7.70452 6.29516L7.28033 4.39457H6.05334L5.62915 6.29516C5.57734 6.52735 5.36945 6.69237 5.129 6.6926H4.86607C4.44452 6.69277 4.103 7.03138 4.103 7.44821C4.10316 7.86492 4.44462 8.2025 4.86607 8.20267H5.129L5.2295 8.21307C5.32786 8.23262 5.41926 8.28053 5.49126 8.35171C5.58728 8.44677 5.64082 8.57552 5.64083 8.70988ZM1.026 3.54897C1.0261 2.94329 1.29467 2.39969 1.72048 2.02817H4.43389C4.85992 2.39969 5.12874 2.94329 5.12883 3.54897C5.12883 4.66909 4.20975 5.57779 3.07683 5.57779C1.94407 5.57762 1.026 4.66898 1.026 3.54897Z"
+        fill="black"
+      />
+      <path
+        d="M1.026 3.54897C1.0261 2.94329 1.29467 2.39969 1.72048 2.02817H4.43389C4.85992 2.39969 5.12874 2.94329 5.12883 3.54897C5.12883 4.66909 4.20975 5.57779 3.07683 5.57779C1.94407 5.57762 1.026 4.66898 1.026 3.54897Z"
+        fill="#C8D5F0"
+      />
+      <path
+        d="M8.90015 2.02817C8.47434 2.39969 8.20577 2.94329 8.20567 3.54897C8.20567 4.66898 9.12373 5.57762 10.2565 5.57779C11.3894 5.57779 12.3085 4.66909 12.3085 3.54897C12.3084 2.94329 12.0396 2.39969 11.6136 2.02817H8.90015Z"
+        fill="#C8D5F0"
+      />
+      <path
+        d="M5.64083 8.70988C5.64083 9.12681 6.24532 9.46433 6.66701 9.46433C7.0887 9.46433 7.69283 9.12681 7.69283 8.70988C7.69284 8.57344 7.74842 8.44248 7.84708 8.34709C7.94289 8.25457 8.07191 8.20267 8.20583 8.20267H8.46759C8.8892 8.20267 9.23051 7.86502 9.23067 7.44821C9.23067 7.03128 8.88929 6.6926 8.46759 6.6926H8.20583C7.96517 6.6926 7.75636 6.52752 7.70452 6.29516L7.28033 4.39457H6.05334L5.62915 6.29516C5.57734 6.52735 5.36945 6.69237 5.129 6.6926H4.86607C4.44452 6.69277 4.103 7.03138 4.103 7.44821C4.10316 7.86492 4.44462 8.2025 4.86607 8.20267H5.129L5.2295 8.21307C5.32786 8.23262 5.41926 8.28053 5.49126 8.35171C5.58728 8.44677 5.64082 8.57552 5.64083 8.70988Z"
+        fill="#E4B7B7"
+      />
     </svg>
   </div>
 </template>
 
 <script setup>
+import PAvatar from "primevue/avatar";
 import { computed } from "vue";
 const props = defineProps({
   src: { type: String, required: false },
   name: { type: String, required: true },
-  isImpersonated: { type: Boolean, required: false }
+  isImpersonated: { type: Boolean, required: false },
+  isBeaconNavEnabled: { type: Boolean, required: true }
 });
 const initials = computed(() => {
+  if (!props.name) return "";
   const initials2 = props.name.match(/\b\w/g) || [];
   return ((initials2.shift() || "") + (initials2.pop() || "")).toUpperCase();
 });
@@ -81,4 +124,17 @@ img {
   width: 14px;
   height: 14px;
 }
+
+.beacon-avatar {
+  min-width: 28px;
+  min-height: 28px;
+  max-width: 28px;
+  max-height: 28px;
+}
+.beacon-avatar span {
+  width: 24px;
+  height: 24px;
+  background-color: #2d2d2d;
+  border-radius: 8px;
+}
 </style>

package/dist/runtime/components/Nav/Avatar.vue.d.ts

@@ -11,6 +11,10 @@ interface IAvatarProps {
      * Indicates if the user is being impersonated.
      */
     isImpersonated?: boolean;
+    /**
+     * Indicates if the beacon nav is enabled.
+     */
+    isBeaconNavEnabled: boolean;
 }
 declare const _default: import("vue").DefineComponent<IAvatarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Nav/Header.vue

@@ -1,7 +1,6 @@
 <template>
   <header
-    class="header"
-    :class="{ sticky }"
+    :class="['header', isBeaconNavEnabled ? 'beacon' : 'classic', { sticky }]"
     role="banner"
   >
     <div class="header__breadcrumbs">
@@ -16,128 +15,131 @@
           v-if="showNotifications"
           class="header__notifications"
         >
-        <Button
-          type="button"
-          severity="secondary"
-          text
-          rounded
-          class="notification-bell"
-          :class="{ 'notification-bell--active': panelOpen }"
-          :aria-label="$t('navigation.notifications')"
-          :aria-expanded="panelOpen"
-          aria-haspopup="dialog"
-          @click="onBellClick"
-        >
-          <svg
-            class="notification-bell__icon"
-            :class="{ 'notification-bell__icon--shaking': isBellShaking }"
-            xmlns="http://www.w3.org/2000/svg"
-            width="22"
-            height="22"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-            @animationend="onBellShakeEnd"
-          >
-            <path d="M10.268 21a2 2 0 0 0 3.464 0" />
-            <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
-          </svg>
-          <span
-            v-if="notificationCount > 0"
-            class="notification-bell__badge"
-            aria-hidden="true"
+          <Button
+            type="button"
+            severity="secondary"
+            text
+            rounded
+            class="notification-bell"
+            :class="{ 'notification-bell--active': panelOpen }"
+            :aria-label="$t('navigation.notifications')"
+            :aria-expanded="panelOpen"
+            aria-haspopup="dialog"
+            @click="onBellClick"
           >
-            {{ formattedNotificationCount }}
-          </span>
-        </Button>
+            <svg
+              class="notification-bell__icon"
+              :class="{ 'notification-bell__icon--shaking': isBellShaking }"
+              xmlns="http://www.w3.org/2000/svg"
+              width="22"
+              height="22"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+              @animationend="onBellShakeEnd"
+            >
+              <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+              <path
+                d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+              />
+            </svg>
+            <span
+              v-if="notificationCount > 0"
+              class="notification-bell__badge"
+              aria-hidden="true"
+            >
+              {{ formattedNotificationCount }}
+            </span>
+          </Button>
+
+          <slot name="notifications">
+            <Popover
+              v-if="!isMobilePanel"
+              ref="popoverRef"
+              append-to="body"
+              class="notifications-popover"
+              :pt="popoverPt"
+              @show="onPanelShow"
+              @hide="onPanelHide"
+            >
+              <NavNotificationsPanel
+                v-if="notificationsPanel"
+                embedded
+                :data="notificationsPanel"
+                :loading="notificationsLoading"
+                :active-tab-id="activeTabId"
+                :active-filter-id="activeFilterId"
+                :filter-catalog="filterCatalog"
+                @update:active-tab-id="handleTabChange"
+                @update:active-filter-id="handleFilterChange"
+                @update:filter-catalog="filterCatalog = $event"
+                @clear-all="(payload) => $emit('notifications-clear-all', payload)"
+                @dismiss="(payload) => $emit('notifications-dismiss', payload)"
+                @select="handleNotificationSelect"
+              />
+            </Popover>
 
-        <slot name="notifications">
-          <Popover
-            v-if="!isMobilePanel"
-            ref="popoverRef"
-            append-to="body"
-            class="notifications-popover"
-            :pt="popoverPt"
-            @show="onPanelShow"
-            @hide="onPanelHide"
+            <Teleport
+              v-else
+              to="body"
+            >
+              <NavNotificationsPanel
+                v-if="notificationsPanel && panelOpen"
+                embedded
+                mobile
+                :data="notificationsPanel"
+                :loading="notificationsLoading"
+                :active-tab-id="activeTabId"
+                :active-filter-id="activeFilterId"
+                :filter-catalog="filterCatalog"
+                @update:active-tab-id="handleTabChange"
+                @update:active-filter-id="handleFilterChange"
+                @update:filter-catalog="filterCatalog = $event"
+                @clear-all="(payload) => $emit('notifications-clear-all', payload)"
+                @dismiss="(payload) => $emit('notifications-dismiss', payload)"
+                @select="handleNotificationSelect"
+                @close="closeNotificationsPanel"
+              />
+            </Teleport>
+          </slot>
+        </div>
+        <NavUserDropdown
+          :user="user"
+          :user-dropdown-options="userDropdownOptions"
+          :impersonated-user="impersonatedUser"
+          @select-option="(index) => $emit('selected-option', index)"
+        />
+        <template v-if="impersonatedUser?.show">
+          <button
+            v-if="useLogoutEmit"
+            class="logout-impersonate-user"
+            :aria-label="$t('accountSettings.signOut')"
+            @click="$emit('user-logout')"
           >
-            <NavNotificationsPanel
-              v-if="notificationsPanel"
-              embedded
-              :data="notificationsPanel"
-              :loading="notificationsLoading"
-              :active-tab-id="activeTabId"
-              :active-filter-id="activeFilterId"
-              :filter-catalog="filterCatalog"
-              @update:active-tab-id="handleTabChange"
-              @update:active-filter-id="handleFilterChange"
-              @update:filter-catalog="filterCatalog = $event"
-              @clear-all="(payload) => $emit('notifications-clear-all', payload)"
-              @dismiss="(payload) => $emit('notifications-dismiss', payload)"
-              @select="handleNotificationSelect"
+            <a-icon
+              class="icon"
+              :icon="'16:logout'"
+              font-size="20px"
+              color="#662E80"
             />
-          </Popover>
-
-          <Teleport
+          </button>
+          <NuxtLink
             v-else
-            to="body"
+            class="logout-impersonate-user"
+            :to="'/logout'"
           >
-            <NavNotificationsPanel
-              v-if="notificationsPanel && panelOpen"
-              embedded
-              mobile
-              :data="notificationsPanel"
-              :loading="notificationsLoading"
-              :active-tab-id="activeTabId"
-              :active-filter-id="activeFilterId"
-              :filter-catalog="filterCatalog"
-              @update:active-tab-id="handleTabChange"
-              @update:active-filter-id="handleFilterChange"
-              @update:filter-catalog="filterCatalog = $event"
-              @clear-all="(payload) => $emit('notifications-clear-all', payload)"
-              @dismiss="(payload) => $emit('notifications-dismiss', payload)"
-              @select="handleNotificationSelect"
-              @close="closeNotificationsPanel"
+            <a-icon
+              class="icon"
+              :icon="'16:logout'"
+              font-size="20px"
+              color="#662E80"
             />
-          </Teleport>
-        </slot>
-      </div>
-      <NavUserDropdown
-        :user="user"
-        :user-dropdown-options="userDropdownOptions"
-        :impersonated-user="impersonatedUser"
-        @select-option="(index) => $emit('selected-option', index)"
-      />
-      <template v-if="impersonatedUser?.show">
-        <button
-          v-if="useLogoutEmit"
-          class="logout-impersonate-user"
-          :aria-label="$t('accountSettings.signOut')"
-          @click="$emit('user-logout')">
-          <a-icon
-            class="icon"
-            :icon="'16:logout'"
-            font-size="20px"
-            color="#662E80"
-          />
-        </button>
-        <NuxtLink
-          v-else
-          class="logout-impersonate-user"
-          :to="'/logout'"
-        >
-          <a-icon
-            class="icon"
-            :icon="'16:logout'"
-            font-size="20px"
-            color="#662E80"
-          />
-        </NuxtLink>
-      </template>
+          </NuxtLink>
+        </template>
       </div>
     </div>
   </header>
@@ -146,13 +148,10 @@
 <script setup>
 import { computed, nextTick, ref, watch } from "vue";
 import { useMediaQuery } from "@vueuse/core";
-import { useNuxtApp } from "#app";
+import { useNuxtApp } from "#imports";
 import Button from "primevue/button";
 import Popover from "primevue/popover";
-import {
-  getNotificationsTotalCount,
-  mapNotificationsApiResponse
-} from "../../utils/notification-api";
+import { getNotificationsTotalCount, mapNotificationsApiResponse } from "../../utils/notification-api";
 const props = defineProps({
   sticky: { type: Boolean, required: false },
   notifications: { type: [Object, null], required: false, default: null },
@@ -161,7 +160,7 @@ const props = defineProps({
   useLogoutEmit: { type: Boolean, required: false },
   userDropdownOptions: { type: Array, required: true }
 });
-const nuxtApp = useNuxtApp();
+const { $t, $intl, $ld } = useNuxtApp();
 const emit = defineEmits([
   "selected-option",
   "user-logout",
@@ -187,11 +186,14 @@ const popoverPt = {
     style: "padding: 0; border: none; box-shadow: none; background: transparent;"
   }
 };
+const isBeaconNavEnabled = computed(() => {
+  return Boolean($ld?.flags?.beaconNavEnabled);
+});
 const notificationDateLabels = computed(() => ({
-  today: nuxtApp.$t("navigation.notificationsPanel.dateGroups.today"),
-  yesterday: nuxtApp.$t("navigation.notificationsPanel.dateGroups.yesterday"),
-  yesterdayTimeAgo: nuxtApp.$t("navigation.notificationsPanel.yesterday"),
-  justNow: nuxtApp.$t("navigation.notificationsPanel.justNow")
+  today: $t("navigation.notificationsPanel.dateGroups.today"),
+  yesterday: $t("navigation.notificationsPanel.dateGroups.yesterday"),
+  yesterdayTimeAgo: $t("navigation.notificationsPanel.yesterday"),
+  justNow: $t("navigation.notificationsPanel.justNow")
 }));
 const notificationsPanel = computed(() => {
   if (!notificationsResponse.value) {
@@ -200,16 +202,14 @@ const notificationsPanel = computed(() => {
   return mapNotificationsApiResponse(notificationsResponse.value, {
     locale: nuxtApp.$intl.locale,
     dateLabels: notificationDateLabels.value,
-    retentionLabel: nuxtApp.$t("navigation.notificationsPanel.retentionLabel"),
+    retentionLabel: $t("navigation.notificationsPanel.retentionLabel"),
     tabs: [
-      { id: "new", label: nuxtApp.$t("navigation.notificationsPanel.tabs.new"), unreadOnly: true },
-      { id: "all", label: nuxtApp.$t("navigation.notificationsPanel.tabs.all") }
+      { id: "new", label: $t("navigation.notificationsPanel.tabs.new"), unreadOnly: true },
+      { id: "all", label: $t("navigation.notificationsPanel.tabs.all") }
     ]
   });
 });
-const notificationCount = computed(
-  () => getNotificationsTotalCount(notificationsResponse.value)
-);
+const notificationCount = computed(() => getNotificationsTotalCount(notificationsResponse.value));
 function patchNotifications(patch) {
   if (!props.notifications) {
     return;
@@ -219,14 +219,11 @@ function patchNotifications(patch) {
     ...patch
   });
 }
-watch(
-  notificationCount,
-  (newCount, oldCount) => {
-    if (oldCount !== void 0 && newCount > oldCount) {
-      playBellShake();
-    }
+watch(notificationCount, (newCount, oldCount) => {
+  if (oldCount !== void 0 && newCount > oldCount) {
+    playBellShake();
   }
-);
+});
 async function playBellShake() {
   isBellShaking.value = false;
   await nextTick();
@@ -303,7 +300,7 @@ function handleFilterChange(id) {
 </script>
 
 <style scoped>
-header.header {
+header.header.classic {
   position: relative;
   grid-area: navheader;
   display: grid;
@@ -316,35 +313,119 @@ header.header {
   background-color: var(--primary-white);
   font: var(--font-regular);
 }
-header.header .header__end {
+header.header.classic .header__end {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 24px;
   min-width: 0;
 }
-header.header .user-control-actions {
+header.header.classic .user-control-actions {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
 }
-header.header .header__notifications {
+header.header.classic .header__notifications {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+header.header.classic :deep(.notification-bell) {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  overflow: visible;
+}
+header.header.classic :deep(.notification-bell).notification-bell--active {
+  background: var(--grey-10, #f3f4f6);
+}
+header.header.classic .notification-bell__badge {
+  position: absolute;
+  top: 2px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border: 2px solid var(--primary-white, #fff);
+  border-radius: 8px;
+  background: #c84b31;
+  color: var(--primary-white, #fff);
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 12px;
+  text-align: center;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+header.header.classic .notification-bell__icon {
+  display: block;
+  flex-shrink: 0;
+  color: var(--grey-80, #374151);
+  transform-origin: 50% 20%;
+}
+header.header.classic .notification-bell__icon--shaking {
+  animation: bellShake 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+header.header.classic .logout-impersonate-user {
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  background: var(--purple-20);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+}
+header.header.classic .logout-impersonate-user:hover {
+  background: var(--purple-30);
+}
+@media only screen and (width <= 960px) {
+  header.header.classic {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+header.header.classic.sticky {
+  position: sticky;
+}
+header.header.beacon {
+  grid-area: navheader;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr auto;
+  gap: 24px;
+  align-items: center;
+  padding: 12px 16px;
+  width: 100%;
+  background-color: #f7f7f7;
+  font: var(--font-regular);
+  border-bottom: 1px solid var(--grey-20, #e9e9e9);
+}
+header.header.beacon .user-control-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+}
+header.header.beacon .header__notifications {
   position: relative;
   display: flex;
   align-items: center;
 }
-header.header :deep(.notification-bell) {
+header.header.beacon :deep(.notification-bell) {
   position: relative;
   width: 32px;
   height: 32px;
   padding: 0;
   overflow: visible;
 }
-header.header :deep(.notification-bell).notification-bell--active {
+header.header.beacon :deep(.notification-bell).notification-bell--active {
   background: var(--grey-10, #f3f4f6);
 }
-header.header .notification-bell__badge {
+header.header.beacon .notification-bell__badge {
   position: absolute;
   top: 2px;
   right: -4px;
@@ -362,16 +443,16 @@ header.header .notification-bell__badge {
   box-sizing: border-box;
   pointer-events: none;
 }
-header.header .notification-bell__icon {
+header.header.beacon .notification-bell__icon {
   display: block;
   flex-shrink: 0;
   color: var(--grey-80, #374151);
   transform-origin: 50% 20%;
 }
-header.header .notification-bell__icon--shaking {
+header.header.beacon .notification-bell__icon--shaking {
   animation: bellShake 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
 }
-header.header .logout-impersonate-user {
+header.header.beacon .logout-impersonate-user {
   width: 32px;
   height: 32px;
   border-radius: 16px;
@@ -382,16 +463,16 @@ header.header .logout-impersonate-user {
   border: none;
   cursor: pointer;
 }
-header.header .logout-impersonate-user:hover {
+header.header.beacon .logout-impersonate-user:hover {
   background: var(--purple-30);
 }
 @media only screen and (width <= 960px) {
-  header.header {
+  header.header.beacon {
     padding-left: 32px;
     padding-right: 32px;
   }
 }
-header.header.sticky {
+header.header.beacon.sticky {
   position: sticky;
 }
 

package/dist/runtime/components/Nav/Header.vue.d.ts

@@ -29,23 +29,7 @@ type __VLS_Slots = {} & {
 } & {
     notifications?: (props: typeof __VLS_17) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "selected-option": (...args: any[]) => void;
-    "user-logout": (...args: any[]) => void;
-    "update:notifications": (...args: any[]) => void;
-    "notifications-clear-all": (...args: any[]) => void;
-    "notifications-dismiss": (...args: any[]) => void;
-    "notifications-select": (...args: any[]) => void;
-    "notification-click": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onSelected-option"?: ((...args: any[]) => any) | undefined;
-    "onUser-logout"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:notifications"?: ((...args: any[]) => any) | undefined;
-    "onNotifications-clear-all"?: ((...args: any[]) => any) | undefined;
-    "onNotifications-dismiss"?: ((...args: any[]) => any) | undefined;
-    "onNotifications-select"?: ((...args: any[]) => any) | undefined;
-    "onNotification-click"?: ((...args: any[]) => any) | undefined;
-}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     notifications: INotificationsHeaderModel | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;