explorer-app/layouts/default.vue

<script lang="ts" setup>
import type { InputOption } from '~/types'

const { categories, usecases, ecosystems, assets, features, filteredProjectsCount, selectedCategoryId, selectedUsecaseId, selectedEcosystemId, selectedAssetsUsedId, selectedFeaturesId } = storeToRefs(useData())

const selectedCategory = computed(() => {
  return categories.value.find(c => c.id === selectedCategoryId.value)
})
const availableUsecases = computed(() => {
  if (selectedCategoryId.value === 'all')
    return usecases.value
  return usecases.value.filter(u => selectedCategory.value?.usecases?.includes(u.id))
})

const categoryOptions = ref<InputOption[]>(categories.value ? [{ label: 'Category', value: 'all' }, ...categories.value.map(c => ({ label: c.name, value: c.id, count: c.projectsCount }))] : [])
const usecaseOptions = computed<InputOption[]>(() => availableUsecases.value.length ? [{ label: 'Usecase', value: 'all' }, ...availableUsecases.value.map(u => ({ label: u.name, value: u.id }))] : [])
const ecosystemOptions = ref<InputOption[]>(ecosystems.value ? [{ label: 'Ecosystem', value: 'all' }, ...ecosystems.value.map(e => ({ label: e.name, value: e.id }))] : [])
const assetOptions = ref<InputOption[]>(assets.value ? [{ label: 'Asset used', value: 'all' }, ...assets.value.map(a => ({ label: `${a.id.toUpperCase()} (${a.name})`, value: a.id }))] : [])
const featureOptions = ref<InputOption[]>(features.value ? [{ label: 'Feature', value: 'all' }, ...features.value.map(f => ({ label: f.name, value: f.id }))] : [])

const { showBar } = storeToRefs(useNavigaiton())
const swipeEl = ref()
const { y } = useWindowScroll()
const scrollEl = ref()
const { y: scrollY } = useScroll(scrollEl)
const { top } = useElementBounding(scrollEl)

watch(y, (newY, oldY) => {
  if (newY > oldY && newY > 32)
    showBar.value = false
  else
    showBar.value = true
})

watch([scrollY, top, y], (newValues, oldValues) => {
  if (top.value <= 32)
    scrollY.value += newValues[2] - oldValues[2]
})
</script>

<template>
  <div
    ref="swipeEl"
    flex
    flex-col
    min-h-100vh
    h-full
    w-full
  >
    <Navigation />
    <div
      app-container
      mt-32px
      relative
    >
      <div
        md:hidden
        block
        absolute
        z-5
        class="bg-gradient-to-r from-transparent to-app-black "
        w-50px
        h-35px
        top-14
        right-0
      />
      <div
        flex
        w-full
        xl:gap-32px
      >
        <div
          flex
          flex-col
          w-full
        >
          <div
            flex
            flex-col
            md:flex-row
            md:justify-between
            md:items-center
            gap-16px
            mb="16px md:32px"
          >
            <SearchBox
              flex-1
              placeholder:text-app-text-grey
              :placeholder="`Search in ${filteredProjectsCount} Projects`"
            />
            <div
              md:flex-2
              flex
              items-center
              gap-16px
              relative
              overflow-x-auto
              pb-274px
              mb--250px
              md="overflow-x-visible pb-0 mb-0"
              class="no-scrollbar"
            >
              <CategorySelectBox
                v-model="selectedCategoryId"
                :options="categoryOptions"
                name="categorySelect"
                w-full
                @selected="selectedCategoryId === 'all' ? navigateTo(`/`) : navigateTo(`/category/${selectedCategoryId}`)"
              />
              <CategorySelectBox
                v-if="usecases?.length"
                v-model="selectedUsecaseId"
                name="usecaseSelect"
                :options="usecaseOptions"
                w-full
              />
              <CategorySelectBox
                v-if="ecosystems?.length"
                v-model="selectedEcosystemId"
                name="ecosystemSelect"
                :options="ecosystemOptions"
                w-full
              />
              <CategorySelectBox
                v-if="assets?.length"
                v-model="selectedAssetsUsedId"
                name="assetsUsedSelect"
                :options="assetOptions"
                w-full
              />
              <CategorySelectBox
                v-if="features?.length"
                v-model="selectedFeaturesId"
                name="featuresSelect"
                :options="featureOptions"
                w-full
              />
            </div>
          </div>
          <slot />
        </div>
      </div>
    </div>
    <Footer justify-self-end />
  </div>
</template>

<style scoped>
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
</style>