Co-authored-by: Liyas Thomas <liyascthomas@gmail.com> Co-authored-by: Nivedin <53208152+nivedin@users.noreply.github.com> Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<HoppSmartTabs
|
|
v-model="selectedNavigationTab"
|
|
styles="sticky overflow-x-auto flex-shrink-0 bg-primary z-10 top-0"
|
|
vertical
|
|
render-inactive-tabs
|
|
>
|
|
<HoppSmartTab
|
|
:id="'collections'"
|
|
:icon="IconFolder"
|
|
:label="`${t('tab.collections')}`"
|
|
>
|
|
<Collections />
|
|
</HoppSmartTab>
|
|
<HoppSmartTab
|
|
:id="'env'"
|
|
:icon="IconLayers"
|
|
:label="`${t('tab.environments')}`"
|
|
>
|
|
<Environments />
|
|
</HoppSmartTab>
|
|
<HoppSmartTab
|
|
:id="'history'"
|
|
:icon="IconClock"
|
|
:label="`${t('tab.history')}`"
|
|
>
|
|
<History :page="'rest'" />
|
|
</HoppSmartTab>
|
|
</HoppSmartTabs>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import IconClock from "~icons/lucide/clock"
|
|
import IconLayers from "~icons/lucide/layers"
|
|
import IconFolder from "~icons/lucide/folder"
|
|
import { ref } from "vue"
|
|
import { useI18n } from "@composables/i18n"
|
|
|
|
const t = useI18n()
|
|
|
|
type RequestOptionTabs = "history" | "collections" | "env"
|
|
|
|
const selectedNavigationTab = ref<RequestOptionTabs>("collections")
|
|
</script>
|