mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-24 06:28:42 +01:00
Code Issues Projects Releases Wiki Activity

feat: improves navigation by implementing horizontal scrolling cards (#3498)

Browse Source
This commit is contained in:
Amir Raminfar
2025-01-02 09:07:27 -08:00
committed by GitHub
parent 2bf811d632
commit 291d4f7f37
10 changed files with 120 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/components/SideMenu.vue
View File

@@ -1,17 +1,13 @@
<template>
<div v-if="ready" data-testid="side-menu">
<Toggle v-model="showSwarm" v-if="services.length > 0 || customGroups.length > 0">
<div class="text-lg font-light">{{ $t("label.swarm-mode") }}</div>
</Toggle>
<SlideTransition :slide-right="showSwarm">
<template #left>
<div v-if="ready" data-testid="side-menu" class="flex min-h-0 flex-col">
<Carousel v-model="selectedCard" class="flex-1">
<CarouselItem title="Hosts and Containers" id="host">
<HostMenu />
</template>
<template #right>
</CarouselItem>
<CarouselItem title="Services and Stacks" v-if="services.length > 0" id="swarm">
<SwarmMenu />
</template>
</SlideTransition>
</CarouselItem>
</Carousel>
</div>
<div role="status" class="flex animate-pulse flex-col gap-4" v-else>
<div class="h-3 w-full rounded-full bg-base-content/50 opacity-50" v-for="_ in 9"></div>
@@ -24,17 +20,16 @@ const containerStore = useContainerStore();
const { ready } = storeToRefs(containerStore);
const route = useRoute();
const swarmStore = useSwarmStore();
const { services, customGroups } = storeToRefs(swarmStore);
const showSwarm = useSessionStorage<boolean>("DOZZLE_SWARM_MODE", false);
const { services } = storeToRefs(swarmStore);
const selectedCard = ref<"host" | "swarm">("host");
watch(
route,
() => {
if (route.meta.swarmMode) {
showSwarm.value = true;
selectedCard.value = "swarm";
} else if (route.meta.containerMode) {
showSwarm.value = false;
selectedCard.value = "host";
}
},
{ immediate: true },