sidebar component

src/components/ui/sidebar/SidebarGroupAction.vue

@@ -0,0 +1,37 @@
+<script setup>
+    import { Primitive } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        as: {
+            type: [String, Object, Function],
+            default: 'button'
+        },
+        asChild: {
+            type: Boolean,
+            default: false
+        },
+        class: {
+            type: [String, Array, Object],
+            default: undefined
+        }
+    });
+</script>
+
+<template>
+    <Primitive
+        data-slot="sidebar-group-action"
+        data-sidebar="group-action"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                'after:absolute after:-inset-2 md:after:hidden',
+                'group-data-[collapsible=icon]:hidden',
+                props.class
+            )
+        ">
+        <slot />
+    </Primitive>
+</template>