Admin Dashboard Layout

The Admin Dashboard Layout provides the core visual and functional structure for the Inkweave administration interface. It establishes a consistent shell for internal tools, including navigation, authentication boundaries, and content areas. This layout specifically supports the private administrative functions required to manage the Inkweave platform.

This system operates as a separate repository from the main Inkweave application, utilizing the main app as a submodule located at upstream/inkweave. The layout is deployed to Vercel and enforces security through Vercel Login.
Sources: README.md:1-5

Architecture and Structure

The dashboard follows a hierarchical layout pattern typical of modern React/Next.js applications. The structure separates global configurations from specific dashboard navigation elements.

Layout Hierarchy

The root layout initializes global providers and HTML metadata, while the dashboard-specific layout manages the interactive sidebar and header components.

The diagram above illustrates how the Root Layout wraps the Dashboard Layout to ensure consistent navigation across all administrative pages.
Sources: src/app/layout.tsx, src/components/app-sidebar.tsx

Component Breakdown

The layout comprises several key components that define the user experience and navigation flow.

Sidebar and Navigation

The app-sidebar.tsx component serves as the primary navigation hub. It organizes administrative tools into logical groups and provides access to user-specific settings.

• NavMain: Renders the primary links to administrative modules like user management, content moderation, and system logs.
• NavUser: Displays the current administrator's profile and provides logout functionality.
• SidebarHeader: Contains the Inkweave Admin branding.

Sources: src/components/app-sidebar.tsx, src/components/nav-main.tsx

Data Flow and State

The dashboard layout manages the state of the navigation menu and tracks the active administrative context.

The sequence diagram shows how the layout persists across navigation events, only updating the active state and the central content area.
Sources: src/components/nav-main.tsx, src/app/layout.tsx

Security and Deployment Integration

The layout design assumes an environment protected by external authentication. Because the project is deployed to a Vercel project behind Vercel login, the layout does not implement a local login form but instead focuses on displaying the authenticated user's information retrieved from the session.
Sources: README.md:3-5, docs/PLAN.md

Implementation Example

The following snippet demonstrates how the AppSidebar is integrated into the dashboard layout to provide persistent navigation.

// src/app/admin/layout.tsx
import { AppSidebar } from "@/components/app-sidebar"
import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar"

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2">
          {/* Breadcrumb and Trigger components */}
        </header>
        <main className="flex flex-1 flex-col gap-4 p-4">
          {children}
        </main>
      </SidebarInset>
    </SidebarProvider>
  )
}

Sources: src/components/app-sidebar.tsx, src/app/layout.tsx

The Admin Dashboard Layout ensures that internal management tools are accessible, secure, and consistent. It leverages a modular component structure to allow for easy expansion as new administrative features are added to the Inkweave ecosystem.