Dashboard

Welcome back! Here’s an overview of your projects.

Total Revenue

$45,231.89

20.1%

from last month

Active Users

2,300

15.3%

from last month

Conversion Rate

4.24%

2.1%

from last month

No reports generated yet

Get started by creating a new report. All your generated documents will appear here.

结合左侧边栏和顶部标题的基本布局，最常用于现代 SaaS 应用程序和管理仪表板。

用例和功能

管理屏幕/SaaS 产品：非常适合具有许多导航项目的应用程序。
响应式兼容性：始终显示在桌面上的侧边栏被设计为隐藏在手机和平板电脑屏幕上（实际操作中，它显示在带有汉堡菜单等的抽屉中）。
Flexbox 布局：通过结合“flex-1”和“min-w-0”等实用程序计算出适合全屏高度的结构。只有主要内容区域滚动，标题和侧边栏是固定的。

设计和用户体验（Design & UX）的要点

滚动区域分离：左侧导航（aside内的nav）和右侧主要内容（main）的滚动是独立的，因此即使很长的菜单也不会干扰主屏幕。
自定义滚动条：我们使用 ::-webkit-scrollbar 将默认的粗滚动条更改为更薄、更时尚的设计，从而减少 UI 噪音。
高度可见的层次结构：通过组合背景颜色（bg-slate-50和bg-white）、边框（border-slate-200）和光阴影（shadow-sm），自然地表达每个部分的边界。

如何定制（定制指南）

侧边栏宽度：您可以通过将“aside”中指定的“w-64”（16rem = 256px）更改为“w-72”或“w-56”来调整宽度。
标题高度：您可以通过将“标题”和侧边栏顶部的徽标区域从“h-16”（4rem = 64px）更改为“h-14”等来控制整体高度。
更改主题颜色：请将每个图标和活动菜单中使用的“indigo-600”等替换为您的品牌颜色（例如“blue-600”或“violet-500”）。

实现代码 (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- 侧边栏 -->
<aside class="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 shrink-0">
  <div class="h-16 flex items-center px-6 border-b border-slate-200 shrink-0">
    <a href="#" class="font-bold text-lg text-indigo-600">NexusApp</a>
  </div>
  
  <nav class="flex-1 overflow-y-auto py-4 px-3">
    <ul class="space-y-1">
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-600">
          Dashboard
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50">
          Team
        </a>
      </li>
    </ul>
  </nav>
</aside>

<!-- メインコンテナ -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- 标题 -->
  <header class="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-200 shadow-sm shrink-0">
    <div class="flex items-center gap-4">
      <!-- モバイル用メニュートグル -->
      <button class="md:hidden p-2 text-slate-500 hover:text-slate-900 rounded-md">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
      </button>
    </div>
    
    <div class="flex items-center gap-4">
      <button class="p-2 text-slate-400 hover:text-slate-600 rounded-full">
        <!-- 通知アイコン等 -->
      </button>
      <div class="h-8 w-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm font-bold">
        JS
      </div>
    </div>
  </header>
  
  <!-- メインContent領域 -->
  <main class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
      <!-- ここにページ固有のContentを配置 -->
      <h1 class="text-2xl font-bold text-slate-900 mb-6">Dashboard</h1>
    </div>
  </main>
</div>
</div>

浏览器支持

可与最新版本的现代浏览器（Chrome、Safari、Firefox、Edge）正常配合使用。
不支持旧浏览器（IE 等），因为 Flexbox（flex、flex-1、flex-col）被大量使用。