Skip to content

feat(web): navbar auto-hide + responsif, blok install lebih flat - #111

Merged
itsflaid merged 1 commit into
mainfrom
fix/web-navbar-autohide
Oct 19, 2026
Merged

itsflaid merged 1 commit into
mainfrom
fix/web-navbar-autohide

Conversation

@itsflaid

Copy link
Copy Markdown
Owner

Ringkasan

Navbar

  • Sticky + auto-hide: scroll turun → keluar, scroll naik sedikit (≥3px) → langsung muncul. Selalu muncul di dekat atas halaman (<96px) dan tidak pernah hilang selama menu mobile terbuka.
  • Mobile (≤40rem): tombol menu 44px + panel link besar. Tutup lewat klik link, Escape, tap di luar, atau resize ke desktop.
  • Sidebar docs, TOC mobile, dan judul "Commands" turun di bawah navbar hanya saat navbar tampil (--sticky-offset), jadi tidak bertabrakan.
  • Anchor (#commands, heading docs) mendarat di bawah navbar.
  • Bug lama ikut diperbaiki: TOC "Contents" di docs mobile tidak pernah sticky karena wrapper-nya box sendiri; sekarang display: contents di bawah 760px.
  • prefers-reduced-motion mematikan transisi; tanpa JS navbar tetap tampil (sticky biasa).

Blok install (npm i -g … + Copy)

  • Kotak outline + tombol hitam diganti satu baris teks di atas garis; seluruh baris bisa diklik untuk copy, ikon copy → centang saat berhasil, garis jadi biru saat hover/fokus.
  • Catatan hero: "No account or API key to analyze" → "An API key is optional and only adds the AI layer."

Verifikasi

  • pnpm build:web hijau, astro check 0 error / 0 warning.
  • Playwright (Chromium): hide/show di 1440 & 390, menu mobile (buka, Escape, tap luar, klik link, resize), offset sticky docs/commands saat navbar tampil vs tersembunyi, anchor tidak tertutup navbar/TOC, tanpa overflow horizontal di 320/360/390/768/1024/1440 (home + docs), clipboard berisi command yang benar.

Generated by Claude Code

Header
- Sticky bar that slides out on scroll down and comes back on the first
  small scroll up (and always near the top). Never hides while the mobile
  menu is open. Respects prefers-reduced-motion; stays visible without JS.
- Phones get a menu button (44px target) with a stacked link panel that
  closes on link click, Escape, outside tap and resize to desktop.
- Sticky sidebar, mobile contents bar and the Commands title now sit below
  the header only while it is showing (--sticky-offset).
- Anchors land below the header (scroll-padding / scroll-margin).
- Fix: the mobile docs contents bar never stuck because its wrapper was a
  box of its own; the wrapper now uses display: contents below 760px.

Install command
- Replace the outlined box + black button with a single line of type on a
  rule; the whole row is the copy target, with a copy/check icon.
- Hero note: the API key is optional and only adds the AI layer, instead of
  "No account or API key".

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019HJc4sv9pSLh7vhduSUxBE
@vercel

vercel Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
devmap-web Ready Ready Preview Oct 19, 2026 3:16am UTC

@github-actions

Copy link
Copy Markdown

✅ Welcome ke DevMap!

Terima kasih sudah buat PR. Pastikan checklist ini terpenuhi sebelum review:

  • devmap doctor lolos (tanpa error)
  • Test pnpm test:cli lolos (semua pass)
  • New commands diupdate di docs/commands.md
  • Tidak ada console.log di command files
  • Registry terms sesuai standar (baca docs/guide/05-signal-registry.md)
  • Code style match dengan CONTRIBUTING.md

CI akan jalan otomatis pada setiap update. Kalau gagal, akan muncul link run di komentar ini.

Kalau DevMap membantu, tolong star ya: https://github.com/itsflaid/devmap

Terima kasih kontribusinya! 🙏

@itsflaid
itsflaid merged commit d14dff8 into main Oct 19, 2026
3 checks passed
@itsflaid
itsflaid deleted the fix/web-navbar-autohide branch October 19, 2026 03:17

This branch was successfully deployed

1 active deployment
Preview — 30e893fa Deployed Oct 19, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants