feat(web): add loading skeletons, error boundaries, and accessibility improvements
- Add segment-level loading.tsx for dashboard, search, admin, and auth routes - Add segment-level error.tsx with Vietnamese error messages for all route groups - Add skip-to-content navigation link in root layout - Add id="main-content" to all layout main elements - Add aria-label to nav elements and mobile menu buttons - Improve dashboard nav responsiveness (icon-only on mobile) - Hide user name on small screens in dashboard layout Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -72,6 +72,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
||||
</span>
|
||||
</Link>
|
||||
<button
|
||||
aria-label="Đóng menu"
|
||||
className="ml-auto lg:hidden"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
@@ -79,7 +80,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex flex-col gap-1 p-3">
|
||||
<nav aria-label="Quản trị" className="flex flex-col gap-1 p-3">
|
||||
{adminNavItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive =
|
||||
@@ -124,13 +125,13 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
||||
{/* Main content */}
|
||||
<div className="flex flex-1 flex-col">
|
||||
<header className="sticky top-0 z-30 flex h-14 items-center border-b bg-background/95 px-4 backdrop-blur lg:hidden">
|
||||
<button onClick={() => setSidebarOpen(true)}>
|
||||
<button aria-label="Mở menu" onClick={() => setSidebarOpen(true)}>
|
||||
<Menu className="h-5 w-5" />
|
||||
</button>
|
||||
<span className="ml-3 text-sm font-semibold">GoodGo Admin</span>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 p-4 md:p-6">{children}</main>
|
||||
<main id="main-content" className="flex-1 p-4 md:p-6">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user