rag/resources/js/Layouts/AppLayout.vue

<script setup lang="ts">
import AppSidebar from '@/Components/AppSidebar.vue'
import {SidebarProvider} from '@/Packages/Shadcn/Components/ui/sidebar'
import {Head, usePage} from "@inertiajs/vue3";
import {computed} from "vue";

const page = usePage()

defineOptions({inheritAttrs: false})

defineProps({
    pageClass: {
        default: () => null,
    }
})

const user = computed(() => page?.props?.auth?.user)
const chats = computed(() => page?.props?.auth?.chats ?? [])

</script>

<template>
    <Head/>

    <SidebarProvider>
        <AppSidebar v-bind="{ user, chats }"/>

        <main class="w-full px-2 md:px-0 md:pr-2 py-2" :class="pageClass">
<!--            <div class="sticky top-2 bg-background px-3 py-2">Steam Deck QA</div>-->
            <slot/>
        </main>
    </SidebarProvider>
</template>

<style scoped>

</style>