最简单的 Header

📦 配置说明

这是带有最简单 Header 的 AppLayout 配置。Header 的特点：

✅ 不显示 logo（未传递 logo 参数）
✅ 保留主题切换器
✅ 固定在页面顶部
✅ 半透明背景
✅ 极简高度设置

💡 代码示例

const headerConfig = {
  // 不传递 logo，header 将不显示 logo
  showThemeSwitcher: true,
  sticky: true,
  height: '3xs',
  background: 'base-300/90',
};

<AppLayout
  metaConfig={{
    title: '页面标题',
    description: '页面描述',
    keywords: '关键词',
    author: '作者',
    robots: 'index, follow'
  }}
  headerConfig={headerConfig}
  showHeader={true}
  showFooter={false}
  showSidebar={false}>
  <!-- 您的页面内容 -->
  <h1>页面内容</h1>
</AppLayout>

🎨 Header 配置选项

Header 支持以下配置选项（全部可选）：

logo - Logo 图片（不传递则不显示）
logoHref - Logo 链接地址
navItems - 导航菜单项
showThemeSwitcher - 是否显示主题切换器（默认 true）
sticky - 是否固定在顶部（默认 true）
height - Header 高度
background - 背景色
shadow - 阴影大小

✨ 特点

极简设计，不显示 logo
保留核心功能（主题切换）
固定在页面顶部，滚动时始终可见
半透明背景，增强视觉效果
响应式设计，适配各种屏幕

🎯 使用场景

个人博客或文章页面
工具型网站（无需品牌展示）
内部管理系统
极简主义风格网站
需要保留主题切换但不需要品牌标识的场景

🚀 进阶配置

如果需要更多功能，可以添加：

logo - 添加品牌 logo
navItems - 添加导航菜单
使用 navbar-start, navbar-center, navbar-end slots 自定义导航栏内容
添加侧边栏（ showSidebar={true} ）
添加页脚（ showFooter={true} ）

您的主要内容区域

💡 提示

由于没有传递 logo 参数，Header 左侧区域将是空白的。如果您希望在左侧显示内容，可以：

传递 logo 参数显示品牌标识
使用 navbar-start slot 自定义左侧内容
设置 navPosition="start" 将导航项显示在左侧