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

resources/js/composables/useAppNavigation.ts

@@ -0,0 +1,25 @@
+import { usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { useLocalization } from '@/composables/useLocalization';
+import {
+    projectNavigation,
+    projectSettingsNavigation,
+    workspaceNavigation,
+} from '@/lib/navigation';
+
+export function useAppNavigation() {
+    const page = usePage();
+    const { t } = useLocalization();
+    const project = computed(() => page.props.navigation?.project ?? null);
+
+    return {
+        project,
+        workspaceItems: computed(() =>
+            workspaceNavigation(page.props.auth.permissions, t),
+        ),
+        projectItems: computed(() => projectNavigation(project.value, t)),
+        projectSettingsItems: computed(() =>
+            projectSettingsNavigation(project.value, t),
+        ),
+    };
+}

resources/js/composables/useCurrentUrl.ts

@@ -3,6 +3,7 @@ import { usePage } from '@inertiajs/vue3';
 import type { ComputedRef, DeepReadonly } from 'vue';
 import { computed, readonly } from 'vue';
 import { toUrl } from '@/lib/utils';
+import { matchesNavigationUrl } from '@/lib/navigation';
 
 export type UseCurrentUrlReturn = {
     currentUrl: DeepReadonly<ComputedRef<string>>;
@@ -22,40 +23,21 @@ export type UseCurrentUrlReturn = {
     ) => T | F;
 };
 
-const page = usePage();
-const currentUrlReactive = computed(
-    () =>
-        new URL(
-            page.url,
-            typeof window !== 'undefined'
-                ? window.location.origin
-                : 'http://localhost',
-        ).pathname,
-);
-
 export function useCurrentUrl(): UseCurrentUrlReturn {
+    const page = usePage();
+    const currentUrlReactive = computed(
+        () => new URL(page.url, 'http://localhost').pathname,
+    );
     function isCurrentUrl(
         urlToCheck: NonNullable<InertiaLinkProps['href']>,
         currentUrl?: string,
         startsWith: boolean = false,
     ) {
-        const urlToCompare = currentUrl ?? currentUrlReactive.value;
-        const urlString = toUrl(urlToCheck);
-
-        const comparePath = (path: string): boolean =>
-            startsWith ? urlToCompare.startsWith(path) : path === urlToCompare;
-
-        if (!urlString.startsWith('http')) {
-            return comparePath(urlString);
-        }
-
-        try {
-            const absoluteUrl = new URL(urlString);
-
-            return comparePath(absoluteUrl.pathname);
-        } catch {
-            return false;
-        }
+        return matchesNavigationUrl(
+            toUrl(urlToCheck),
+            currentUrl ?? currentUrlReactive.value,
+            startsWith,
+        );
     }
 
     function isCurrentOrParentUrl(
@@ -65,11 +47,11 @@ export function useCurrentUrl(): UseCurrentUrlReturn {
         return isCurrentUrl(urlToCheck, currentUrl, true);
     }
 
-    function whenCurrentUrl(
+    function whenCurrentUrl<T, F = null>(
         urlToCheck: NonNullable<InertiaLinkProps['href']>,
-        ifTrue: any,
-        ifFalse: any = null,
-    ) {
+        ifTrue: T,
+        ifFalse: F = null as F,
+    ): T | F {
         return isCurrentUrl(urlToCheck) ? ifTrue : ifFalse;
     }