Skip to content

feat: mobile menu slide animation - #5

Open
Abderraouf-yt wants to merge 1 commit into
ZakyTm:developfrom
Abderraouf-yt:feat/mobile-menu-animation
Open

feat: mobile menu slide animation#5
Abderraouf-yt wants to merge 1 commit into
ZakyTm:developfrom
Abderraouf-yt:feat/mobile-menu-animation

Conversation

@Abderraouf-yt

Copy link
Copy Markdown

Replaces the instant hidden class toggle on the mobile nav with a smooth CSS transition:

  • Slide-down animation via max-height + opacity CSS transition (300ms ease-out)
  • Uses scrollHeight for accurate height, with a ResizeObserver fallback for content changes
  • aria-expanded attribute on the hamburger button for accessibility
  • No JS animation libraries, no extra DOM — pure CSS + ~10 lines of JS

File changed: src/components/layout/Header.astro

- Replace instant hidden toggle with max-height + opacity transition
- Use scrollHeight for dynamic height calculation
- ResizeObserver keeps max-height in sync if nav content changes
- aria-expanded attribute for accessibility
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant