Back to features

Layouts

This feature provides a structured layout system for your Phoenix application, replacing the default single layout with purpose-built layouts for different page types. It automatically generates separate layouts for application pages, authentication flows, and public-facing content with consistent navigation and theming.

Key Benefits

  • Separation of concerns - Dedicated layouts for app pages, auth flows, and public content
  • Consistent navigation - Unified header with logo, theme toggle, and user avatar components
  • Authentication-aware - Session layout optimized for login/registration without navigation clutter
  • Responsive design - Mobile-first approach with Tailwind CSS classes and proper breakpoints

Implementation Details

The feature creates three distinct layout modules:

  • Layouts.App - Main application layout with full navigation for authenticated users
  • Layouts.Session - Minimal layout for login/registration pages without navigation
  • Layouts.Public - Public-facing layout for marketing/landing pages

It refactors the existing layouts.ex to delegate to these specialized modules and updates all authentication LiveViews to use the appropriate session layout. The root layout is simplified by removing embedded navigation in favor of layout-specific implementations.

Usage Example

# In your LiveView
def render(assigns) do
  ~H"""
  <Layouts.App.page flash={@flash} current_scope={@current_scope}>
    <div class="space-y-6">
      <!-- Your app content -->
    </div>
  </Layouts.App.page>
  """
end

# Session pages automatically use minimal layout
<Layouts.Session.page flash={@flash} current_scope={@current_scope}>
  <!-- Login form without navigation -->
</Layouts.Session.page>

Configuration

No additional configuration required. The feature automatically updates existing authentication pages and provides reusable logo and avatar components. Theme toggle functionality is preserved across all layouts.