<div class="shell">
  <nav class="rail" id="rail" aria-label="Primary">
    <div class="rail-item active" data-section="home" tabindex="0">
      <span class="rail-icon">&#8962;</span>
      <div class="flyout">
        <p class="flyout-title">Home</p>
        <a href="#" class="flyout-link">Overview</a>
        <a href="#" class="flyout-link">Recent activity</a>
        <a href="#" class="flyout-link">Shortcuts</a>
      </div>
    </div>
    <div class="rail-item" data-section="projects" tabindex="0">
      <span class="rail-icon">&#9635;</span>
      <div class="flyout">
        <p class="flyout-title">Projects</p>
        <a href="#" class="flyout-link">All projects</a>
        <a href="#" class="flyout-link">Templates</a>
        <a href="#" class="flyout-link">Archived</a>
        <a href="#" class="flyout-link">Shared with me</a>
      </div>
    </div>
    <div class="rail-item" data-section="team" tabindex="0">
      <span class="rail-icon">&#9782;</span>
      <div class="flyout">
        <p class="flyout-title">Team</p>
        <a href="#" class="flyout-link">Members</a>
        <a href="#" class="flyout-link">Roles &amp; access</a>
        <a href="#" class="flyout-link">Invitations</a>
      </div>
    </div>
    <div class="rail-item" data-section="reports" tabindex="0">
      <span class="rail-icon">&#8801;</span>
      <div class="flyout">
        <p class="flyout-title">Reports</p>
        <a href="#" class="flyout-link">Usage</a>
        <a href="#" class="flyout-link">Billing</a>
        <a href="#" class="flyout-link">Exports</a>
      </div>
    </div>
    <div class="rail-spacer"></div>
    <div class="rail-item" data-section="settings" tabindex="0">
      <span class="rail-icon">&#9881;</span>
      <div class="flyout flyout-bottom">
        <p class="flyout-title">Settings</p>
        <a href="#" class="flyout-link">Preferences</a>
        <a href="#" class="flyout-link">Notifications</a>
        <a href="#" class="flyout-link">Integrations</a>
      </div>
    </div>
  </nav>
  <main class="content">
    <h2 id="content-title">Home</h2>
    <p>Hover or focus a rail icon to reveal its submenu. Click a submenu link, or a rail icon itself, to set the active section.</p>
  </main>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f1f5f9; min-height: 100vh; }

.shell { display: flex; min-height: 100vh; }

.rail {
  width: 64px; flex-shrink: 0;
  background: #1e293b; padding: 16px 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rail-spacer { flex: 1; }

.rail-item {
  position: relative; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; outline: none;
}
.rail-icon { font-size: 19px; color: #94a3b8; transition: color 0.15s; }
.rail-item:hover .rail-icon, .rail-item:focus-visible .rail-icon { color: #f1f5f9; }
.rail-item.active { background: rgba(99,102,241,0.16); }
.rail-item.active .rail-icon { color: #a5b4fc; }
.rail-item:focus-visible { box-shadow: 0 0 0 2px #6366f1; }

.flyout {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-6px);
  min-width: 190px; background: #fff; border-radius: 12px; padding: 10px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.25);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 20;
}
.rail-item:hover .flyout, .rail-item:focus-within .flyout {
  opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(-50%) translateX(0);
}
.flyout.flyout-bottom { top: auto; bottom: 0; transform: translateX(-6px); }
.rail-item:hover .flyout.flyout-bottom, .rail-item:focus-within .flyout.flyout-bottom { transform: translateX(0); }

.flyout-title { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; padding: 4px 10px 8px; }
.flyout-link {
  display: block; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #334155; text-decoration: none;
}
.flyout-link:hover { background: #f1f5f9; color: #6366f1; }

.content { flex: 1; padding: 40px; }
.content h2 { font-size: 20px; font-weight: 800; color: #1e293b; margin-bottom: 8px; }
.content p { font-size: 13.5px; color: #64748b; max-width: 420px; line-height: 1.6; }

const items = document.querySelectorAll('.rail-item');
const titleEl = document.getElementById('content-title');

function setActive(item) {
  items.forEach(i => i.classList.remove('active'));
  item.classList.add('active');
  const section = item.dataset.section;
  const label = item.querySelector('.flyout-title').textContent;
  titleEl.textContent = label;
}

items.forEach(item => {
  item.addEventListener('click', e => {
    if (e.target.classList.contains('flyout-link')) return;
    setActive(item);
  });

  item.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      setActive(item);
    }
  });

  item.querySelectorAll('.flyout-link').forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault();
      setActive(item);
      titleEl.textContent = item.querySelector('.flyout-title').textContent + ' \u2013 ' + link.textContent;
    });
  });
});