I Cloned Linear's Sidebar in 50 Lines of HTML — One File, Zero npm

我用 50 行 HTML 克隆了 Linear 的侧边栏 —— 单文件，零 npm

🌐 Live demo (LOOK · UNDERSTAND · BUILD): https://dev48v.infy.uk/design/day2-linear-sidebar.html 🌐 在线演示 (查看 · 理解 · 构建): https://dev48v.infy.uk/design/day2-linear-sidebar.html

Day 2 of my DesignFromZero series — clone 50 iconic UIs in 50 days, one HTML file each, no npm, no build setup. Today: Linear’s sidebar. The dark-mode app-shell pattern that Linear, Notion, Slack, Discord, and every modern SaaS sidebar copies. 这是我“从零开始设计”(DesignFromZero) 系列的第二天——计划在 50 天内克隆 50 个标志性 UI，每个 UI 仅用一个 HTML 文件，无需 npm，无需构建配置。今天的主角是：Linear 的侧边栏。这是一种深色模式的应用外壳 (app-shell) 模式，被 Linear、Notion、Slack、Discord 以及每一个现代 SaaS 侧边栏所效仿。

Why this UI matters

为什么这个 UI 很重要

Once you build a Linear-style sidebar, you have the skeleton for: 一旦你构建了 Linear 风格的侧边栏，你就掌握了以下应用的骨架：

Discord (servers + channels) / Discord（服务器 + 频道）
Notion (workspace + nested pages) / Notion（工作区 + 嵌套页面）
Slack (workspaces + channels + DMs) / Slack（工作区 + 频道 + 私信）
Github (repos + issues + PRs) / Github（仓库 + 问题 + PR）

It’s the app-shell pattern: fixed left column, flexible main column, the entire app lives in that grid. Master it once. 这就是应用外壳模式：固定的左侧栏，灵活的主内容列，整个应用都运行在这个网格中。掌握一次，终身受用。

The shape

结构示意

┌──────────────────────────────────────┐
│ D Workspace ⌘K                       │
├──────────────────────────────────────┤
│ 📥 Inbox [3]                         │
│ 🎯 My issues ← active                │
│ 👁 Subscribed                         │
│                                      │
│ WORKSPACE                            │
│ ● Active projects                    │
│ ● Roadmap                            │
│                                      │
│ TEAMS                                │
│ F Frontend                           │
│ B Backend                            │
├──────────────────────────────────────┤
│ v2.81.0 ● Online                     │
└──────────────────────────────────────┘

Six chunks: header (logo + workspace + ⌘K hint), primary nav (3 personal rows), section header (“WORKSPACE”), status-dot items, team rows with avatars, status footer. That’s the whole pattern. 六个部分：页眉（Logo + 工作区 + ⌘K 提示）、主要导航（3 行个人项）、分区标题（“WORKSPACE”）、状态点项、带头像的团队行、状态页脚。这就是整个模式。

The whole thing (~50 lines)

完整代码（约 50 行）

<!DOCTYPE html>
<html>
<head><script src="https://cdn.tailwindcss.com"></script></head>
<body class="bg-[#16161a] text-slate-300 min-h-screen flex">
  <aside class="w-64 bg-[#1c1c20] border-r border-[#26262b] flex flex-col">
    <!-- Workspace header -->
    <div class="px-4 py-3 border-b border-[#26262b] flex items-center gap-2">
      <div class="w-7 h-7 bg-gradient-to-br from-fuchsia-500 to-rose-500 rounded text-white text-xs font-bold flex items-center justify-center">D</div>
      <span class="font-semibold text-white text-sm">Workspace</span>
      <span class="ml-auto text-slate-500 text-xs">⌘K</span>
    </div>
    <!-- Primary nav -->
    <nav class="flex-1 px-2 py-3 space-y-0.5 text-sm">
      <a class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[#26262b]">📥 Inbox <span class="ml-auto bg-rose-500 text-white text-xs px-1.5 rounded-full">3</span></a>
      <a class="flex items-center gap-2 px-2 py-1.5 rounded bg-[#2a2a30] text-white">🎯 My issues</a>
      <a class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[#26262b]">👁 Subscribed</a>
      <!-- Section header -->
      <div class="pt-4 pb-1 px-2 text-xs uppercase tracking-widest text-slate-500">Workspace</div>
      <a class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[#26262b]"><span class="w-2 h-2 bg-emerald-500 rounded-full"></span> Active projects</a>
      <a class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[#26262b]"><span class="w-2 h-2 bg-amber-500 rounded-full"></span> Roadmap</a>
      <!-- Teams with avatar squares -->
      <div class="pt-4 pb-1 px-2 text-xs uppercase tracking-widest text-slate-500">Teams</div>
      <a class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[#26262b]"><div class="w-4 h-4 bg-indigo-500 rounded text-xs text-white font-bold flex items-center justify-center">F</div> Frontend</a>
      <a class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[#26262b]"><div class="w-4 h-4 bg-emerald-500 rounded text-xs text-white font-bold flex items-center justify-center">B</div> Backend</a>
    </nav>
    <!-- Status footer -->
    <div class="px-3 py-3 border-t border-[#26262b] text-xs flex items-center justify-between">
      <span class="text-slate-500">v2.81.0</span>
      <span class="text-emerald-500">● Online</span>
    </div>
  </aside>
  <main class="flex-1 p-8">
    <h2 class="text-2xl font-bold text-white">My issues</h2>
  </main>
</body>
</html>

That’s it. One file. Open in browser. Done. 就是这样。一个文件，在浏览器中打开，搞定。

The 8 ideas to internalize

需要内化的 8 个核心概念

App-shell layout: <body class="flex"> + fixed w-64 aside + flex-1 main. Whole app lives here. 应用外壳布局：使用 <body class="flex"> 配合固定的 w-64 侧边栏和 flex-1 主内容区，整个应用都包含在其中。
Workspace header: Logo + name + ⌘K shortcut hint. Border-bottom separates from nav. 工作区页眉：Logo + 名称 + ⌘K 快捷键提示。底部边框将其与导航栏分隔开。
Primary nav rows: Icon + label + optional badge. Rounded hover background. Active = stronger background. 主要导航行：图标 + 标签 + 可选的徽章。圆角悬停背景。激活状态使用更深的背景色。
Badges: Tiny rounded-full pills with counts. ml-auto pushes them to the right. 徽章：带有数字的小型全圆角胶囊。使用 ml-auto 将其推向右侧。
Section headers: Tiny uppercase grey labels (text-xs uppercase tracking-widest) group items. Pure structure. 分区标题：微小的灰色大写标签（text-xs uppercase tracking-widest）用于对项目进行分组。纯粹的结构化设计。
Status dots: 2px colored dots signal state without words. Green = active, amber = WIP, grey = idle. 状态点：2px 的彩色圆点无需文字即可传达状态。绿色代表活跃，琥珀色代表进行中，灰色代表空闲。
Team avatars: Small colored squares with the first letter. Slack / Linear / Notion all use this. 团队头像：带有首字母的小型彩色方块。Slack、Linear 和 Notion 都在使用这种设计。
Status footer: Version + connection status. border-t + flex-row layout. Pushed to bottom via flex-1 on nav above. 状态页脚：版本号 + 连接状态。使用 border-t 和 flex-row 布局。通过上方导航栏的 flex-1 属性将其推到底部。

Read each block of the HTML above and you’re learning these 8 patterns simultaneously. Each one transfers to every modern app-shell UI. 阅读上述 HTML 的每一块代码，你就能同时掌握这 8 种模式。每一种模式都可以迁移到任何现代应用外壳 UI 中。

Try it now

现在就试试

Open the LOOK · UNDERSTAND · BUILD page: https://dev48v.infy.uk/design/day2-linear-sidebar.html 打开“查看 · 理解 · 构建”页面：https://dev48v.infy.uk/design/day2-linear-sidebar.html

LOOK — the finished sidebar in your browser, no setup 查看 — 在浏览器中查看成品侧边栏，无需任何配置
UNDERSTAND — 9 click-through steps with preview + WHY + code for each piece 理解 — 9 个点击步骤，包含预览、设计原理以及每一部分的源码
BUILD — copy the whole HTML file, save, double-click, done 构建 — 复制整个 HTML 文件，保存，双击打开，搞定

What’s next in DesignFromZero DesignFromZero 的下一步计划

Day 3: Vercel deploy log — the terminal-style streaming UI Vercel shows during a deploy. 第三天：Vercel 部署日志 —— Vercel 在部署过程中显示的终端风格流式 UI。

Series: 50 UIs in 50 days · pure HTML + Tailwind · zero build. 系列：50 天 50 个 UI · 纯 HTML + Tailwind · 零构建。 🌐 All days: https://dev48v.infy.uk/designfromzero.php 🌐 所有天数：https://dev48v.infy.uk/designfromzero.php

I Cloned Linear’s Sidebar in 50 Lines of HTML — One File, Zero npm