Dockside navigation

<section><span class="eyebrow">A PLACE FOR EVERYTHING</span><h1 id="view-title">Your workspace.</h1><p>A calmer way to find your way.</p><nav aria-label="Demo workspace"><button class="active" aria-current="page" data-title="Your workspace."><b>⌂</b><span>Home</span></button><button data-title="Find your next spark."><b>⌕</b><span>Explore</span></button><button data-title="Ideas worth keeping."><b>◇</b><span>Collection</span></button><button data-title="Make it feel like you."><b>⚙</b><span>Settings</span></button></nav></section>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{background:#0d1426}section{text-align:center;max-width:100%}.eyebrow{font-size:8px;letter-spacing:3px;color:#7d8db0}h1{font-size:33px;letter-spacing:-1.4px;margin:22px 0 11px;font-weight:500}p{font-size:11px;color:#7789a9}nav{display:flex;margin-top:45px;padding:9px;gap:8px;background:#172036;border:1px solid #2d3b59;border-radius:16px;box-shadow:0 12px 35px #0003}button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:82px;height:66px;background:none;border:1px solid transparent;border-radius:10px;color:#7f91b4}button b{font-size:24px;font-weight:400}button span{font-size:8px}.active{background:#7c8cff18;color:#a9b6ff;border-color:#8291f52b}button:hover{background:#ffffff06}@media(max-width:400px){nav{gap:3px;padding:6px}button{width:62px}h1{font-size:28px}}

document.querySelectorAll("nav button").forEach(button=>button.addEventListener("click",()=>{document.querySelectorAll("nav button").forEach(b=>{b.classList.remove("active");b.removeAttribute("aria-current")});button.classList.add("active");button.setAttribute("aria-current","page");document.getElementById("view-title").textContent=button.dataset.title}));