explorer-app/layouts/default.vue
2024-09-12 11:56:16 +02:00

143 lines
4.3 KiB
Vue

<script lang="ts" setup>
import type { InputOption } from '~/types'
const { categories, usecases, ecosystems, assets, features, filteredProjectsCount, selectedCategoryId } = storeToRefs(useData())
const selectedUsecaseId = ref('all')
const selectedEcosystemId = ref('all')
const selectedAssetsUsedId = ref('all')
const selectedFeaturesId = ref('all')
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 = ref<InputOption[]>(usecases.value ? [{ label: 'Usecase', value: 'all' }, ...usecases.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.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 selectedCategory = computed(() => {
// return categories.value.find(c => c.id === selectedCategoryId.value)
// })
// const sortedFilteredCategories = computed(() => ([
// categories.value.find(c => c.id === 'defi')!,
// ...[...categories.value].sort((a, b) => a.name.localeCompare(b.name)).filter(c => c.id !== 'defi'),
// ]))
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
>
<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
>
<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>