10 CSS Sidebar Navigation Designs10 / 10

Pure CSSMIT licensed

App-Style Vertical Sidebar Menu with Bottom-Pinned Profile

How to push a menu item to the bottom of a CSS sidebar — a sidebar layout with the profile section at the bottom, demonstrated by a Pulse project-management workspace. The workspace switcher sits at the top, a scrollable nav fills the middle with counts and status dots, and the profile is pinned to the bottom using margin-top: auto, with quick-action icons, online indicator, and a kebab menu. Dark Linear-style UI with Geist + Geist Mono and yellow / violet accents. Collapses to icons on mobile. Best for productivity tools, PM apps, internal dashboards, team workspaces where identity and quick actions need permanent placement.

Published

Live Demo
Try it

The code

<section class="sn-pin" aria-label="App-style sidebar with bottom-pinned profile demo">
  <aside class="sidebar" aria-label="Workspace navigation">
    <div class="ws" role="button" tabindex="0">
      <div class="ic" aria-hidden="true">P</div>
      <div><b>Pulse Team</b><small>Free plan</small></div>
      <span class="ch" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 9l4-4 4 4M16 15l-4 4-4-4"/></svg></span>
    </div>
    <nav class="nav">
      <div class="cap">Workspace</div>
      <a class="item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg><span>Board</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg><span>Tasks</span><span class="count">24</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>Calendar</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg><span>Docs</span></a>
      <div class="cap">Channels</div>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span>Messages</span><span class="dot" aria-label="Unread"></span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span>Activity</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2M16 3.13a4 4 0 010 7.75"/></svg><span>Members</span></a>
    </nav>
    <div class="profile-wrap">
      <div class="quick">
        <a href="#" title="Search" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg></a>
        <a href="#" title="Notifications" aria-label="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></a>
        <a href="#" title="Settings" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg></a>
      </div>
      <div class="profile" role="button" tabindex="0">
        <div class="avatar" aria-hidden="true"></div>
        <div><b>Jordan Reye</b><small>jordan@pulse.io</small></div>
        <span class="more" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></span>
      </div>
    </div>
  </aside>

  <main class="mainpane">
    <div class="head">
      <h1>Sprint Board</h1>
      <button class="new" type="button">+ New task</button>
    </div>
    <div class="board">
      <div class="col">
        <div class="ct"><i class="grey" aria-hidden="true"></i>To Do</div>
        <div class="task">Audit onboarding flow<small>Due Fri · Sam</small></div>
        <div class="task">Draft Q3 roadmap<small>No date</small></div>
      </div>
      <div class="col">
        <div class="ct"><i class="yellow" aria-hidden="true"></i>In Progress</div>
        <div class="task">Sidebar redesign<small>Due today · You</small></div>
      </div>
      <div class="col">
        <div class="ct"><i class="green" aria-hidden="true"></i>Done</div>
        <div class="task">Set up CI pipeline<small>Yesterday</small></div>
      </div>
    </div>
  </main>
</section>
/* ─── 10 App Sidebar with Bottom-Pinned Profile — PM workspace ── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

.sn-pin {
  --sn-pin-bg: #0c0c0f;
  --sn-pin-rail: #131318;
  --sn-pin-rail-2: #1c1c24;
  --sn-pin-line: #26262f;
  --sn-pin-txt: #ededf2;
  --sn-pin-muted: #85858f;
  --sn-pin-accent: #f5d90a;
  --sn-pin-accent-2: #a78bfa;
  --sn-pin-green: #4ade80;
  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Geist', 'Inter', sans-serif;
  background: var(--sn-pin-bg);
  color: var(--sn-pin-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}

.sn-pin *,
.sn-pin *::before,
.sn-pin *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sn-pin .sidebar {
  width: 256px;
  background: var(--sn-pin-rail);
  border-right: 1px solid var(--sn-pin-line);
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sn-pin .ws {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.1rem;
  margin: .6rem;
  border-radius: 12px;
  background: var(--sn-pin-rail-2);
  cursor: pointer;
  transition: .18s;
}

.sn-pin .ws:hover {
  background: #23232c;
}

.sn-pin .ws .ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--sn-pin-accent), var(--sn-pin-accent-2));
  display: grid;
  place-items: center;
  color: #0c0c0f;
  font-weight: 700;
}

.sn-pin .ws b {
  font-size: .92rem;
  font-weight: 600;
}

.sn-pin .ws small {
  display: block;
  color: var(--sn-pin-muted);
  font-size: .72rem;
}

.sn-pin .ws .ch {
  margin-left: auto;
  color: var(--sn-pin-muted);
}

.sn-pin .ws .ch svg {
  width: 16px;
  height: 16px;
}

.sn-pin .nav {
  flex: 1;
  overflow-y: auto;
  padding: .5rem .7rem;
}

.sn-pin .cap {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sn-pin-muted);
  font-weight: 600;
  padding: .9rem .8rem .35rem;
  font-family: 'Geist Mono', monospace;
}

.sn-pin .item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .8rem;
  border-radius: 10px;
  color: var(--sn-pin-txt);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: .16s;
}

.sn-pin .item svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
  color: var(--sn-pin-muted);
  flex-shrink: 0;
}

.sn-pin .item:hover {
  background: var(--sn-pin-rail-2);
}

.sn-pin .item:hover svg {
  color: var(--sn-pin-txt);
}

.sn-pin .item.active {
  background: var(--sn-pin-rail-2);
  color: #fff;
}

.sn-pin .item.active svg {
  color: var(--sn-pin-accent);
}

.sn-pin .item .count {
  margin-left: auto;
  font-size: .72rem;
  color: var(--sn-pin-muted);
  font-family: 'Geist Mono', monospace;
}

.sn-pin .item .dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sn-pin-green);
}

.sn-pin .profile-wrap {
  margin-top: auto;
  border-top: 1px solid var(--sn-pin-line);
  padding: .7rem;
}

.sn-pin .quick {
  display: flex;
  gap: .4rem;
  margin-bottom: .5rem;
}

.sn-pin .quick a {
  flex: 1;
  display: grid;
  place-items: center;
  padding: .55rem;
  border-radius: 9px;
  color: var(--sn-pin-muted);
  transition: .16s;
}

.sn-pin .quick a:hover {
  background: var(--sn-pin-rail-2);
  color: var(--sn-pin-txt);
}

.sn-pin .quick svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.sn-pin .profile {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem;
  border-radius: 12px;
  cursor: pointer;
  transition: .18s;
}

.sn-pin .profile:hover {
  background: var(--sn-pin-rail-2);
}

.sn-pin .avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4ade80, #a78bfa);
  position: relative;
}

.sn-pin .avatar::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sn-pin-green);
  border: 2.5px solid var(--sn-pin-rail);
}

.sn-pin .profile b {
  font-size: .88rem;
  font-weight: 600;
}

.sn-pin .profile small {
  display: block;
  color: var(--sn-pin-muted);
  font-size: .72rem;
}

.sn-pin .profile .more {
  margin-left: auto;
  color: var(--sn-pin-muted);
}

.sn-pin .profile .more svg {
  width: 16px;
  height: 16px;
}

.sn-pin .mainpane {
  flex: 1;
  padding: 2.5rem 3rem;
  min-width: 0;
  overflow-y: auto;
}

.sn-pin .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}

.sn-pin .head h1 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.03em;
}

.sn-pin .head .new {
  background: var(--sn-pin-accent);
  color: #0c0c0f;
  border: none;
  border-radius: 10px;
  padding: .6rem 1.1rem;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
}

.sn-pin .board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.sn-pin .col {
  background: var(--sn-pin-rail);
  border: 1px solid var(--sn-pin-line);
  border-radius: 16px;
  padding: 1rem;
}

.sn-pin .col .ct {
  font-size: .8rem;
  color: var(--sn-pin-muted);
  font-weight: 600;
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Geist Mono', monospace;
}

.sn-pin .col .ct i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.sn-pin .col .ct i.grey {
  background: #85858f;
}

.sn-pin .col .ct i.yellow {
  background: #f5d90a;
}

.sn-pin .col .ct i.green {
  background: #4ade80;
}

.sn-pin .task {
  background: var(--sn-pin-rail-2);
  border-radius: 11px;
  padding: .85rem;
  margin-bottom: .6rem;
  font-size: .85rem;
}

.sn-pin .task small {
  display: block;
  color: var(--sn-pin-muted);
  font-size: .74rem;
  margin-top: .4rem;
}

@media (max-width: 780px) {
  .sn-pin .sidebar {
    width: 74px;
  }

  .sn-pin .ws b,
    .sn-pin .ws small,
    .sn-pin .ws .ch,
    .sn-pin .cap,
    .sn-pin .item span,
    .sn-pin .item .count,
    .sn-pin .item .dot,
    .sn-pin .profile b,
    .sn-pin .profile small,
    .sn-pin .profile .more {
    display: none;
  }

  .sn-pin .ws {
    justify-content: center;
    padding: .7rem;
  }

  .sn-pin .item {
    justify-content: center;
    padding: .65rem;
  }

  .sn-pin .profile {
    justify-content: center;
  }

  .sn-pin .quick {
    flex-direction: column;
  }

  .sn-pin .mainpane {
    padding: 1.5rem;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Sidebar Navigation Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: App-Style Vertical Sidebar Menu with Bottom-Pinned Profile
Source: https://codefronts.com/navigation/css-sidebar-navigation/app-style-vertical-sidebar-menu-with-bottom-pinned-profile/

How to push a menu item to the bottom of a CSS sidebar — a sidebar layout with the profile section at the bottom, demonstrated by a Pulse project-management workspace. The workspace switcher sits at the top, a scrollable nav fills the middle with counts and status dots, and the profile is pinned to the bottom using margin-top: auto, with quick-action icons, online indicator, and a kebab menu. Dark Linear-style UI with Geist + Geist Mono and yellow / violet accents. Collapses to icons on mobile. Best for productivity tools, PM apps, internal dashboards, team workspaces where identity and quick actions need permanent placement.
## HTML
```html
<section class="sn-pin" aria-label="App-style sidebar with bottom-pinned profile demo">
  <aside class="sidebar" aria-label="Workspace navigation">
    <div class="ws" role="button" tabindex="0">
      <div class="ic" aria-hidden="true">P</div>
      <div><b>Pulse Team</b><small>Free plan</small></div>
      <span class="ch" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 9l4-4 4 4M16 15l-4 4-4-4"/></svg></span>
    </div>
    <nav class="nav">
      <div class="cap">Workspace</div>
      <a class="item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg><span>Board</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg><span>Tasks</span><span class="count">24</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>Calendar</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg><span>Docs</span></a>
      <div class="cap">Channels</div>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span>Messages</span><span class="dot" aria-label="Unread"></span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span>Activity</span></a>
      <a class="item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2M16 3.13a4 4 0 010 7.75"/></svg><span>Members</span></a>
    </nav>
    <div class="profile-wrap">
      <div class="quick">
        <a href="#" title="Search" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg></a>
        <a href="#" title="Notifications" aria-label="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></a>
        <a href="#" title="Settings" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.17V21a2 2 0 01-4 0v-.09A1.65 1.65 0 007 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 14H4.5a2 2 0 010-4h.09A1.65 1.65 0 006 8.6"/></svg></a>
      </div>
      <div class="profile" role="button" tabindex="0">
        <div class="avatar" aria-hidden="true"></div>
        <div><b>Jordan Reye</b><small>jordan@pulse.io</small></div>
        <span class="more" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></span>
      </div>
    </div>
  </aside>

  <main class="mainpane">
    <div class="head">
      <h1>Sprint Board</h1>
      <button class="new" type="button">+ New task</button>
    </div>
    <div class="board">
      <div class="col">
        <div class="ct"><i class="grey" aria-hidden="true"></i>To Do</div>
        <div class="task">Audit onboarding flow<small>Due Fri · Sam</small></div>
        <div class="task">Draft Q3 roadmap<small>No date</small></div>
      </div>
      <div class="col">
        <div class="ct"><i class="yellow" aria-hidden="true"></i>In Progress</div>
        <div class="task">Sidebar redesign<small>Due today · You</small></div>
      </div>
      <div class="col">
        <div class="ct"><i class="green" aria-hidden="true"></i>Done</div>
        <div class="task">Set up CI pipeline<small>Yesterday</small></div>
      </div>
    </div>
  </main>
</section>
```
## CSS
```css
/* ─── 10 App Sidebar with Bottom-Pinned Profile — PM workspace ── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

.sn-pin {
  --sn-pin-bg: #0c0c0f;
  --sn-pin-rail: #131318;
  --sn-pin-rail-2: #1c1c24;
  --sn-pin-line: #26262f;
  --sn-pin-txt: #ededf2;
  --sn-pin-muted: #85858f;
  --sn-pin-accent: #f5d90a;
  --sn-pin-accent-2: #a78bfa;
  --sn-pin-green: #4ade80;
  position: relative;
  width: 100%;
  height: 600px;
  font-family: 'Geist', 'Inter', sans-serif;
  background: var(--sn-pin-bg);
  color: var(--sn-pin-txt);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}

.sn-pin *,
.sn-pin *::before,
.sn-pin *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sn-pin .sidebar {
  width: 256px;
  background: var(--sn-pin-rail);
  border-right: 1px solid var(--sn-pin-line);
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sn-pin .ws {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.1rem;
  margin: .6rem;
  border-radius: 12px;
  background: var(--sn-pin-rail-2);
  cursor: pointer;
  transition: .18s;
}

.sn-pin .ws:hover {
  background: #23232c;
}

.sn-pin .ws .ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--sn-pin-accent), var(--sn-pin-accent-2));
  display: grid;
  place-items: center;
  color: #0c0c0f;
  font-weight: 700;
}

.sn-pin .ws b {
  font-size: .92rem;
  font-weight: 600;
}

.sn-pin .ws small {
  display: block;
  color: var(--sn-pin-muted);
  font-size: .72rem;
}

.sn-pin .ws .ch {
  margin-left: auto;
  color: var(--sn-pin-muted);
}

.sn-pin .ws .ch svg {
  width: 16px;
  height: 16px;
}

.sn-pin .nav {
  flex: 1;
  overflow-y: auto;
  padding: .5rem .7rem;
}

.sn-pin .cap {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sn-pin-muted);
  font-weight: 600;
  padding: .9rem .8rem .35rem;
  font-family: 'Geist Mono', monospace;
}

.sn-pin .item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .8rem;
  border-radius: 10px;
  color: var(--sn-pin-txt);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: .16s;
}

.sn-pin .item svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
  color: var(--sn-pin-muted);
  flex-shrink: 0;
}

.sn-pin .item:hover {
  background: var(--sn-pin-rail-2);
}

.sn-pin .item:hover svg {
  color: var(--sn-pin-txt);
}

.sn-pin .item.active {
  background: var(--sn-pin-rail-2);
  color: #fff;
}

.sn-pin .item.active svg {
  color: var(--sn-pin-accent);
}

.sn-pin .item .count {
  margin-left: auto;
  font-size: .72rem;
  color: var(--sn-pin-muted);
  font-family: 'Geist Mono', monospace;
}

.sn-pin .item .dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sn-pin-green);
}

.sn-pin .profile-wrap {
  margin-top: auto;
  border-top: 1px solid var(--sn-pin-line);
  padding: .7rem;
}

.sn-pin .quick {
  display: flex;
  gap: .4rem;
  margin-bottom: .5rem;
}

.sn-pin .quick a {
  flex: 1;
  display: grid;
  place-items: center;
  padding: .55rem;
  border-radius: 9px;
  color: var(--sn-pin-muted);
  transition: .16s;
}

.sn-pin .quick a:hover {
  background: var(--sn-pin-rail-2);
  color: var(--sn-pin-txt);
}

.sn-pin .quick svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.sn-pin .profile {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem;
  border-radius: 12px;
  cursor: pointer;
  transition: .18s;
}

.sn-pin .profile:hover {
  background: var(--sn-pin-rail-2);
}

.sn-pin .avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4ade80, #a78bfa);
  position: relative;
}

.sn-pin .avatar::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sn-pin-green);
  border: 2.5px solid var(--sn-pin-rail);
}

.sn-pin .profile b {
  font-size: .88rem;
  font-weight: 600;
}

.sn-pin .profile small {
  display: block;
  color: var(--sn-pin-muted);
  font-size: .72rem;
}

.sn-pin .profile .more {
  margin-left: auto;
  color: var(--sn-pin-muted);
}

.sn-pin .profile .more svg {
  width: 16px;
  height: 16px;
}

.sn-pin .mainpane {
  flex: 1;
  padding: 2.5rem 3rem;
  min-width: 0;
  overflow-y: auto;
}

.sn-pin .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}

.sn-pin .head h1 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.03em;
}

.sn-pin .head .new {
  background: var(--sn-pin-accent);
  color: #0c0c0f;
  border: none;
  border-radius: 10px;
  padding: .6rem 1.1rem;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
}

.sn-pin .board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.sn-pin .col {
  background: var(--sn-pin-rail);
  border: 1px solid var(--sn-pin-line);
  border-radius: 16px;
  padding: 1rem;
}

.sn-pin .col .ct {
  font-size: .8rem;
  color: var(--sn-pin-muted);
  font-weight: 600;
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Geist Mono', monospace;
}

.sn-pin .col .ct i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.sn-pin .col .ct i.grey {
  background: #85858f;
}

.sn-pin .col .ct i.yellow {
  background: #f5d90a;
}

.sn-pin .col .ct i.green {
  background: #4ade80;
}

.sn-pin .task {
  background: var(--sn-pin-rail-2);
  border-radius: 11px;
  padding: .85rem;
  margin-bottom: .6rem;
  font-size: .85rem;
}

.sn-pin .task small {
  display: block;
  color: var(--sn-pin-muted);
  font-size: .74rem;
  margin-top: .4rem;
}

@media (max-width: 780px) {
  .sn-pin .sidebar {
    width: 74px;
  }

  .sn-pin .ws b,
    .sn-pin .ws small,
    .sn-pin .ws .ch,
    .sn-pin .cap,
    .sn-pin .item span,
    .sn-pin .item .count,
    .sn-pin .item .dot,
    .sn-pin .profile b,
    .sn-pin .profile small,
    .sn-pin .profile .more {
    display: none;
  }

  .sn-pin .ws {
    justify-content: center;
    padding: .7rem;
  }

  .sn-pin .item {
    justify-content: center;
    padding: .65rem;
  }

  .sn-pin .profile {
    justify-content: center;
  }

  .sn-pin .quick {
    flex-direction: column;
  }

  .sn-pin .mainpane {
    padding: 1.5rem;
  }
}
```

Techniques used in this demo

tabindexMDN ↗role="" (ARIA)MDN ↗grid-templateMDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →