@eturnity/eturnity_reusable_components 9.19.4 → 9.19.5

package/src/components/navigationSideMenu/index.vue

@@ -0,0 +1,1098 @@
+<template>
+  <PageWrapper
+    :expanded-width="expandedWidth"
+    :is-collapsed="isCollapsed"
+    @mouseenter="isWrapperHovered = true"
+    @mouseleave="isWrapperHovered = false"
+  >
+    <SizerRef ref="sizerRef">
+      <HeaderSection :is-collapsed="isCollapsed">
+        <TopMenuRow>
+          <TitleContainer ref="titleRowRef" :is-collapsed="isCollapsed">
+            <TitleText
+              v-if="headerTitle && !isCollapsed && !showProjectManagerSelect"
+              :title="headerTitle"
+            >
+              {{ headerTitle }}
+            </TitleText>
+            <ResponsibleBlock v-if="showProjectManagerSelect && !isCollapsed">
+              <ResponsibleCard>
+                <ResponsibleSelectSurface
+                  :class="{
+                    'ResponsibleSelectSurface--open':
+                      responsibleSelectSurfaceOpen,
+                  }"
+                >
+                  <SelectComponent
+                    align-items="horizontal"
+                    button-bg-color="transparent"
+                    caret-icons="sidebar"
+                    data-id="sidebar_responsible"
+                    data-qa-id="sidebar_responsible"
+                    :disabled="projectManagerDisabled"
+                    :show-disabled-background="false"
+                    dropdown-bg-color="purple1"
+                    :dropdown-match-max-content="true"
+                    :dropdown-search-hide-unassigned="true"
+                    font-size="13px"
+                    :has-select-button-padding="false"
+                    :is-searchable="true"
+                    :min-option-length="1"
+                    :search-placeholder="$gettext('Search text')"
+                    search-placement="dropdown"
+                    select-height="56px"
+                    select-min-height="56px"
+                    select-width="100%"
+                    :show-border="false"
+                    :value="projectManagerId"
+                    @input-change="onProjectManagerInputChange"
+                    @on-dropdown-close="onResponsibleSelectDropdownClose"
+                    @on-dropdown-open="onResponsibleSelectDropdownOpen"
+                  >
+                  <template #selector>
+                    <ResponsibleSelectorRow>
+                      <ResponsibleAvatar>{{
+                        responsibleInitials
+                      }}</ResponsibleAvatar>
+                      <ResponsibleTextStack>
+                        <ResponsibleRoleLabel>{{
+                          $gettext('responsible')
+                        }}</ResponsibleRoleLabel>
+                        <ResponsibleNameLine :title="responsibleDisplayName">{{
+                          responsibleDisplayName
+                        }}</ResponsibleNameLine>
+                      </ResponsibleTextStack>
+                    </ResponsibleSelectorRow>
+                  </template>
+                  <template #dropdown>
+                    <SelectOption
+                      v-for="(item, optionIdx) in projectManagerOptions"
+                      :key="
+                        item.id === null || item.id === undefined
+                          ? `pm_opt_none_${optionIdx}`
+                          : `pm_opt_${item.id}`
+                      "
+                      :data-id="`sidebar_responsible_option_${optionIdx + 1}`"
+                      :data-qa-id="`sidebar_responsible_option_${
+                        optionIdx + 1
+                      }`"
+                      min-width="min-content"
+                      :value="item.id"
+                    >
+                      <ResponsibleOptionRow>
+                        <ResponsibleOptionAvatar>{{
+                          initialsFromFullName(item.full_name)
+                        }}</ResponsibleOptionAvatar>
+                        <SelectOptionText>{{
+                          item.full_name
+                        }}</SelectOptionText>
+                      </ResponsibleOptionRow>
+                    </SelectOption>
+                  </template>
+                  </SelectComponent>
+                </ResponsibleSelectSurface>
+              </ResponsibleCard>
+            </ResponsibleBlock>
+            <CollapseContainer
+              :is-collapsed="isCollapsed"
+              @click="toggleCollapse"
+            >
+              <CollapseButton
+                :aria-label="isCollapsed ? 'Expand menu' : 'Collapse menu'"
+                data-id="collapse_sidebar_button"
+                data-qa-id="collapse_sidebar_button"
+              >
+                <IconComponent
+                  :name="!isCollapsed ? 'collapse_sidebar' : 'expand_sidebar'"
+                  size="16px"
+                />
+              </CollapseButton>
+            </CollapseContainer>
+          </TitleContainer>
+        </TopMenuRow>
+      </HeaderSection>
+
+      <ScrollArea>
+        <ScrollContent ref="scrollContent" @scroll="updateScrollThumb">
+          <GroupsList>
+            <template v-for="(group, groupIdx) in menuData" :key="groupIdx">
+              <GroupSection
+                v-if="group.children?.length"
+                :is-collapsed="isCollapsed"
+              >
+                <GroupName v-if="!isCollapsed">{{ group.groupName }}</GroupName>
+                <ItemList>
+                  <template
+                    v-for="(item, itemIdx) in group.children"
+                    :key="item.id ?? itemIdx"
+                  >
+                    <template v-if="!item.children?.length">
+                      <MenuItem
+                        v-if="item.type !== 'button'"
+                        :data-id="item.dataId"
+                        :data-qa-id="item.dataId"
+                        :fill-type="item.fillType"
+                        :is-active="item.id === activeItemId"
+                        :is-collapsed="isCollapsed"
+                        :is-disabled="item.isDisabled"
+                        @click="
+                          !item.isDisabled &&
+                            $emit('on-menu-item-click', { item })
+                        "
+                      >
+                        <IconCell :is-collapsed="isCollapsed">
+                          <IconComponent
+                            :color="
+                              item.id === activeItemId
+                                ? theme.semanticColors.purple[500]
+                                : theme.semanticColors.teal[800]
+                            "
+                            :fill-type="item.fillType"
+                            :hovered-color="theme.semanticColors.purple[500]"
+                            :name="item.icon"
+                            :size="item.iconSize || '16px'"
+                          />
+                        </IconCell>
+                        <ItemLabel v-if="!isCollapsed">{{
+                          item.name
+                        }}</ItemLabel>
+                      </MenuItem>
+                      <MainButton
+                        v-if="item.type === 'button' && !isCollapsed"
+                        :custom-text-color="theme.semanticColors.purple[500]"
+                        data-id="sub_menu_project_view_run_simulation"
+                        data-qa-id="sub_menu_project_view_run_simulation"
+                        :is-disabled="item.isDisabled"
+                        no-background-color
+                        :opacity-level="item.isDisabled ? '32%' : '100%'"
+                        :text="item.name"
+                        type="tertiary"
+                        @click="
+                          !item.isDisabled &&
+                            $emit('on-menu-item-click', { item })
+                        "
+                      />
+                    </template>
+                    <CollapseWrapper v-else>
+                      <MenuItem
+                        :data-id="item.dataId"
+                        :data-qa-id="item.dataId"
+                        :fill-type="item.fillType"
+                        :is-active="item.id === activeParentId"
+                        :is-collapsed="isCollapsed"
+                        :is-disabled="item.isDisabled"
+                        :is-expandable="true"
+                        :is-open="openDropdownId === item.id"
+                        @click="!item.isDisabled && toggleDropdown(item.id)"
+                      >
+                        <IconCell :is-collapsed="isCollapsed">
+                          <IconComponent
+                            :color="
+                              item.id === activeParentId
+                                ? theme.semanticColors.purple[500]
+                                : theme.semanticColors.teal[800]
+                            "
+                            :fill-type="item.fillType"
+                            :hovered-color="theme.semanticColors.purple[500]"
+                            :name="item.icon"
+                            :size="item.iconSize || '16px'"
+                          />
+                        </IconCell>
+                        <ItemLabel v-if="!isCollapsed">{{
+                          item.name
+                        }}</ItemLabel>
+                        <ChevronCell
+                          v-if="!isCollapsed"
+                          :is-wrapper-hovered="isWrapperHovered"
+                        >
+                          <IconComponent
+                            :color="
+                              activeParentId === item.id
+                                ? theme.semanticColors.purple[500]
+                                : theme.semanticColors.teal[800]
+                            "
+                            :hovered-color="theme.semanticColors.purple[500]"
+                            :name="
+                              openDropdownId === item.id
+                                ? 'chevron_up'
+                                : 'chevron_down'
+                            "
+                            size="10px"
+                          />
+                        </ChevronCell>
+                      </MenuItem>
+                      <SubList
+                        v-if="!isCollapsed && item.children?.length"
+                        :is-visible="openDropdownId === item.id"
+                      >
+                        <SubItem
+                          v-for="(sub, subIdx) in item.children"
+                          :key="sub.id ?? subIdx"
+                          :data-id="sub.dataId"
+                          :data-qa-id="sub.dataId"
+                          :is-active="sub.id === activeItemId"
+                          :is-disabled="sub.isDisabled"
+                          @click="
+                            !sub.isDisabled &&
+                              $emit('on-menu-item-click', { item: sub })
+                          "
+                        >
+                          <span>{{ sub.name }}</span>
+                        </SubItem>
+                      </SubList>
+                    </CollapseWrapper>
+                  </template>
+                </ItemList>
+              </GroupSection>
+            </template>
+          </GroupsList>
+        </ScrollContent>
+        <ScrollbarTrack v-if="hasScrollOverflow" ref="scrollTrack">
+          <ScrollbarThumb
+            :style="scrollThumbStyle"
+            @mousedown.prevent="onThumbMouseDown"
+          />
+        </ScrollbarTrack>
+      </ScrollArea>
+      <FooterSection v-if="footerButtonText" :is-collapsed="isCollapsed">
+        <MainButton
+          v-if="!isCollapsed"
+          data-id="footer_documents_button"
+          data-qa-id="footer_documents_button"
+          :text="footerButtonText"
+          @click="onFooterButtonClick()"
+        />
+        <FooterButtonWrapper
+          v-else
+          data-id="footer_documents_button"
+          data-qa-id="footer_documents_button"
+          @click="onFooterButtonClick()"
+        >
+          <IconComponent color="white" name="documents" size="16px" />
+        </FooterButtonWrapper>
+      </FooterSection>
+    </SizerRef>
+  </PageWrapper>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import IconComponent from '../icon'
+  import theme from '@/assets/theme.js'
+  import MainButton from '../buttons/mainButton'
+  import SelectComponent from '../inputs/select'
+  import SelectOption from '../inputs/select/option'
+
+  /** Collapsed rail width; keep in sync with `emitSidebarDimensions` for layout consumers. */
+  const NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX = 48
+
+  const WrapperAttrs = { isCollapsed: Boolean, expandedWidth: Number }
+  const PageWrapper = styled('div', WrapperAttrs)`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    user-select: none;
+    background-color: ${(p) => p.theme.semanticColors.grey[100]};
+    width: ${(p) =>
+      p.isCollapsed
+        ? `${NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX}px`
+        : p.expandedWidth
+        ? `${p.expandedWidth}px`
+        : 'max-content'};
+    min-width: ${(p) =>
+      p.isCollapsed ? `${NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX}px` : '0'};
+    border-right: 1px solid ${(p) => p.theme.semanticColors.grey[300]};
+    transition: width 0.25s ease;
+    overflow-x: hidden;
+  `
+
+  const SizerRef = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: max-content;
+    min-height: 0;
+  `
+
+  const HeaderSectionAttrs = { isCollapsed: Boolean }
+  const HeaderSection = styled('div', HeaderSectionAttrs)`
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 12px;
+    padding: ${(p) => (p.isCollapsed ? '16px 10px' : '8px')};
+    border-bottom: 1px solid ${(p) => p.theme.semanticColors.grey[300]};
+    flex-shrink: 0;
+  `
+
+  const TopMenuRow = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+  `
+
+  const TitleText = styled.div`
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 150%;
+    letter-spacing: -0.01em;
+    color: ${(p) => p.theme.semanticColors.teal[800]};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 1;
+  `
+
+  const CollapseButton = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    flex-shrink: 0;
+    border: none;
+    border-radius: 8px;
+    background-color: none;
+  `
+
+  const ScrollArea = styled.div`
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+  `
+
+  const ScrollContent = styled.div`
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `
+
+  const ScrollbarTrack = styled.div`
+    width: 4px;
+    flex-shrink: 0;
+    background: ${(p) => p.theme.semanticColors.grey[200]};
+    position: relative;
+    border-radius: 2px;
+  `
+
+  const ScrollbarThumb = styled.div`
+    position: absolute;
+    right: 100%;
+    margin-right: 2px;
+    width: 4px;
+    background-color: ${(p) => p.theme.semanticColors.grey[600]};
+    border-radius: 2px;
+    user-select: none;
+  `
+
+  const GroupsList = styled.div`
+    display: flex;
+    flex-direction: column;
+  `
+
+  const GroupSectionAttrs = { isCollapsed: Boolean }
+  const GroupSection = styled('div', GroupSectionAttrs)`
+    padding: ${(p) => (p.isCollapsed ? '10px 8px' : '10px 16px')};
+  `
+
+  const GroupName = styled.div`
+    font-size: 10px;
+    font-weight: 400;
+    color: ${(p) => p.theme.semanticColors.grey[700]};
+    text-transform: uppercase;
+    line-height: 150%;
+  `
+
+  const ItemList = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-top: 8px;
+  `
+
+  const MenuItemAttrs = {
+    fillType: String,
+    isDisabled: Boolean,
+    isCollapsed: Boolean,
+    isExpandable: Boolean,
+    isOpen: Boolean,
+    isActive: Boolean,
+  }
+  const MenuItem = styled('div', MenuItemAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 8px;
+    border-radius: 8px;
+    padding: 4px;
+    min-width: max-content;
+    cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
+    opacity: ${(p) => (p.isDisabled ? 0.6 : 1)};
+    color: ${(p) => p.theme.semanticColors.teal[800]};
+    font-size: 14px;
+    font-weight: 400;
+    height: ${(p) => (p.isCollapsed ? '30px' : '32px')};
+    width: ${(p) => (p.isCollapsed ? '30px' : 'auto')};
+
+    ${(p) =>
+      p.isCollapsed &&
+      `
+      grid-template-columns: 1fr;
+      justify-items: center;
+    `}
+
+    ${(p) =>
+      p.isActive &&
+      `
+      background-color: ${p.theme.semanticColors.purple[100]};
+      color: ${p.theme.semanticColors.purple[500]};
+    `}
+
+    &:hover {
+      ${(p) =>
+        !p.isDisabled &&
+        `
+        background-color: ${p.theme.semanticColors.purple[50]};
+        color: ${p.theme.semanticColors.purple[500]};
+
+        svg path:not(.fix) {
+          ${p.fillType || 'fill'}: ${p.theme.semanticColors.purple[500]};
+        }
+
+        svg path.fix {
+          ${p.fillType || 'fill'}: ${p.theme.semanticColors.purple[800]};
+        }
+      `}
+    }
+  `
+
+  const IconCellAttrs = { isCollapsed: Boolean }
+  const IconCell = styled('div', IconCellAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 24px;
+    ${(p) => p.isCollapsed && 'width: 100%;'}
+  `
+
+  const ItemLabel = styled.div`
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 400;
+  `
+
+  const FooterButtonWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: ${(p) => p.theme.semanticColors.purple[500]};
+  `
+
+  const ChevronCellAttrs = { isWrapperHovered: Boolean }
+  const ChevronCell = styled('div', ChevronCellAttrs)`
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    visibility: ${(p) => (p.isWrapperHovered ? 'visible' : 'hidden')};
+  `
+
+  const CollapseWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+  `
+
+  const SubListAttrs = { isVisible: Boolean }
+  const SubList = styled('div', SubListAttrs)`
+    display: flex;
+    flex-direction: column;
+    margin-left: 48px;
+    margin-top: 5px;
+    gap: 5px;
+    min-width: max-content;
+    ${(p) =>
+      !p.isVisible &&
+      `
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      margin-top: 0;
+      margin-bottom: 0;
+      padding: 0;
+      gap: 0;
+    `}
+  `
+
+  const SubItemAttrs = { isDisabled: Boolean, isActive: Boolean }
+  const SubItem = styled('div', SubItemAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: 12px;
+    padding: 4px 8px;
+    min-width: max-content;
+    height: 32px;
+    border-radius: 8px;
+    cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
+    opacity: ${(p) => (p.isDisabled ? 0.6 : 1)};
+    color: ${(p) => p.theme.semanticColors.teal[800]};
+    font-size: 14px;
+
+    ${(p) =>
+      p.isActive &&
+      `
+      background-color: ${p.theme.semanticColors.purple[50]};
+      color: ${p.theme.semanticColors.purple[500]};
+    `}
+
+    &:hover {
+      ${(p) =>
+        !p.isDisabled &&
+        `
+        background-color: ${p.theme.semanticColors.purple[50]};
+        color: ${p.theme.semanticColors.purple[500]};
+      `}
+    }
+  `
+
+  const TitleContainerAttrs = { isCollapsed: Boolean }
+  const TitleContainer = styled('div', TitleContainerAttrs)`
+    display: flex;
+    justify-content: ${(p) => (p.isCollapsed ? 'flex-end' : 'space-between')};
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    min-width: 0;
+    min-height: 32px;
+  `
+
+  const FooterSectionAttrs = { isCollapsed: Boolean }
+  const FooterSection = styled('div', FooterSectionAttrs)`
+    padding: ${(p) => (p.isCollapsed ? '8px 10px' : '8px 16px')};
+    border-top: 1px solid ${(p) => p.theme.semanticColors.grey[300]};
+  `
+
+  const CollapseContainerAttrs = { isCollapsed: Boolean }
+  const CollapseContainer = styled('div', CollapseContainerAttrs)`
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-left: ${(p) => (p.isCollapsed ? '0' : '0')};
+  `
+
+  const ResponsibleBlock = styled.div`
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  `
+
+  const ResponsibleCard = styled.div`
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    padding: 0;
+    border-radius: 8px;
+    overflow: hidden;
+  `
+
+  const ResponsibleSelectSurface = styled.div`
+    width: 100%;
+    min-width: 0;
+    border-radius: 8px;
+    background-color: transparent;
+    transition: background-color 0.12s ease;
+
+    &:hover {
+      background-color: ${(p) => p.theme.semanticColors.grey[300]};
+    }
+
+    &.ResponsibleSelectSurface--open {
+      background-color: ${(p) => p.theme.semanticColors.grey[300]};
+    }
+  `
+
+  const ResponsibleSelectorRow = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    min-width: 0;
+    padding: 4px 4px 4px 2px;
+  `
+
+  const ResponsibleAvatar = styled.div`
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    border-radius: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background-color: ${(p) => p.theme.semanticColors.grey[400]};
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.4;
+    letter-spacing: -0.01em;
+    color: ${(p) => p.theme.semanticColors.grey[800]};
+  `
+
+  const ResponsibleTextStack = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 2px;
+    min-width: 0;
+    flex: 1 1 auto;
+  `
+
+  const ResponsibleRoleLabel = styled.span`
+    font-size: 10px;
+    font-weight: 500;
+    color: ${(p) => p.theme.semanticColors.grey[700]};
+  `
+
+  const ResponsibleNameLine = styled.span`
+    font-size: 12px;
+    font-weight: 400;
+    color: ${(p) => p.theme.semanticColors.teal[800]};
+    max-width: 30ch;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `
+
+  const ResponsibleOptionRow = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    width: max-content;
+    min-width: 100%;
+    box-sizing: border-box;
+  `
+
+  const ResponsibleOptionAvatar = styled.div`
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    border-radius: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background-color: ${(p) => p.theme.semanticColors.grey[300]};
+    font-size: 10px;
+    font-weight: 500;
+    color: ${(p) => p.theme.semanticColors.grey[800]};
+  `
+
+  const SelectOptionText = styled.span`
+    font-size: 14px;
+    font-weight: 400;
+    color: ${(p) => p.theme.semanticColors.grey[800]};
+    flex: 0 1 auto;
+    white-space: nowrap;
+    overflow: visible;
+  `
+
+  export default {
+    name: 'NavigationSideMenu',
+    components: {
+      PageWrapper,
+      SizerRef,
+      HeaderSection,
+      TopMenuRow,
+      TitleText,
+      CollapseButton,
+      ScrollArea,
+      ScrollContent,
+      ScrollbarTrack,
+      ScrollbarThumb,
+      GroupsList,
+      GroupSection,
+      GroupName,
+      ItemList,
+      MenuItem,
+      IconCell,
+      ItemLabel,
+      ChevronCell,
+      CollapseWrapper,
+      SubList,
+      SubItem,
+      IconComponent,
+      TitleContainer,
+      MainButton,
+      FooterSection,
+      FooterButtonWrapper,
+      CollapseContainer,
+      SelectComponent,
+      SelectOption,
+      ResponsibleBlock,
+      ResponsibleCard,
+      ResponsibleSelectSurface,
+      ResponsibleSelectorRow,
+      ResponsibleAvatar,
+      ResponsibleTextStack,
+      ResponsibleRoleLabel,
+      ResponsibleNameLine,
+      ResponsibleOptionRow,
+      ResponsibleOptionAvatar,
+      SelectOptionText,
+    },
+    props: {
+      menuData: {
+        type: Array,
+        default: () => [],
+      },
+      showProjectManagerSelect: {
+        type: Boolean,
+        default: false,
+      },
+      projectManagerOptions: {
+        type: Array,
+        default: () => [],
+      },
+      projectManagerId: {
+        type: [Number, String],
+        default: null,
+      },
+      projectManagerDisabled: {
+        type: Boolean,
+        default: false,
+      },
+      headerTitle: {
+        type: String,
+        default: '',
+      },
+      activeItemId: {
+        type: String,
+        default: null,
+      },
+      activeParentId: {
+        type: String,
+        default: null,
+      },
+      activeLanguage: {
+        type: String,
+        default: 'en',
+      },
+      footerButtonText: {
+        type: String,
+        default: '',
+      },
+    },
+    emits: [
+      'item-click',
+      'collapse-toggle',
+      'project-manager-change',
+      'on-menu-item-click',
+      'on-footer-button-click',
+      'sidebar-dimensions',
+    ],
+    data() {
+      return {
+        theme,
+        isCollapsed: false,
+        responsibleSelectSurfaceOpen: false,
+        openDropdownId: null,
+        isWrapperHovered: false,
+        expandedWidth: null,
+        scrollThumbStyle: {},
+        hasScrollOverflow: false,
+        thumbDragStartY: 0,
+        thumbDragStartScrollTop: 0,
+        titleRowResizeObserver: null,
+        sidebarLayoutResizeObserver: null,
+      }
+    },
+    computed: {
+      responsibleDisplayName() {
+        return this.getSelectValue(
+          this.projectManagerOptions,
+          this.projectManagerId,
+          'full_name',
+          'id'
+        )
+      },
+      responsibleInitials() {
+        return this.initialsFromFullName(this.responsibleDisplayName)
+      },
+    },
+    watch: {
+      activeParentId: {
+        immediate: true,
+        handler(id) {
+          if (id) this.openDropdownId = id
+        },
+      },
+      isCollapsed() {
+        this.$nextTick(() => {
+          this.updateExpandedWidth()
+          this.emitSidebarDimensions()
+        })
+      },
+      menuData: {
+        handler() {
+          this.$nextTick(() => {
+            this.updateExpandedWidth()
+            this.updateScrollThumb()
+          })
+        },
+      },
+      openDropdownId() {
+        this.$nextTick(this.updateScrollThumb)
+      },
+      responsibleDisplayName() {
+        this.$nextTick(this.updateExpandedWidth)
+      },
+      projectManagerId() {
+        this.$nextTick(this.updateExpandedWidth)
+      },
+      showProjectManagerSelect(val) {
+        this.$nextTick(() => {
+          if (val) {
+            this.setupTitleRowResizeObserver()
+          } else {
+            this.teardownTitleRowResizeObserver()
+          }
+          this.updateExpandedWidth()
+        })
+      },
+      projectManagerOptions: {
+        deep: true,
+        handler() {
+          this.$nextTick(this.updateExpandedWidth)
+        },
+      },
+    },
+    mounted() {
+      this.updateExpandedWidth()
+      this.$nextTick(() => {
+        this.updateScrollThumb()
+        this.observeScrollContent()
+        this.setupTitleRowResizeObserver()
+        this.setupSidebarLayoutResizeObserver()
+        this.emitSidebarDimensions()
+      })
+    },
+    beforeUnmount() {
+      this.teardownSidebarLayoutResizeObserver()
+      this.teardownTitleRowResizeObserver()
+      this.scrollResizeObserver?.disconnect()
+      document.removeEventListener('mousemove', this.onThumbMouseMove)
+      document.removeEventListener('mouseup', this.onThumbMouseUp)
+    },
+    methods: {
+      getSelectValue(options, currentSelectedValue, labelKey, valueKey = 'id') {
+        const selectedValue = options.find(
+          (option) => option[valueKey] == currentSelectedValue
+        )
+        return selectedValue ? selectedValue[labelKey] : '-'
+      },
+      initialsFromFullName(name) {
+        if (name == null || name === '' || name === '-') {
+          return '—'
+        }
+        const parts = String(name).trim().split(/\s+/).filter(Boolean)
+        if (!parts.length) {
+          return '?'
+        }
+        if (parts.length === 1) {
+          return parts[0].slice(0, 2).toUpperCase()
+        }
+        const a = parts[0][0] || ''
+        const b = parts[parts.length - 1][0] || ''
+        return (a + b).toUpperCase()
+      },
+      onResponsibleSelectDropdownOpen() {
+        this.responsibleSelectSurfaceOpen = true
+      },
+      onResponsibleSelectDropdownClose() {
+        this.responsibleSelectSurfaceOpen = false
+      },
+      onProjectManagerInputChange(value) {
+        this.$emit('project-manager-change', value)
+      },
+      updateExpandedWidth() {
+        if (this.isCollapsed) {
+          this.emitSidebarDimensions()
+          return
+        }
+        this.$nextTick(() => {
+          const el = this.$refs.sizerRef?.$el ?? this.$refs.sizerRef
+          if (!el) return
+          const titleRow = this.$refs.titleRowRef?.$el ?? this.$refs.titleRowRef
+          let w = el.offsetWidth
+          if (this.showProjectManagerSelect && titleRow) {
+            w = Math.max(w, titleRow.scrollWidth)
+          }
+          this.expandedWidth = w
+          this.emitSidebarDimensions()
+        })
+      },
+      /**
+       * Pushes outer width to parent (e.g. 3D ResizeHandle). Uses live layout read — call from
+       * ResizeObserver after width transition so expand-from-collapse updates correctly.
+       */
+      emitSidebarDimensionsImmediate() {
+        if (this.isCollapsed) {
+          this.$emit('sidebar-dimensions', {
+            widthPx: NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX,
+          })
+          return
+        }
+        const el = this.$el
+        const w = el?.offsetWidth
+        if (!w) return
+        this.$emit('sidebar-dimensions', { widthPx: w })
+      },
+      emitSidebarDimensions() {
+        this.$nextTick(() => this.emitSidebarDimensionsImmediate())
+      },
+      setupSidebarLayoutResizeObserver() {
+        this.teardownSidebarLayoutResizeObserver()
+        if (typeof ResizeObserver === 'undefined') return
+        const el = this.$el
+        if (!el) return
+        this.sidebarLayoutResizeObserver = new ResizeObserver(() => {
+          this.emitSidebarDimensionsImmediate()
+        })
+        this.sidebarLayoutResizeObserver.observe(el)
+      },
+      teardownSidebarLayoutResizeObserver() {
+        this.sidebarLayoutResizeObserver?.disconnect()
+        this.sidebarLayoutResizeObserver = null
+      },
+      setupTitleRowResizeObserver() {
+        this.teardownTitleRowResizeObserver()
+        if (
+          !this.showProjectManagerSelect ||
+          typeof ResizeObserver === 'undefined'
+        ) {
+          return
+        }
+        const row = this.$refs.titleRowRef?.$el ?? this.$refs.titleRowRef
+        if (!row) return
+        this.titleRowResizeObserver = new ResizeObserver(() => {
+          this.updateExpandedWidth()
+        })
+        this.titleRowResizeObserver.observe(row)
+      },
+      teardownTitleRowResizeObserver() {
+        this.titleRowResizeObserver?.disconnect()
+        this.titleRowResizeObserver = null
+      },
+      getScrollContentEl() {
+        const ref = this.$refs.scrollContent
+        return ref?.$el ?? ref
+      },
+      onFooterButtonClick() {
+        this.$emit('on-footer-button-click')
+      },
+      updateScrollThumb() {
+        const el = this.getScrollContentEl()
+        if (!el) return
+        const { scrollHeight, clientHeight, scrollTop } = el
+        this.hasScrollOverflow = scrollHeight > clientHeight
+        if (!this.hasScrollOverflow) {
+          this.scrollThumbStyle = { height: '100%', top: '0' }
+          return
+        }
+        const trackHeight = clientHeight
+        const thumbHeight = Math.max(
+          20,
+          (clientHeight / scrollHeight) * trackHeight
+        )
+        const maxScroll = scrollHeight - clientHeight
+        const thumbTop =
+          maxScroll > 0
+            ? (scrollTop / maxScroll) * (trackHeight - thumbHeight)
+            : 0
+        this.scrollThumbStyle = {
+          height: `${thumbHeight}px`,
+          top: `${thumbTop}px`,
+        }
+      },
+      observeScrollContent() {
+        const el = this.getScrollContentEl()
+        if (!el || typeof ResizeObserver === 'undefined') return
+        this.scrollResizeObserver = new ResizeObserver(() => {
+          this.updateScrollThumb()
+        })
+        this.scrollResizeObserver.observe(el)
+      },
+      onThumbMouseDown(e) {
+        const el = this.getScrollContentEl()
+        if (!el || el.scrollHeight <= el.clientHeight) return
+        this.thumbDragStartY = e.clientY
+        this.thumbDragStartScrollTop = el.scrollTop
+        document.addEventListener('mousemove', this.onThumbMouseMove, {
+          passive: false,
+        })
+        document.addEventListener('mouseup', this.onThumbMouseUp)
+      },
+      onThumbMouseMove(e) {
+        e.preventDefault()
+        const el = this.getScrollContentEl()
+        if (!el) return
+        const { scrollHeight, clientHeight } = el
+        const maxScroll = scrollHeight - clientHeight
+        if (maxScroll <= 0) return
+        const thumbHeight = Math.max(
+          20,
+          (clientHeight / scrollHeight) * clientHeight
+        )
+        const trackHeight = clientHeight
+        const thumbTravel = trackHeight - thumbHeight
+        if (thumbTravel <= 0) return
+        const deltaY = e.clientY - this.thumbDragStartY
+        const scrollDelta = (deltaY / thumbTravel) * maxScroll
+        const newScrollTop = Math.max(
+          0,
+          Math.min(maxScroll, this.thumbDragStartScrollTop + scrollDelta)
+        )
+        el.scrollTop = newScrollTop
+      },
+      onThumbMouseUp() {
+        document.removeEventListener('mousemove', this.onThumbMouseMove)
+        document.removeEventListener('mouseup', this.onThumbMouseUp)
+      },
+      toggleCollapse() {
+        this.isCollapsed = !this.isCollapsed
+        this.$emit('collapse-toggle', this.isCollapsed)
+        this.emitSidebarDimensions()
+      },
+      toggleDropdown(id) {
+        if (this.isCollapsed) {
+          this.isCollapsed = false
+          this.$emit('collapse-toggle', this.isCollapsed)
+          this.openDropdownId = id
+        } else {
+          this.openDropdownId = this.openDropdownId === id ? null : id
+        }
+      },
+    },
+  }
+</script>