@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -1,89 +1,112 @@
 <template>
   <div
     class="vc-app-bar"
-    :class="{ 'vc-app-bar--mobile': $isMobile.value }"
+    :class="{
+      'vc-app-bar--mobile': $isMobile.value,
+      'vc-app-bar--collapsed': !state.isSidebarExpanded,
+    }"
   >
-    <slot name="app-switcher"></slot>
-
-    <template v-if="!$isMobile.value || quantity === 0">
-      <div class="tw-w-auto tw-h-[var(--app-bar-height)] tw-flex tw-items-center">
-        <!-- Logo -->
-        <img
-          class="vc-app-bar__logo"
-          :class="{
-            'vc-app-bar__logo--mobile': $isMobile.value,
-          }"
-          alt="logo"
-          :src="logo"
-          @click="$emit('logo:click')"
+    <div
+      v-if="!$isMobile.value"
+      class="vc-app-bar__collapse-button"
+      @click="toggleSidebar"
+    >
+      <div class="vc-app-bar__collapse-button-wrap">
+        <VcIcon
+          class="vc-app-bar__collapse-button-icon"
+          :icon="ChevronLeftIcon"
+          size="xs"
         />
       </div>
+    </div>
 
-      <!-- Title -->
-      <div
-        v-if="title && $isDesktop.value"
-        class="vc-app-bar__title"
+    <div
+      class="vc-app-bar__wrapper"
+      :class="{ 'vc-app-bar__wrapper--mobile': $isMobile.value }"
+    >
+      <AppBarHeader
+        :logo="logo"
+        :expanded="state.isSidebarExpanded"
+        @logo:click="$emit('logo:click')"
+        @toggle-menu="toggleMenu"
       >
-        {{ title }}
-      </div>
-
-      <div
-        v-if="$slots['logo:append']"
-        class="vc-app-bar__logo-append"
+        <template #notifications>
+          <slot name="notifications-dropdown" />
+        </template>
+        <template #logo:append>
+          <slot name="logo:append"></slot>
+        </template>
+      </AppBarHeader>
+
+      <AppBarOverlay
+        v-if="shouldShowOverlay"
+        :is-sidebar-mode="state.isMenuOpen"
+        :expanded="state.isSidebarExpanded"
       >
-        <slot name="logo:append"></slot>
-      </div>
-    </template>
+        <component
+          :is="overlayContent"
+          v-bind="overlayProps"
+        />
+      </AppBarOverlay>
 
-    <template v-if="$isMobile.value">
-      <!-- Show blades name when at least one blade is opened -->
-      <div
-        v-if="quantity === 1"
-        class="vc-app-bar__blade-title"
+      <MenuSidebar
+        v-if="state.isMenuOpen"
+        :is-opened="state.isMenuOpen"
+        :expanded="state.isSidebarExpanded"
+        @update:is-opened="handleMenuClose"
       >
-        {{ viewTitle }}
-      </div>
-
-      <!-- Show back link when more than one blade is opened -->
-      <VcLink
-        v-else-if="quantity > 1"
-        class="vc-app-bar__backlink"
-        @click="$emit('backlink:click')"
+        <template #toolbar>
+          <slot name="notifications-dropdown" />
+          <slot name="toolbar" />
+        </template>
+        <template #navmenu>
+          <slot name="navmenu" />
+        </template>
+        <template #user-dropdown>
+          <slot name="user-dropdown" />
+        </template>
+        <template #app-switcher>
+          <slot name="app-switcher" />
+        </template>
+        <template #active-content>
+          <div
+            v-if="shouldShowInMenu"
+            :class="['vc-app-bar__menu-dropdowns', { 'vc-app-bar__menu-dropdowns--mobile': $isMobile.value }]"
+          >
+            <component
+              :is="overlayContent"
+              v-bind="overlayProps || {}"
+            />
+          </div>
+        </template>
+      </MenuSidebar>
+
+      <AppBarContent
+        v-if="$isDesktop.value"
+        :expanded="state.isSidebarExpanded"
       >
-        <VcIcon
-          icon="fas fa-chevron-left"
-          size="s"
-        ></VcIcon>
-        <span class="vc-app-bar__backlink-text">{{ t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.VC_APP_BAR.BACK") }}</span>
-      </VcLink>
-    </template>
-
-    <!-- Additional spacer -->
-    <div class="vc-app__spacer"></div>
-
-    <!-- Toolbar container -->
-    <div class="vc-app__toolbar">
-      <slot name="toolbar"></slot>
-    </div>
-
-    <!-- Show menu toggler on mobile devices -->
-    <div
-      v-if="!disableMenu && $isMobile.value"
-      class="vc-app__menu-toggler"
-      @click="$emit('menubutton:click')"
-    >
-      <VcIcon icon="fas fa-bars"></VcIcon>
+        <template #navmenu>
+          <slot name="navmenu" />
+        </template>
+        <template #user-dropdown>
+          <slot name="user-dropdown" />
+        </template>
+      </AppBarContent>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useI18n } from "vue-i18n";
-import { VcIcon, VcLink } from "./../../../../";
-import { IBladeToolbar } from "./../../../../../../core/types";
-import { useBladeNavigation } from "./../../../../../../shared";
-import { Ref, ref } from "vue";
-import { watchDebounced } from "@vueuse/core";
+import { VcIcon } from "../../../../";
+import { ChevronLeftIcon } from "../../../../atoms/vc-icon/icons";
+import { useAppMenuState } from "../composables/useAppMenuState";
+import { useAppBarOverlay } from "./composables/useAppBarOverlay";
+import AppBarHeader from "./_internal/AppBarHeader.vue";
+import AppBarOverlay from "./_internal/AppBarOverlay.vue";
+import MenuSidebar from "./_internal/MenuSidebar.vue";
+import AppBarContent from "./_internal/AppBarContent.vue";
+import { ref, computed, provide } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
 
 export interface Props {
   logo?: string;
@@ -94,111 +117,156 @@ export interface Props {
 export interface Emits {
   (event: "logo:click"): void;
   (event: "backlink:click"): void;
-  (event: "menubutton:click"): void;
-  (event: "button:click", item: IBladeToolbar): void;
 }
 
-defineProps<Props>();
+interface Slots {
+  "notifications-dropdown": () => void;
+  toolbar: () => void;
+  "app-switcher": () => void;
+  navmenu: () => void;
+  "user-dropdown": () => void;
+  "logo:append": () => void;
+}
 
+defineProps<Props>();
 defineEmits<Emits>();
+defineSlots<Slots>();
 
-defineSlots<{
-  "logo:append": void;
-  "app-switcher": void;
-  toolbar: void;
-}>();
+const { state, toggleSidebar, toggleMenu: toggleMenuState, closeAll } = useAppMenuState();
+const { overlayContent, overlayProps, hideContent, isOverlayed } = useAppBarOverlay();
 
-const { t } = useI18n({ useScope: "global" });
+const menuButtonRef = ref<HTMLElement | null>(null);
 
-const { blades } = useBladeNavigation();
+// Provide appMenuState для дочерних компонентов
+provide("appMenuState", { closeAll });
 
-const viewTitle: Ref<string> = ref("");
-const quantity = ref();
+const toggleMenu = () => {
+  toggleMenuState();
+  if (!state.value.isMenuOpen) {
+    hideContent();
+  }
+};
+
+const handleMenuClose = (value: boolean) => {
+  if (!value) {
+    closeAll();
+    hideContent();
+  }
+};
 
-watchDebounced(
-  blades,
-  (newVal) => {
-    viewTitle.value = newVal[newVal.length - 1]?.props?.navigation?.instance?.title ?? "";
+const handleClickOutside = () => {
+  closeAll();
+  hideContent();
+};
 
-    quantity.value = newVal.length;
-  },
-  { deep: true, immediate: true, flush: "post", debounce: 1 },
-);
+const shouldShowOverlay = computed(() => {
+  return isOverlayed.value || (!state.value.isMenuOpen && overlayContent.value);
+});
+
+const shouldShowInMenu = computed(() => {
+  return overlayContent.value && !isOverlayed.value && state.value.isMenuOpen;
+});
 </script>
 
 <style lang="scss">
 :root {
-  --app-bar-height: 60px;
-  --app-bar-background-color: var(--additional-50);
-  --app-bar-button-width: 50px;
-  --app-bar-button-border-color: var(--app-bar-background-color);
-  --app-bar-button-color: var(--secondary-600);
-  --app-bar-button-background-color: var(--app-bar-background-color);
-  --app-bar-button-color-hover: var(--secondary-700);
-  --app-bar-button-background-color-hover: var(--app-bar-background-color);
-  --app-bar-product-name-color: var(--neutrals-600);
-  --app-bar-product-name-size: 20px;
-  --app-bar-toolbar-icon-background-hover: var(--neutrals-600);
-  --app-bar-divider-color: var(--additional-50);
-  --app-bar-account-info-role-color: var(--neutrals-400);
-
-  --app-bar-burger-color: var(--primary-500);
-
-  --app-bar-shadow-color: var(--additional-950);
-  --app-bar-shadow: 0px 2px 4px 0px rgba(var(--app-bar-shadow-color), 0.07);
+  // Sizes
+  --app-bar-height: 70px;
+  --app-bar-collapsed-height: 94px;
+  --app-bar-mobile-height: 58px;
+  --app-bar-width: 246px;
+  --app-bar-mobile-width: 300px;
+  --app-bar-collapsed-width: 76px;
+  --app-bar-padding: 18px;
+  --app-bar-padding-mobile: 28px;
+
+  // Logo
+  --app-bar-logo-width: 125px;
+  --app-bar-logo-height: 46px;
+  --app-bar-logo-mobile-width: 46px;
+  --app-bar-logo-mobile-height: 46px;
+  // Collapse button
+  --app-bar-collapse-button-width: 26px;
+  --app-bar-collapse-button-height: 26px;
+  --app-bar-collapse-button-border-radius: 3px;
+
+  // Colors
+  --app-bar-background: var(--neutrals-50);
+  --app-bar-border: var(--neutrals-200);
+  --app-bar-button: var(--neutrals-500);
+  --app-bar-button-hover: var(--neutrals-600);
+  --app-bar-product-name: var(--neutrals-600);
+  --app-bar-divider: var(--additional-50);
+  --app-bar-account-info-role: var(--neutrals-400);
+  --app-bar-content-visible-border: var(--primary-500);
+  --app-bar-burger: var(--primary-500);
+
+  // Transition
+  --app-bar-transition-duration: 0.1s;
+  --app-bar-transition-timing-function: linear;
 }
 
 .vc-app-bar {
-  @apply tw-relative tw-flex tw-items-center tw-justify-between tw-px-4;
-  height: var(--app-bar-height);
-  background-color: var(--app-bar-background-color);
-  box-shadow: var(--app-bar-shadow);
-  @apply tw-box-border;
-}
-
-.vc-app-bar--mobile {
-  @apply tw-pr-0 tw-pl-3 #{!important};
-}
-
-.vc-app-bar__logo {
-  @apply tw-h-1/2 tw-cursor-pointer tw-mx-4;
+  @apply tw-relative tw-flex tw-flex-col;
+  width: var(--app-bar-width);
+  background-color: var(--app-bar-background);
+  transition: width var(--app-bar-transition-duration) var(--app-bar-transition-timing-function);
+
+  &__collapse-button {
+    @apply tw-absolute tw-right-[-16px] tw-top-[50%] tw-translate-y-[-50%] tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-opacity-0 tw-transition-opacity tw-duration-300 tw-z-[12];
+    width: var(--app-bar-collapse-button-width);
+    height: var(--app-bar-collapse-button-height);
+    border-radius: var(--app-bar-collapse-button-border-radius);
+    background-color: var(--app-bar-background);
+    border: 1px solid var(--app-bar-border);
+
+    &-wrap {
+      @apply tw-flex tw-items-center tw-justify-center;
+    }
+
+    &-icon {
+      @apply tw-transition-transform tw-duration-300;
+      color: var(--app-bar-button);
+    }
+  }
 
-  &--mobile {
-    @apply tw-mx-1;
+  &:hover &__collapse-button {
+    @apply tw-opacity-100;
   }
-}
 
-.vc-app-bar__logo-append {
-  @apply tw-ml-3;
-}
+  &--collapsed {
+    width: var(--app-bar-collapsed-width);
 
-.vc-app-bar__title {
-  @apply tw-text-[color:var(--app-bar-product-name-color)] tw-font-medium;
-  font-size: var(--app-bar-product-name-size);
-}
+    .vc-app-bar__collapse-button svg {
+      @apply tw-rotate-180;
+    }
+  }
 
-.vc-app-bar__blade-title {
-  @apply tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-ml-2;
-  @apply tw-leading-snug;
-}
+  &__logo {
+    @apply tw-cursor-pointer tw-mx-2;
+    max-width: var(--app-bar-logo-width);
+    max-height: var(--app-bar-logo-height);
+  }
 
-.vc-app-bar__backlink {
-  @apply tw-ml-3;
-}
+  &__title {
+    @apply tw-font-medium;
+    color: var(--app-bar-product-name);
+  }
 
-.vc-app-bar__backlink-text {
-  @apply tw-ml-2 tw-text-lg;
-}
+  &--mobile {
+    @apply tw-w-full;
+  }
 
-.vc-app__spacer {
-  @apply tw-grow tw-basis-0;
-}
+  &__wrapper {
+    @apply tw-h-full tw-relative;
 
-.vc-app__toolbar {
-  @apply tw-flex tw-h-full tw-box-border;
-}
+    // &--mobile {
+    //   height: var(--app-bar-mobile-height);
+    // }
+  }
 
-.vc-app__menu-toggler {
-  @apply tw-text-[color:var(--app-bar-burger-color)] tw-w-12 tw-flex tw-items-center tw-justify-center tw-h-full tw-box-border tw-cursor-pointer;
+  &__menu-dropdowns {
+    @apply tw-overflow-auto tw-max-h-[250px];
+  }
 }
 </style>