Adds a skip link to the app layout

Author: movntains

resources/js/components/app-content.tsx

@@ -16,6 +16,7 @@ export function AppContent({
 
     return (
         <main
+            id="main"
             className="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl"
             {...props}
         >

resources/js/components/app-skip-link.tsx

@@ -0,0 +1,10 @@
+export function AppSkipLink() {
+    return (
+        <a
+            href="#main"
+            className="absolute -top-14 left-4 z-[100] rounded-md bg-black px-4 py-2 text-sm font-semibold text-white shadow-lg transition-all duration-300 ease-in-out focus:top-2 focus:outline-2 focus:ring-primary-500 focus:outline-offset-4 dark:bg-primary dark:text-black dark:focus:outline-sidebar-ring motion-reduce:transition-none"
+        >
+            Skip to Main Content
+        </a>
+    )
+}

resources/js/components/ui/sidebar.tsx

@@ -302,6 +302,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
 function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
   return (
     <main
+      id="main"
       data-slot="sidebar-inset"
       className={cn(
         "bg-background relative flex max-w-full min-h-svh flex-1 flex-col",

resources/js/layouts/app-layout.tsx

@@ -1,4 +1,5 @@
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
+import { AppSkipLink } from '@/components/app-skip-link';
 import { type BreadcrumbItem } from '@/types';
 import { type ReactNode } from 'react';
 
@@ -8,7 +9,11 @@ interface AppLayoutProps {
 }
 
 export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => (
-    <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
-        {children}
-    </AppLayoutTemplate>
+    <>
+        <AppSkipLink />
+
+        <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
+            {children}
+        </AppLayoutTemplate>
+    </>
 );