webapps/packages/layers/ux/app/components/XScaffold/Header/New.vue

<script setup lang="ts">
const { g, p } = useContentInjected()

const props = defineProps<{
  class?: string
  ux?: any
  home: 'always' | 'break'
  mobile: 'left' | 'right'
  main: 'center' | 'left'
  separatorListProps?: any
}>()

const slots = useSlots()

const classes = useStyling(
  'scaffoldHeaderNew',
  {
    slots: {
      background: 'w-full h-full',
      container: 'w-full flex flex-row items-center',
      left: '',
      home: 'flex justify-center items-center',
      mobile: 'md:hidden flex justify-center items-center',
      main: 'grow flex flex-row min-w-0',
      mainBreak: 'grow hidden md:flex min-w-0',
      navigation: 'hidden md:flex flex-row',
      switchers: 'flex flex-row',
      separatorList: 'shrink-0 justify-end',
    },
    variants: {
      home: {
        always: {},
        break: {
          home: 'hidden md:flex',
        },
      },
      mobile: {
        left: {},
        right: {},
      },
      main: {
        left: {
          main: 'justify-start',
          mainBreak: 'justify-start',
        },
        center: {
          main: 'justify-center',
          mainBreak: 'justify-center',
        },
      },
      hasMain: {
        true: {},
        false: {},
      },
      hasMainBreak: {
        true: {},
        false: {},
      },
      hasNavigation: {
        true: {},
        false: {},
      },
      hasSeparator: {
        true: {},
        false: {},
      },
    },
    compoundVariants: [
      {
        home: 'always',
        mobile: 'left',
        class: {
          home: 'hidden md:flex',
        },
      },
      {
        hasMain: false,
        class: {
          separatorList: 'grow',
        },
      },
      {
        hasMainBreak: true,
        class: {
          main: 'md:hidden',
        },
      },
      {
        mobile: 'right',
        hasSeparator: true,
        class: {
          separatorList: 'md:[&>*:nth-last-child(2)]:hidden',
        },
      },
      {
        hasNavigation: true,
        hasSeparator: true,
        class: {
          separatorList: '[&>*:nth-child(2)]:hidden md:[&>*:nth-child(2)]:block',
        },
      },
    ],
  },
  {
    ...props,
    hasMain: !!slots.default,
    hasMainBreak: !!slots['main-break'],
    hasNavigation: !!slots.navigation,
    hasSeparator: !!props.separatorListProps?.separator,
  }
)
</script>

<template>
  <XScaffoldContent>
    <template #background>
      <div :class="classes.background">
        <slot name="background" />
      </div>
    </template>

    <div :class="classes.container">
      <div :class="classes.left" v-if="$slots.home || $slots.mobile">
        <div :class="classes.home" v-if="$slots.home">
          <slot name="home" />
        </div>

        <div :class="classes.mobile" v-if="props.mobile === 'left'">
          <slot name="mobile" />
        </div>
      </div>

      <div :class="classes.main" v-if="$slots.default">
        <slot />
      </div>

      <div :class="classes.mainBreak" v-if="$slots['main-break']">
        <slot name="main-break" />
      </div>

      <XSeparatorList
        orientation="horizontal"
        :class="classes.separatorList"
        v-bind="props.separatorListProps"
      >
        <div :class="classes.navigation" v-if="$slots.navigation">
          <slot name="navigation" />
        </div>

        <div :class="classes.switchers" v-if="$slots.switchers">
          <slot name="switchers" />
        </div>

        <div :class="classes.mobile" v-if="props.mobile === 'right'">
          <slot name="mobile" />
        </div>
      </XSeparatorList>
    </div>

    <!--      <div :class="classes.brand">-->
    <!--        <XScaffoldHomeButton :class="classes.brandHome" v-bind="props.homeProps" />-->
    <!--        <XScaffoldMobileMenuOpenButton :class="classes.brandMobile" v-bind="props.mobileProps" />-->
    <!--        <XScaffoldHeaderBrand v-bind="props.brandProps" />-->
    <!--      </div>-->

    <!--          <nav :class="classes.navigation">-->
    <!--            <ul :class="classes.navigationList">-->
    <!--              <li :class="classes.navigationItem" v-for="page in g.scaffold.pages">-->
    <!--                <XText-->
    <!--                  :class="classes.navigationLink"-->
    <!--                  as="link"-->
    <!--                  :text="page.text"-->
    <!--                  :link-props="{ to: p(page.link) }"-->
    <!--                  v-bind="props.linkProps"-->
    <!--                  :margin="false"-->
    <!--                />-->
    <!--              </li>-->

    <!--          <li :class="classes.separatorItem" v-if="$slots.locale || $slots.variant">-->
    <!--            <USeparator :class="classes.separator" orientation="vertical" />-->
    <!--          </li>-->

    <!--          <li v-if="$slots.locale">-->
    <!--            <slot name="locale" />-->
    <!--          </li>-->

    <!--          <li v-if="$slots.variant">-->
    <!--            <slot name="variant" />-->
    <!--          </li>-->
    <!--        </ul>-->
    <!--      </nav>-->
  </XScaffoldContent>
</template>