n-admin-ui-vitesse/src/composables/setting/menu-setting.ts

import {
  SIDE_BAR_MINI_WIDTH,
  SIDE_BAR_SHOW_TIT_MINI_WIDTH,
  TriggerEnum,
} from '~/constants'

const mixSideHasChildren = ref(false)

export function useMenuSetting() {
  const { getFullContent: fullContent } = useFullContent()
  const configStore = useAppConfigStore()
  const { getShowLogo } = useRootSetting()

  const getCollapsed = computed(() => configStore.sidebar.collapsed)
  const getMenuType = computed(() => configStore.navBarMode)
  const getMenuMode = computed(() => configStore.menu.mode)
  const getMenuFixed = computed(() => configStore.sidebar.fixed)
  const getShowMenu = computed(() => configStore.menu.show)
  const getMenuHidden = computed(() => !configStore.sidebar.visible)
  const getMenuWidth = computed(() => configStore.sidebar.width)
  const getTrigger = computed(() => configStore.sidebar.trigger)
  const getMenuTheme = computed(() => configStore.sidebar.theme)
  const getSplit = computed(() => configStore.menu.split)
  const getMenuBgColor = computed(() => configStore.sidebar.bgColor)
  const getMixSideTrigger = computed(() => configStore.menu.mixSideTrigger)
  const getShowSidebar = computed(() => {
    return (
      unref(getSplit)
      || (unref(getShowMenu)
        && !unref(configStore.isHorizontal)
        && !unref(fullContent))
    )
  })

  const getCanDrag = computed(() => configStore.menu.canDrag)
  const getAccordion = computed(() => configStore.menu.accordion)
  const getMixSideFixed = computed(() => configStore.menu.mixSideFixed)
  const getTopMenuAlign = computed(() => configStore.menu.topMenuAlign)
  const getCloseMixSidebarOnChange = computed(() => configStore.closeMixSidebarOnChange)
  const getIsSidebarType = computed(() => configStore.isSidebar)
  const getIsTopMenu = computed(() => configStore.isTopMenu)
  const getMenuShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType))
  const getCollapsedShowTitle = computed(() => configStore.isCollapsedShowTitle)
  const getShowTopMenu = computed(() => unref(configStore.isHorizontal) || unref(getSplit))
  const getShowHeaderTrigger = computed(() => {
    if (
      configStore.isTopMenu
      || !unref(getShowMenu)
      || unref(getMenuHidden)
    )
      return false

    return unref(getTrigger) === TriggerEnum.HEADER
  })

  const getShowCenterTrigger = computed(() => unref(getTrigger) === TriggerEnum.CENTER)
  const getShowFooterTrigger = computed(() => unref(getTrigger) === TriggerEnum.FOOTER)
  const getIsHorizontal = computed(() => configStore.isHorizontal)
  const getIsMixSidebar = computed(() => configStore.isMixSidebar)
  const getIsMixMode = computed(() => configStore.isMixMode)

  const getMiniWidthNumber = computed(() => {
    const { collapsedShowTitle } = configStore.menu
    return collapsedShowTitle
      ? SIDE_BAR_SHOW_TIT_MINI_WIDTH
      : SIDE_BAR_MINI_WIDTH
  })

  const getRealWidth = computed(() => {
    if (unref(getIsMixSidebar)) {
      return unref(getCollapsed) && !unref(getMixSideFixed)
        ? unref(getMiniWidthNumber)
        : unref(getMenuWidth)
    }
    return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth)
  })

  const getCalcContentWidth = computed(() => {
    const width
      = unref(getIsTopMenu)
        || !unref(getShowMenu)
        || (unref(getSplit) && unref(getMenuHidden))
        ? 0
        : unref(getIsMixSidebar)
          ? (unref(getCollapsed)
              ? SIDE_BAR_MINI_WIDTH
              : SIDE_BAR_SHOW_TIT_MINI_WIDTH)
          + (unref(getMixSideFixed) && unref(mixSideHasChildren)
            ? unref(getRealWidth)
            : 0)
          : unref(getRealWidth)

    return `calc(100% - ${unref(width)}px)`
  })

  function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
    configStore.setMenu(menuSetting)
  }

  function setSidebarSetting(
    sidebarSetting: Partial<SidebarConfigOptions>,
  ): void {
    configStore.setSidebar(sidebarSetting)
  }

  function setSiderWidth(width: number) {
    setSidebarSetting({ width })
  }

  function toggleCollapsed() {
    setSidebarSetting({
      collapsed: !unref(getCollapsed),
    })
  }

  return {
    setSiderWidth,
    setMenuSetting,
    toggleCollapsed,
    getMenuFixed,
    getRealWidth,
    getMenuType,
    getMenuMode,
    getShowMenu,
    getCollapsed,
    getMiniWidthNumber,
    getCalcContentWidth,
    getMenuWidth,
    getTrigger,
    getSplit,
    getMenuTheme,
    getCanDrag,
    getCollapsedShowTitle,
    getIsHorizontal,
    getIsSidebarType,
    getAccordion,
    getShowTopMenu,
    getShowHeaderTrigger,
    getShowCenterTrigger,
    getShowFooterTrigger,
    getTopMenuAlign,
    getMenuHidden,
    getIsTopMenu,
    getMenuBgColor,
    getShowSidebar,
    getIsMixMode,
    getIsMixSidebar,
    getCloseMixSidebarOnChange,
    getMixSideTrigger,
    getMixSideFixed,
    mixSideHasChildren,
    getMenuShowLogo,
  }
}