Add floating quick-links menu to nav bar with toggle (HTML/CSS/JS)

[arayaryoma]

Motivation

• Provide quick access to external destinations from the site nav by adding a compact floating quick-links menu.
• Integrate a keyboard / screen-reader friendly toggle for the quick-links to improve accessibility and mobile UX.
• Tidy up minor HTML and configuration formatting while adding the new feature.

Description

• Added a floating quick-links widget into the nav-bar template in www.araya.dev/index.html, replacing the standalone icon with a toggle button and a list of external links (Blog, Playground, GitHub, Twitter).
• Implemented visual styles and show/hide animation for the widget in www.araya.dev/webcomponents/nav-bar/nav-bar.css including positioning, staggered transition delays, and open-state styling (.quick-links, .quick-links-list, .quick-links-item, .quick-links.is-open).
• Added toggle behavior in www.araya.dev/webcomponents/nav-bar/nav-bar.js that updates aria-expanded and aria-label and toggles the .is-open state on click.
• Minor HTML adjustments including normalizing the document type declaration in www.araya.dev/index.html and small formatting changes to conf/nginx/share/www.conf.

Testing

• No automated tests were executed for this change.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
araya-dev	Ready	Preview, Comment	Apr 20, 2026 9:07am
blog-araya-dev	Ready	Preview, Comment	Apr 20, 2026 9:07am