Dashboard Layouts

ProductReady provides multiple dashboard layout options to accommodate different application structures and navigation patterns. Choose the layout that best fits your use case.

Available Layouts

1. Standard Dashboard (/dashboard)

The default single-level dashboard with a collapsible sidebar.

Best for:

• Simple applications with flat navigation
• Small to medium feature sets
• Quick prototyping

Features:

• Single-level navigation in sidebar
• Collapsible sidebar with toggle
• Clean and minimalistic design
• Mobile-responsive

Usage:

// Automatically applied to routes under /dashboard
export default function DashboardLayout({ children }) {
  return <div>{children}</div>;
}

Routes:

• /dashboard - Main dashboard page
• /dashboard/settings - Settings page
• /dashboard/profile - Profile page

2. Nested Dashboard (/dashboard-nested)

A two-level nested sidebar layout for complex applications with hierarchical navigation.

Best for:

• Large applications with many features
• Hierarchical content organization
• Multi-tenant applications
• Feature-rich SaaS products

Features:

• Two-level nested navigation
• Expandable/collapsible sections
• Better organization for complex apps
• Context-aware navigation

Usage:

// Routes using nested dashboard
app/
  dashboard-nested/
    layout.tsx          // Nested dashboard layout
    page.tsx            // Main nested dashboard page
    settings/
      page.tsx          // Settings under nested layout

Routes:

• /dashboard-nested - Main nested dashboard page
• /dashboard-nested/projects - Projects section
• /dashboard-nested/projects/[id] - Individual project
• /dashboard-nested/settings - Settings

Configuration:

The nested sidebar structure is defined in the layout:

// src/app/[locale]/(authed)/dashboard-nested/layout.tsx
export default function NestedDashboardLayout({ children }) {
  return (
    <NestedDashboardLayoutComponent>
      {children}
    </NestedDashboardLayoutComponent>
  );
}

Choosing the Right Layout

Use Standard Dashboard when:

• ✅ You have fewer than 10 main features
• ✅ Navigation hierarchy is flat (no subcategories)
• ✅ Users need quick access to all features
• ✅ You're building an MVP or prototype

Use Nested Dashboard when:

• ✅ You have many features (10+ menu items)
• ✅ Features are logically grouped into categories
• ✅ Different user roles need different navigation
• ✅ You need hierarchical organization (e.g., Projects → Tasks → Details)

Customizing Layouts

Sidebar Configuration

Both layouts support sidebar customization through configuration:

// Example: Custom sidebar items
const sidebarItems = [
  {
    title: 'Dashboard',
    href: '/dashboard',
    icon: HomeIcon,
  },
  {
    title: 'Projects',
    icon: FolderIcon,
    items: [
      { title: 'All Projects', href: '/dashboard/projects' },
      { title: 'Archived', href: '/dashboard/projects/archived' },
    ],
  },
];

Layout Styling

Customize layouts using CSS variables:

/* tailwind.config.ts or global.css */
:root {
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: hsl(var(--background));
  --sidebar-border: hsl(var(--border));
}

Migration Between Layouts

From Standard to Nested

1. Move routes: Copy route files from /dashboard/* to /dashboard-nested/*
2. Update links: Change all internal links to use new paths
3. Update navigation: Configure nested sidebar items
4. Test thoroughly: Verify all routes work correctly

From Nested to Standard

1. Flatten structure: Move nested routes to top level
2. Simplify navigation: Remove nested menu items
3. Update all links: Change paths from /dashboard-nested/* to /dashboard/*

Performance Considerations

Examples

Standard Dashboard Example

// app/[locale]/(authed)/dashboard/page.tsx
export default function DashboardPage() {
  return (
    <div className="p-6">
      <h1>Welcome to Dashboard</h1>
      <div className="grid grid-cols-3 gap-4">
        <DashboardCard title="Projects" count={12} />
        <DashboardCard title="Tasks" count={45} />
        <DashboardCard title="Users" count={8} />
      </div>
    </div>
  );
}

Nested Dashboard Example

// app/[locale]/(authed)/dashboard-nested/projects/page.tsx
export default function ProjectsPage() {
  return (
    <div className="p-6">
      <h1>Projects</h1>
      <div className="space-y-4">
        <ProjectList />
      </div>
    </div>
  );
}

Best Practices

1. Start simple: Begin with Standard Dashboard, migrate to Nested when needed
2. Consistent patterns: Use the same layout throughout your app
3. Mobile-first: Both layouts are responsive, but test on mobile
4. Accessibility: Ensure keyboard navigation works in both layouts
5. State persistence: Preserve sidebar collapse state in localStorage

Related Documentation

• Routing - Learn about Next.js routing in ProductReady
• UI Components - Explore available UI components
• Project Structure - Understand the project organization

Need Help?

Having trouble choosing the right layout? Consider:

• Number of features and complexity
• User navigation patterns
• Team feedback and usability testing
• Performance requirements

Start with Standard Dashboard and migrate to Nested when your application grows in complexity.