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

resources/js/layouts/app/AppSidebarLayout.vue

@@ -3,6 +3,8 @@ 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 ProjectNavigation from '@/components/ProjectNavigation.vue';
+import { useLocalization } from '@/composables/useLocalization';
 import type { BreadcrumbItem } from '@/types';
 
 type Props = {
@@ -12,14 +14,27 @@ type Props = {
 withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
+const { t } = useLocalization();
 </script>
 
 <template>
     <AppShell variant="sidebar">
+        <a
+            href="#main-content"
+            class="bg-primary text-primary-foreground sr-only fixed left-4 top-4 z-50 rounded-md p-3 focus:not-sr-only"
+            >{{ t('navigation.skipToContent') }}</a
+        >
         <AppSidebar />
-        <AppContent variant="sidebar" class="overflow-x-hidden">
+        <AppContent variant="sidebar" class="min-w-0">
             <AppSidebarHeader :breadcrumbs="breadcrumbs" />
-            <slot />
+            <ProjectNavigation />
+            <div
+                id="main-content"
+                tabindex="-1"
+                class="flex min-w-0 flex-1 flex-col"
+            >
+                <slot />
+            </div>
         </AppContent>
     </AppShell>
 </template>

resources/js/layouts/settings/Layout.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
 import Heading from '@/components/Heading.vue';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
+import { useLocalization } from '@/composables/useLocalization';
 import { toUrl } from '@/lib/utils';
 import { edit as editAppearance } from '@/routes/appearance/index';
 import { edit as editApplications } from '@/routes/applications/index';
@@ -12,28 +14,29 @@ import { edit as editProfile } from '@/routes/profile/index';
 import { edit as editSecurity } from '@/routes/security/index';
 import type { NavItem } from '@/types';
 
-const sidebarNavItems: NavItem[] = [
+const { t } = useLocalization();
+const sidebarNavItems = computed<NavItem[]>(() => [
     {
-        title: 'Profile',
+        title: t('navigation.profile'),
         href: editProfile(),
     },
     {
-        title: 'Security',
+        title: t('navigation.security'),
         href: editSecurity(),
     },
     {
-        title: 'Git connections',
+        title: t('navigation.gitConnections'),
         href: editGitConnections(),
     },
     {
-        title: 'Applications',
+        title: t('navigation.applications'),
         href: editApplications(),
     },
     {
-        title: 'Appearance',
+        title: t('navigation.appearance'),
         href: editAppearance(),
     },
-];
+]);
 
 const { isCurrentOrParentUrl } = useCurrentUrl();
 </script>
@@ -41,27 +44,34 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
 <template>
     <div class="px-4 py-6">
         <Heading
-            title="Settings"
-            description="Manage your profile, security, and Git integration settings"
+            :title="t('navigation.settings')"
+            :description="t('navigation.settingsDescription')"
         />
 
-        <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 min-w-0 flex-col gap-6 lg:flex-row lg:gap-12">
+            <aside class="w-full min-w-0 lg:w-52 lg:shrink-0">
                 <nav
-                    class="flex flex-col space-x-0 space-y-1"
-                    aria-label="Settings"
+                    class="flex gap-1 overflow-x-auto lg:flex-col"
+                    :aria-label="t('navigation.settings')"
                 >
                     <Button
                         v-for="item in sidebarNavItems"
                         :key="toUrl(item.href)"
                         variant="ghost"
                         :class="[
-                            'w-full justify-start',
+                            'shrink-0 justify-start lg:w-full',
                             { 'bg-muted': isCurrentOrParentUrl(item.href) },
                         ]"
                         as-child
                     >
-                        <Link :href="item.href">
+                        <Link
+                            :href="item.href"
+                            :aria-current="
+                                isCurrentOrParentUrl(item.href)
+                                    ? 'page'
+                                    : undefined
+                            "
+                        >
                             <component :is="item.icon" class="h-4 w-4" />
                             {{ item.title }}
                         </Link>
@@ -69,9 +79,9 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
                 </nav>
             </aside>
 
-            <Separator class="my-6 lg:hidden" />
+            <Separator class="lg:hidden" />
 
-            <div class="flex-1 md:max-w-2xl">
+            <div class="min-w-0 flex-1 md:max-w-2xl">
                 <section class="max-w-xl space-y-12">
                     <slot />
                 </section>