Expanding Icon Navigation Rail

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="nav-487"><a href="#" class="nav-item active"><span class="icon">⚡</span><span class="text">Dashboard</span></a><a href="#" class="nav-item"><span class="icon">⚙️</span><span class="text">Settings</span></a></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.nav-487 { display: flex; flex-direction: column; gap: 8px; background: #0f172a; padding: 8px; border-radius: 14px; border: 1px solid #1e293b; font-family: system-ui, sans-serif; }
.nav-487 .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: #94a3b8; text-decoration: none; font-size: 13px; font-weight: 600; transition: all 0.3s ease; }
.nav-487 .nav-item:hover { color: #f8fafc; background: rgba(255,255,255,0.05); transform: translateX(4px); }
.nav-487 .nav-item.active { background: #0284c7; color: #fff; box-shadow: 0 0 15px rgba(2, 132, 199, 0.4); }