first commit

resources/js/Components/Sidebar/Sidebar.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <nav class="fixed inset-y-0 left-0 w-64 max-lg:hidden">
+        <slot />
+    </nav>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Sidebar/SidebarBody.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="flex flex-1 flex-col overflow-y-auto p-4 [&>[data-slot=section]+[data-slot=section]]:mt-8">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Sidebar/SidebarFooter.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="max-lg:hidden flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Sidebar/SidebarHeader.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Sidebar/SidebarItem.vue

@@ -0,0 +1,19 @@
+<script setup>
+import {Link} from '@inertiajs/vue3'
+import {ref} from "vue";
+
+const componentRef = ref()
+</script>
+
+<template>
+    <Link ref="componentRef"
+          @mouseenter="componentRef.$el.setAttribute('data-hover', '')"
+          @mouseleave="componentRef.$el.removeAttribute('data-hover')"
+          class="flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5 *:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5 *:last:data-[slot=icon]:ml-auto *:last:data-[slot=icon]:size-5 sm:*:last:data-[slot=icon]:size-4 *:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 sm:*:data-[slot=avatar]:size-6 data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950 data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950 data-current:*:data-[slot=icon]:fill-zinc-950 dark:text-white dark:*:data-[slot=icon]:fill-zinc-400 dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white dark:data-current:*:data-[slot=icon]:fill-white">
+        <slot />
+    </Link>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Sidebar/SidebarLabel.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <span class="truncate">
+        <slot />
+    </span>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Sidebar/SidebarSection.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div data-slot="section" class="flex flex-col gap-0.5">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+
+</style>