feat(KAN-19): add responsive permission-aware navigation

2026-09-11 14:16:43 +02:00
parent de6f4e5b2f
commit 4adda6e53b
28 changed files with 1547 additions and 428 deletions
@@ -0,0 +1,86 @@
+import { createApp, h } from 'vue';
+import { createInertiaApp, Head, usePage } from '@inertiajs/vue3';
+import '../../resources/css/app.css';
+import AppLayout from '../../resources/js/layouts/AppLayout.vue';
+import { createAppearance } from '../../resources/js/composables/useAppearance';
+import { createLocalization } from '../../resources/js/lib/localization';
+
+const Preview = {
+    setup() {
+        const page = usePage();
+        return () => {
+            const title = page.url
+                .split('?')[0]
+                .split('/')
+                .filter(Boolean)
+                .at(-1);
+            return h(
+                AppLayout,
+                {
+                    breadcrumbs: [
+                        { title: 'Projects', href: '/projects' },
+                        ...(page.props.navigation.project
+                            ? [
+                                  {
+                                      title: page.props.navigation.project.name,
+                                      href: '/projects/7',
+                                  },
+                              ]
+                            : []),
+                        { title, href: page.url },
+                    ],
+                },
+                () => [
+                    h(Head, { title }),
+                    h('div', { class: 'grid gap-column p-page' }, [
+                        h(
+                            'h1',
+                            {
+                                class: 'text-headline',
+                                'data-test': 'page-title',
+                            },
+                            title,
+                        ),
+                        h(
+                            'p',
+                            { class: 'text-muted-foreground' },
+                            'Navigation preview with isolated test data.',
+                        ),
+                        h(
+                            'div',
+                            {
+                                class: 'grid gap-column sm:grid-cols-2 xl:grid-cols-3',
+                            },
+                            ['To do', 'In progress', 'Done'].map((label) =>
+                                h(
+                                    'section',
+                                    {
+                                        class: 'grid gap-stack rounded-md border bg-card p-card',
+                                    },
+                                    [
+                                        h('h2', { class: 'text-title' }, label),
+                                        h(
+                                            'p',
+                                            {},
+                                            'Plan and track the next iteration.',
+                                        ),
+                                    ],
+                                ),
+                            ),
+                        ),
+                    ]),
+                ],
+            );
+        };
+    },
+};
+
+createInertiaApp({
+    resolve: () => Preview,
+    setup: ({ el, App, props, plugin }) =>
+        createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(createLocalization())
+            .use(createAppearance())
+            .mount(el),
+});