@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.6

package/ui/components/organisms/vc-app/_internal/menu/VcAppMenuItem.vue

@@ -1,215 +1,216 @@
-<template>
-  <div
-    class="vc-app-menu-item"
-    @click="$emit('click')"
-  >
-    <VcTooltip>
-      <template
-        v-if="!expanded"
-        #tooltip
-      >
-        {{ $t(title ?? "") }}
-      </template>
-
-      <div
-        class="vc-app-menu-item__content"
-        :class="{
-          'vc-app-menu-item__content--active': isActive,
-          'vc-app-menu-item__content--nested': nested,
-          'vc-app-menu-item__content--collapsed': !expanded,
-        }"
-      >
-        <!-- Icon -->
-        <div
-          v-if="icon"
-          class="vc-app-menu-item__icon"
-        >
-          <VcIcon
-            class="vc-app-menu-item__icon-content"
-            :icon="icon"
-            size="m"
-          />
-        </div>
-
-        <!-- Letter abbreviation when collapsed and no icon -->
-        <div
-          v-else-if="!expanded"
-          class="vc-app-menu-item__letters"
-        >
-          {{ abbreviation }}
-        </div>
-
-        <!-- Title + badge (shown when expanded) -->
-        <Transition name="opacity">
-          <div
-            v-show="expanded"
-            class="vc-app-menu-item__title"
-          >
-            <span class="vc-app-menu-item__title-text">{{ $t(title ?? "") }}</span>
-            <VcBadge
-              v-if="resolvedBadge.isVisible"
-              :content="resolvedBadge.isDot ? undefined : resolvedBadge.content"
-              :variant="resolvedBadge.variant"
-              :is-dot="resolvedBadge.isDot"
-              size="s"
-              inline
-              class="vc-app-menu-item__badge"
-            />
-            <slot name="suffix" />
-          </div>
-        </Transition>
-      </div>
-    </VcTooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import type { Component } from "vue";
-import { VcIcon, VcBadge } from "@ui/components";
-import { useBadge } from "@ui/components/organisms/vc-app/_internal/menu/composables/useBadge";
-import type { MenuItemBadgeConfig } from "@core/types";
-
-export interface Props {
-  icon?: string | Component;
-  title?: string;
-  expanded?: boolean;
-  badge?: MenuItemBadgeConfig;
-  routeId?: string;
-  groupId?: string;
-  isActive?: boolean;
-  nested?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  nested: false,
-  isActive: false,
-});
-
-defineEmits<{
-  (event: "click"): void;
-}>();
-
-defineSlots<{
-  suffix: () => unknown;
-}>();
-
-const resolvedBadge = useBadge(() => props.badge, () => props.routeId, () => props.groupId);
-
-const abbreviation = computed(() => {
-  return props.title
-    ?.split(" ")
-    .slice(0, 2)
-    .map((word) => word[0])
-    .join("");
-});
-</script>
-
-<style lang="scss">
-:root {
-  --app-menu-item-height: 38px;
-  --app-menu-item-icon-width: 16px;
-  --app-menu-item-icon-width-container: 23px;
-  --app-menu-item-icon-color: var(--neutrals-600);
-  --app-menu-item-icon-color-active: var(--primary-700);
-  --app-menu-item-background-color-hover: var(--neutrals-100);
-  --app-menu-item-background-color-active: var(--primary-100);
-  --app-menu-item-hover-radius: 6px;
-  --app-menu-item-title-color: var(--neutrals-600);
-  --app-menu-item-title-color-active: var(--primary-700);
-
-  --app-menu-item-active-text: var(--neutrals-950);
-  --app-menu-item-active-icon: var(--neutrals-950);
-}
-
-.vc-app-menu-item {
-  @apply tw-cursor-pointer tw-w-full;
-  @apply tw-transition-transform tw-duration-[0] tw-ease-in-out #{!important};
-
-  &:hover .vc-app-menu-item__content:not(.vc-app-menu-item__content--active) {
-    @apply tw-bg-[var(--app-menu-item-background-color-hover)] tw-bg-opacity-50 tw-rounded;
-
-    .vc-app-menu-item__title {
-      @apply tw-text-[color:var(--app-menu-item-title-color-active)];
-    }
-
-    .vc-app-menu-item__icon {
-      @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
-    }
-  }
-
-  &__content {
-    @apply tw-flex tw-items-center tw-w-full tw-h-[var(--app-menu-item-height)]
-      tw-border-none tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative
-      tw-uppercase tw-select-none tw-px-2 tw-gap-4;
-
-    &--active {
-      @apply tw-bg-[color:var(--app-menu-item-background-color-active)] tw-rounded;
-
-      .vc-app-menu-item__icon {
-        @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
-      }
-
-      .vc-app-menu-item__title {
-        @apply tw-text-[color:var(--app-menu-item-title-color-active)] #{!important};
-      }
-    }
-
-    &--nested {
-      @apply tw-pl-7 tw-gap-5;
-
-      &.vc-app-menu-item__content--collapsed {
-        @apply tw-pl-2;
-      }
-
-      &.vc-app-menu-item__content--active {
-        @apply tw-font-medium;
-      }
-    }
-  }
-
-  &__icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color)]
-      tw-overflow-hidden tw-flex tw-justify-center tw-shrink-0
-      tw-transition-[color] tw-duration-200
-      tw-w-[var(--app-menu-item-icon-width-container)];
-  }
-
-  &__icon-content {
-    @apply tw-text-center;
-  }
-
-  &__letters {
-    @apply tw-shrink-0 tw-w-[24px] tw-h-[24px] tw-rounded-full
-      tw-flex tw-items-center tw-justify-center
-      tw-text-xxs tw-leading-[10px] tw-font-extrabold
-      tw-text-neutrals-500 tw-border-[2px] tw-border-neutrals-500;
-  }
-
-  &__title {
-    @apply tw-text-[color:var(--app-menu-item-title-color)] tw-truncate
-      tw-text-sm tw-font-normal tw-leading-normal tw-normal-case
-      [transition:color_0.2s_ease]
-      tw-opacity-100 tw-w-full tw-flex tw-justify-between tw-items-center;
-  }
-
-  &__title-text {
-    @apply tw-truncate;
-  }
-
-  &__badge {
-    @apply tw-shrink-0 tw-ml-auto;
-  }
-}
-
-.opacity-enter-active,
-.opacity-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.opacity-enter-from,
-.opacity-leave-to {
-  opacity: 0;
-}
-</style>
+<template>
+  <div
+    class="vc-app-menu-item"
+    @click="$emit('click')"
+  >
+    <VcTooltip>
+      <template
+        v-if="!expanded"
+        #tooltip
+      >
+        {{ $t(title ?? "") }}
+      </template>
+
+      <div
+        class="vc-app-menu-item__content"
+        :class="{
+          'vc-app-menu-item__content--active': isActive,
+          'vc-app-menu-item__content--nested': nested,
+          'vc-app-menu-item__content--collapsed': !expanded,
+        }"
+      >
+        <!-- Icon -->
+        <div
+          v-if="icon"
+          class="vc-app-menu-item__icon"
+        >
+          <VcIcon
+            class="vc-app-menu-item__icon-content"
+            :icon="icon"
+            size="m"
+          />
+        </div>
+
+        <!-- Letter abbreviation when collapsed and no icon -->
+        <div
+          v-else-if="!expanded"
+          class="vc-app-menu-item__letters"
+        >
+          {{ abbreviation }}
+        </div>
+
+        <!-- Title + badge (shown when expanded) -->
+        <Transition name="opacity">
+          <div
+            v-show="expanded"
+            class="vc-app-menu-item__title"
+          >
+            <span class="vc-app-menu-item__title-text">{{ $t(title ?? "") }}</span>
+            <VcBadge
+              v-if="resolvedBadge.isVisible"
+              :content="resolvedBadge.isDot ? undefined : resolvedBadge.content"
+              :variant="resolvedBadge.variant"
+              :is-dot="resolvedBadge.isDot"
+              size="s"
+              inline
+              class="vc-app-menu-item__badge"
+            />
+            <slot name="suffix" />
+          </div>
+        </Transition>
+      </div>
+    </VcTooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { Component } from "vue";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcBadge } from "@ui/components/atoms/vc-badge";
+import { useBadge } from "@ui/components/organisms/vc-app/_internal/menu/composables/useBadge";
+import type { MenuItemBadgeConfig } from "@core/types";
+
+export interface Props {
+  icon?: string | Component;
+  title?: string;
+  expanded?: boolean;
+  badge?: MenuItemBadgeConfig;
+  routeId?: string;
+  groupId?: string;
+  isActive?: boolean;
+  nested?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  nested: false,
+  isActive: false,
+});
+
+defineEmits<{
+  (event: "click"): void;
+}>();
+
+defineSlots<{
+  suffix: () => unknown;
+}>();
+
+const resolvedBadge = useBadge(() => props.badge, () => props.routeId, () => props.groupId);
+
+const abbreviation = computed(() => {
+  return props.title
+    ?.split(" ")
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("");
+});
+</script>
+
+<style lang="scss">
+:root {
+  --app-menu-item-height: 38px;
+  --app-menu-item-icon-width: 16px;
+  --app-menu-item-icon-width-container: 23px;
+  --app-menu-item-icon-color: var(--neutrals-600);
+  --app-menu-item-icon-color-active: var(--primary-700);
+  --app-menu-item-background-color-hover: var(--neutrals-100);
+  --app-menu-item-background-color-active: var(--primary-100);
+  --app-menu-item-hover-radius: 6px;
+  --app-menu-item-title-color: var(--neutrals-600);
+  --app-menu-item-title-color-active: var(--primary-700);
+
+  --app-menu-item-active-text: var(--neutrals-950);
+  --app-menu-item-active-icon: var(--neutrals-950);
+}
+
+.vc-app-menu-item {
+  @apply tw-cursor-pointer tw-w-full;
+  @apply tw-transition-transform tw-duration-[0] tw-ease-in-out #{!important};
+
+  &:hover .vc-app-menu-item__content:not(.vc-app-menu-item__content--active) {
+    @apply tw-bg-[var(--app-menu-item-background-color-hover)] tw-bg-opacity-50 tw-rounded;
+
+    .vc-app-menu-item__title {
+      @apply tw-text-[color:var(--app-menu-item-title-color-active)];
+    }
+
+    .vc-app-menu-item__icon {
+      @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+    }
+  }
+
+  &__content {
+    @apply tw-flex tw-items-center tw-w-full tw-h-[var(--app-menu-item-height)]
+      tw-border-none tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative
+      tw-uppercase tw-select-none tw-px-2 tw-gap-4;
+
+    &--active {
+      @apply tw-bg-[color:var(--app-menu-item-background-color-active)] tw-rounded;
+
+      .vc-app-menu-item__icon {
+        @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+      }
+
+      .vc-app-menu-item__title {
+        @apply tw-text-[color:var(--app-menu-item-title-color-active)] #{!important};
+      }
+    }
+
+    &--nested {
+      @apply tw-pl-7 tw-gap-5;
+
+      &.vc-app-menu-item__content--collapsed {
+        @apply tw-pl-2;
+      }
+
+      &.vc-app-menu-item__content--active {
+        @apply tw-font-medium;
+      }
+    }
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--app-menu-item-icon-color)]
+      tw-overflow-hidden tw-flex tw-justify-center tw-shrink-0
+      tw-transition-[color] tw-duration-200
+      tw-w-[var(--app-menu-item-icon-width-container)];
+  }
+
+  &__icon-content {
+    @apply tw-text-center;
+  }
+
+  &__letters {
+    @apply tw-shrink-0 tw-w-[24px] tw-h-[24px] tw-rounded-full
+      tw-flex tw-items-center tw-justify-center
+      tw-text-xxs tw-leading-[10px] tw-font-extrabold
+      tw-text-neutrals-500 tw-border-[2px] tw-border-neutrals-500;
+  }
+
+  &__title {
+    @apply tw-text-[color:var(--app-menu-item-title-color)] tw-truncate
+      tw-text-sm tw-font-normal tw-leading-normal tw-normal-case
+      [transition:color_0.2s_ease]
+      tw-opacity-100 tw-w-full tw-flex tw-justify-between tw-items-center;
+  }
+
+  &__title-text {
+    @apply tw-truncate;
+  }
+
+  &__badge {
+    @apply tw-shrink-0 tw-ml-auto;
+  }
+}
+
+.opacity-enter-active,
+.opacity-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.opacity-enter-from,
+.opacity-leave-to {
+  opacity: 0;
+}
+</style>

package/ui/components/organisms/vc-app/_internal/sidebar/SidebarCollapseButton.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 
 defineProps<{
   collapsed?: boolean;

package/ui/components/organisms/vc-app/_internal/sidebar/SidebarContent.vue

@@ -41,8 +41,8 @@
 <script lang="ts" setup>
 import { inject, ref, onMounted, nextTick } from "vue";
 import VcAppMenu from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenu.vue";
-import { VcScrollableContainer } from "@ui/components";
-import { UserDropdownButton } from "@shared/components";
+import { VcScrollableContainer } from "@ui/components/atoms/vc-scrollable-container";
+import { UserDropdownButton } from "@shared/components/user-dropdown-button";
 import { EmbeddedModeKey } from "@framework/injection-keys";
 import type { MenuItem } from "@core/types";
 

package/ui/components/organisms/vc-app/_internal/sidebar/SidebarHeader.vue

@@ -17,8 +17,8 @@
           @click="$emit('logo:click')"
         />
         <div
-          v-if="hasUnread && !expanded"
-          class="sidebar-header__accent"
+          v-if="hasUnread && !expanded && !isMobile"
+          class="sidebar-header__accent sidebar-header__accent--logo"
         />
       </div>
 
@@ -30,48 +30,86 @@
     </div>
 
     <div
-      v-if="$slots.actions"
-      class="sidebar-header__actions"
+      v-if="expanded && !isMobile"
+      class="sidebar-header__toolbar"
     >
-      <slot name="actions" />
+      <button
+        class="sidebar-header__notification-bell"
+        aria-label="Notifications"
+        @click="$emit('toggle-notifications', $event)"
+      >
+        <div class="sidebar-header__notification-bell-wrap">
+          <Transition
+            name="burger-fade"
+            mode="out-in"
+          >
+            <VcIcon
+              v-if="isNotificationsOpen"
+              key="close"
+              icon="lucide-x"
+              size="m"
+            />
+            <VcIcon
+              v-else
+              key="bell"
+              icon="lucide-bell"
+              size="m"
+            />
+          </Transition>
+          <div
+            v-if="hasUnread && !isNotificationsOpen"
+            class="sidebar-header__accent"
+          />
+        </div>
+      </button>
+
+      <div
+        v-if="$slots.actions"
+        class="sidebar-header__actions"
+      >
+        <slot name="actions" />
+      </div>
+
+      <button
+        v-if="showBurger"
+        class="sidebar-header__menu-button"
+        @click="$emit('toggle-menu', $event)"
+      >
+        <div class="sidebar-header__menu-button-wrap">
+          <Transition
+            name="burger-fade"
+            mode="out-in"
+          >
+            <VcIcon
+              v-if="isMenuOpen"
+              key="close"
+              icon="lucide-x"
+              size="m"
+            />
+            <VcIcon
+              v-else
+              key="burger"
+              icon="lucide-menu"
+              size="m"
+            />
+          </Transition>
+        </div>
+      </button>
     </div>
 
-    <button
-      v-if="expanded && showBurger"
-      class="sidebar-header__menu-button"
-      @click="$emit('toggle-menu', $event)"
+    <!-- Mobile actions (rendered outside desktop toolbar) -->
+    <div
+      v-if="isMobile && $slots.actions"
+      class="sidebar-header__actions"
     >
-      <div class="sidebar-header__menu-button-wrap">
-        <Transition
-          name="burger-fade"
-          mode="out-in"
-        >
-          <VcIcon
-            v-if="isMenuOpen"
-            key="close"
-            icon="lucide-x"
-            size="m"
-          />
-          <VcIcon
-            v-else
-            key="burger"
-            icon="lucide-menu"
-            size="m"
-          />
-        </Transition>
-        <div
-          v-if="hasUnread && !isMenuOpen"
-          class="sidebar-header__accent"
-        />
-      </div>
-    </button>
+      <slot name="actions" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { inject, ref } from "vue";
-import { VcIcon } from "@ui/components";
-import { MenuBurgerIcon } from "@ui/components/atoms/vc-icon/icons";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 import { ShellIndicatorsKey } from "@framework/injection-keys";
 
 export interface Props {
@@ -79,6 +117,7 @@ export interface Props {
   expanded?: boolean;
   showBurger?: boolean;
   isMenuOpen?: boolean;
+  isNotificationsOpen?: boolean;
   isVisible?: boolean;
   isMobile?: boolean;
   mobileTitle?: string;
@@ -89,6 +128,7 @@ withDefaults(defineProps<Props>(), {
   expanded: true,
   showBurger: false,
   isMenuOpen: false,
+  isNotificationsOpen: false,
   isVisible: true,
   isMobile: false,
   mobileTitle: "",
@@ -98,6 +138,7 @@ withDefaults(defineProps<Props>(), {
 defineEmits<{
   (e: "logo:click"): void;
   (e: "toggle-menu", event: MouseEvent): void;
+  (e: "toggle-notifications", event: MouseEvent): void;
 }>();
 
 const hasUnread = inject(ShellIndicatorsKey, ref(false));
@@ -144,11 +185,19 @@ const hasUnread = inject(ShellIndicatorsKey, ref(false));
   }
 
   &__accent {
-    @apply tw-block tw-absolute tw-right-[-7px] tw-top-[-5px]
+    @apply tw-block tw-absolute tw-right-0 tw-top-0
       tw-w-[5px] tw-h-[5px] tw-rounded-full tw-z-[1]
       tw-bg-[var(--app-bar-accent-color,var(--danger-500))];
   }
 
+  &__accent--logo {
+    @apply tw-right-[-7px] tw-top-[-5px];
+  }
+
+  &__toolbar {
+    @apply tw-flex tw-items-center tw-gap-3;
+  }
+
   &__actions {
     @apply tw-flex tw-items-center;
   }
@@ -157,6 +206,14 @@ const hasUnread = inject(ShellIndicatorsKey, ref(false));
     @apply tw-text-lg tw-font-bold tw-text-[var(--app-bar-header-blade-title)];
   }
 
+  &__notification-bell {
+    @apply tw-cursor-pointer tw-relative;
+
+    &-wrap {
+      @apply tw-relative;
+    }
+  }
+
   &__menu-button {
     @apply tw-cursor-pointer tw-relative;