Two month of work

resources/js/layouts/AppLayout.vue

@@ -6,7 +6,7 @@ import 'vue-sonner/style.css'
 import { Toaster } from 'vue-sonner'
 import { Info, CircleAlert, CircleCheck, LoaderCircle, Ban } from "lucide-vue-next"
 import { Button } from '@/components/ui/crm-button'
-import { SidebarProvider } from '@/components/ui/sidebar';
+import { SidebarProvider } from '@/components/ui/crm-sidebar';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
 import { alertStore } from '@/stores/alertStore';
 import { webcronStore } from '@/stores/webcronStore';
@@ -70,12 +70,12 @@ onMounted(() => {
         </template>
     </Toaster>
 
-    <div class="overflow-x-auto p-4 lg:p-8 lg:pl-4 print:bg-transparent print:p-0 print:m-0">
+    <div class="overflow-hidden print:bg-transparent">
 
         <SidebarProvider :default-open="isOpen">
             <AppSidebar />
 
-            <main class="w-full overflow-x-hidden">
+            <main class="w-full h-lvh overflow-auto bg-main print:bg-transparent border-l print:border-0 border-sidebar-border/50 p-4 md:p-6 lg:p-8">
                 <slot />
             </main>
         </SidebarProvider>
@@ -115,12 +115,5 @@ onMounted(() => {
         background-color: transparent;
     }
 
-    main {
-        margin: 0;
-        background-color: transparent;
-        border-radius: 0;
-        box-shadow: none;
-        outline: none;
-    }
 }
 </style>

resources/js/layouts/auth/AuthSplitLayout.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
-import { home } from '@/routes';
 import { usePage } from '@inertiajs/vue3';
 
 const page = usePage();
@@ -26,7 +25,7 @@ defineProps<{
             <div class="mx-auto flex w-full flex-col justify-center space-y-12 sm:w-[350px]">
                 <div class="flex flex-col space-y-2">
 
-                    <div :href="home()" class="flex items-center gap-4">
+                    <div class="flex items-center gap-4">
                         <AppLogoIcon />
                         <div>
                             <h1 class="text-xl font-medium tracking-wide text-amber-50">{{ name }}</h1>

resources/js/layouts/settings/Layout.vue

@@ -44,10 +44,10 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
             <Heading title="Einstellungen" description="Manage your profile and account settings" />
         </div>
 
-        <div class="flex flex-row flex-wrap gap-4 bg-background shadow rounded-lg p-6">
+        <div class="flex flex-row flex-wrap gap-4 bg-background shadow rounded-lg p-6 max-w-4xl">
 
-            <div class="flex flex-col lg:flex-row lg:space-x-12">
-                <aside class="w-full max-w-xl lg:w-48">
+            <div class="flex flex-col grow lg:flex-row lg:space-x-12">
+                <aside class="w-full max-w-xl lg:w-64">
                     <nav class="flex flex-col space-y-1 space-x-0">
                         <Button v-for="item in sidebarNavItems" :key="toUrl(item.href)" variant="ghost"
                             :class="['w-full justify-start', { 'bg-muted': urlIsActive(item.href, currentPath) }]"
@@ -61,8 +61,8 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
 
                 <Separator class="my-6 lg:hidden" />
 
-                <div class="flex-1 md:max-w-2xl">
-                    <section class="max-w-xl space-y-12">
+                <div class="flex-1">
+                    <section class="space-y-12">
                         <slot />
                     </section>
                 </div>