frontend/components/ui/sidebar/SidebarMenuSkeleton.vue
Jesse Wierzbinski 092bce0f24
Some checks failed
CodeQL / Analyze (javascript) (push) Failing after 2m30s
Deploy to GitHub Pages / build (push) Failing after 6s
Deploy to GitHub Pages / deploy (push) Has been skipped
Docker / build (push) Failing after 5s
Mirror to Codeberg / Mirror (push) Failing after 0s
chore: ⬆️ Upgrade to the latest Shadcn-Vue version
2025-03-28 01:16:24 +01:00

34 lines
786 B
Vue

<script setup lang="ts">
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import { type HTMLAttributes, computed } from "vue";
const props = defineProps<{
showIcon?: boolean;
class?: HTMLAttributes["class"];
}>();
const width = computed(() => {
return `${Math.floor(Math.random() * 40) + 50}%`;
});
</script>
<template>
<div
data-sidebar="menu-skeleton"
:class="cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)"
>
<Skeleton
v-if="showIcon"
class="size-4 rounded-md"
data-sidebar="menu-skeleton-icon"
/>
<Skeleton
class="h-4 flex-1 max-w-[--skeleton-width]"
data-sidebar="menu-skeleton-text"
:style="{ '--skeleton-width': width }"
/>
</div>
</template>