App Layout

Introduction

The AppLayout component is designed for page layouts, providing a complete layout framework that includes sidebar navigation, header, main content area, and footer. It’s particularly suitable for documentation sites, blogs, knowledge bases, and other scenarios that require navigation and content display.

Component Features:

🏗️ Complete Layout - Full page structure with header, sidebar, main content area, and footer
📱 Responsive Design - Different layout adaptations for mobile and desktop
🎨 Highly Configurable - Support for customizing header, sidebar, footer, and main content area configurations
📚 Documentation Friendly - Specifically designed for documentation sites, supporting sidebar navigation and content structure
🔧 Flexible Composition - Selective display/hide of header, sidebar, footer, and other parts
🌙 Theme Support - Complete support for light/dark theme switching

Basic Usage

The simplest way to use the application layout:

最基本的应用布局使用方式，包含侧边栏、头部、主内容区和页脚

应用布局示例

导航

欢迎使用应用布局

这是一个包含侧边栏、头部和页脚的完整布局示例。

应用布局适合用于文档站点、管理后台等场景。

              ---
import { AppLayout, Container } from '@coffic/cosy-ui';
import type { ISidebarItem } from '@coffic/cosy-ui';

const sidebarItems: ISidebarItem[] = [
  {
    text: '入门',
    href: '/docs/getting-started',
    items: [
      { href: '/docs/getting-started', text: '快速开始' },
      { href: '/docs/installation', text: '安装' },
    ],
  },
  {
    text: '组件',
    href: '/docs/components',
    items: [
      { href: '/docs/components/button', text: 'Button 按钮' },
      { href: '/docs/components/card', text: 'Card 卡片' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: '应用布局示例',
    description: '这是一个应用布局的示例页面',
    keywords: '布局,示例,应用布局',
    author: 'CofficLab',
    robots: 'noindex,nofollow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'md',
  }}
  footerConfig={{
    siteName: '我的文档站点',
    homeLink: '/',
    slogan: '简单而强大的组件库',
    company: 'CofficLab',
    copyright: '保留所有权利',
    inspirationalSlogan: '让开发更加愉悦',
  }}
  mainContentConfig={{
    padding: 'md',
    verticalPadding: '4xl',
  }}>
  <Container size="lg">
    <h1 class="cosy:text-2xl cosy:font-bold cosy:mb-4">欢迎使用应用布局</h1>
    <p class="cosy:mb-2">这是一个包含侧边栏、头部和页脚的完整布局示例。</p>
    <p>应用布局适合用于文档站点、管理后台等场景。</p>
  </Container>
</AppLayout>

Usage Examples

Basic Configuration

---
import { AppLayout } from '@coffic/cosy-ui';

const sidebarItems = [
  {
    text: 'Getting Started',
    href: '/docs/getting-started',
    items: [
      { href: '/docs/getting-started', text: 'Quick Start' },
      { href: '/docs/installation', text: 'Installation' },
    ],
  },
  {
    text: 'Components',
    href: '/docs/components',
    items: [
      { href: '/docs/components/button', text: 'Button' },
      { href: '/docs/components/card', text: 'Card' },
    ],
  },
];
---

<AppLayout
  metaConfig={{
    title: 'Documentation Title',
    description: 'Documentation description'
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems
  }}
>
  <h1>Documentation Content</h1>
  <p>This is the main content of the documentation</p>
</AppLayout>

Complete Configuration Example

<AppLayout
  metaConfig={{
    title: 'My Documentation Site',
    description: 'A fully functional documentation site',
    keywords: 'documentation,component library,tutorial',
    author: 'Your Name',
    robots: 'index,follow',
  }}
  sidebarConfig={{
    sidebarItems: sidebarItems,
  }}
  headerConfig={{
    height: 'lg',
  }}
  footerConfig={{
    siteName: 'My Documentation Site',
    homeLink: '/',
    slogan: 'Simple and powerful component library',
    company: 'My Company',
    copyright: '2024 All rights reserved',
    inspirationalSlogan: 'Making development more enjoyable',
    socialLinks: [
      'https://github.com/myorg/myrepo',
      'https://twitter.com/myorg'
    ],
  }}
  mainContentConfig={{
    padding: 'lg',
  }}
  showHeader={true}
  showSidebar={true}
  showFooter={true}
>
  <div class="prose">
    <h1>Welcome to the Documentation System</h1>
    <p>This is a complete documentation layout example...</p>
  </div>
</AppLayout>

Hiding Certain Parts

<!-- Show only main content, hide other parts -->
<AppLayout
  metaConfig={{
    title: 'Simple Page',
    description: 'A simple page with only main content'
  }}
  showHeader={false}
  showSidebar={false}
  showFooter={false}
>
  <div class="hero min-h-screen bg-base-200">
    <div class="hero-content text-center">
      <h1 class="text-5xl font-bold">Hello world!</h1>
    </div>
  </div>
</AppLayout>

Props Reference

AppLayout Props

Property	Type	Required	Default	Description
`metaConfig`	`IMetaConfig`	✅	-	Page metadata configuration
`sidebarConfig`	`ISidebarConfig`	❌	-	Sidebar configuration
`headerConfig`	`IHeaderConfig`	❌	-	Header configuration
`footerConfig`	`IFooterConfig`	❌	-	Footer configuration
`mainContentConfig`	`IMainContentConfig`	❌	-	Main content area configuration
`showHeader`	`boolean`	❌	`true`	Whether to show header
`showSidebar`	`boolean`	❌	`true`	Whether to show sidebar
`showFooter`	`boolean`	❌	`true`	Whether to show footer
`debug`	`boolean`	❌	`false`	Whether to enable debug mode
`class`	`string`	❌	-	Custom class name
`class:list`	`any`	❌	-	Class list

IMetaConfig Interface

interface IMetaConfig {
  title: string;           // Page title
  description: string;     // Page description
  keywords?: string;       // Keywords
  author?: string;         // Author
  robots?: string;         // Search engine crawler directives
  head?: astroHTML.JSX.Element; // Custom head content
  favicon?: string;        // Site icon
}

ISidebarConfig Interface

interface ISidebarConfig {
  sidebarItems: ISidebarItem[]; // Sidebar navigation items
}

interface ISidebarItem {
  text: string;            // Display text
  href: string;            // Link address
  items?: ISidebarItem[];  // Sub-items
}

IHeaderConfig Interface

interface IHeaderConfig {
  height?: 'sm' | 'md' | 'lg'; // Header height
}

IFooterConfig Interface

interface IFooterConfig {
  siteName?: string;           // Site name
  homeLink?: string;           // Home page link
  slogan?: string;             // Site slogan
  company?: string;            // Company name
  copyright?: string;          // Copyright information
  inspirationalSlogan?: string; // Inspirational slogan
  socialLinks?: string[];      // Social media links
}

IMainContentConfig Interface

interface IMainContentConfig {
  padding?: 'none' | 'sm' | 'md' | 'lg'; // Padding size
}

Layout Effects

Mobile Layout

+------------------+
|     Header       |
+------------------+
| Sidebar (1 line) |
+------------------+
|                  |
|   Main Content   |
|                  |
|                  |
+------------------+
|     Footer       |
+------------------+

Desktop Layout

+------------------+
|      Header      |
+--------+---------+
|        |         |
|Sidebar | Content |
|        |         |
|        |         |
+--------+---------+
|      Footer      |
+------------------+

Use Cases

1. Documentation Site

<AppLayout
  metaConfig={{
    title: 'Component Library Documentation',
    description: 'Complete component library usage documentation'
  }}
  sidebarConfig={{
    sidebarItems: documentationItems
  }}
>
  <div class="prose max-w-none">
    <!-- Documentation content -->
  </div>
</AppLayout>

2. Blog Website

<AppLayout
  metaConfig={{
    title: 'My Blog',
    description: 'Sharing technology and life'
  }}
  sidebarConfig={{
    sidebarItems: blogCategories
  }}
  footerConfig={{
    socialLinks: ['https://github.com/username']
  }}
>
  <article class="prose">
    <!-- Blog article content -->
  </article>
</AppLayout>

3. Knowledge Base

<AppLayout
  metaConfig={{
    title: 'Enterprise Knowledge Base',
    description: 'Internal knowledge management system'
  }}
  sidebarConfig={{
    sidebarItems: knowledgeCategories
  }}
  showFooter={false}
>
  <!-- Knowledge base content -->
</AppLayout>

Best Practices

Clear Hierarchy - Use reasonable navigation levels, no more than 3 levels
Clear Categorization - Group related content into the same category
Consistent Naming - Use consistent naming conventions

2. Content Organization

Structured Content - Use structured elements like headings, paragraphs, lists
Appropriate Whitespace - Use spacing reasonably to improve reading experience
Responsive Considerations - Ensure content readability on various devices

3. Performance Optimization

Lazy Loading - Consider lazy loading for large content
Image Optimization - Properly compress and format images
Caching Strategy - Utilize browser caching mechanisms

Style Customization

The AppLayout component follows cosy-ui’s style specifications:

Use daisyUI layout and component classes
Tailwind CSS classes require cosy: prefix
Support for complete responsive design
Built-in light/dark theme support

/* Custom style example */
.custom-layout {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}