Caramel-CRM-Backup/resources/js/layouts/app/AppSidebarLayout.vue

<script setup lang="ts">
import AppContent from '@/components/AppContent.vue';
import AppShell from '@/components/AppShell.vue';
import AppSidebar from '@/components/AppSidebar.vue';
import AppSidebarHeader from '@/components/AppSidebarHeader.vue';
import type { BreadcrumbItemType } from '@/types';

interface Props {
    breadcrumbs?: BreadcrumbItemType[];
}

withDefaults(defineProps<Props>(), {
    breadcrumbs: () => [],
});
</script>

<template>
    <AppShell variant="sidebar">
        <AppSidebar />
        <AppContent variant="sidebar" class="overflow-x-hidden bg-main">
            <AppSidebarHeader :breadcrumbs="breadcrumbs" />
            <slot />
        </AppContent>
    </AppShell>
</template>

<style>
@media print {
    header,
    [data-slot="sidebar"]
    {
        display: none;
    }
    body {
        margin: 25mm;        
    }
    html, body,
    [data-slot-sidebar-wrapper] {
        background-color: transparent;
    }
    main {
        margin: 0;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
        outline: none;
    }
}
</style>