Skip to content

Add animations to mobile nav bar #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
m3rchant-man wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add animations to mobile nav bar #8

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2829576
Added animations to mobile nav bar
m3rchant-man Nov 12, 2025
2a2d404
Fixing parity issue with mobile/desktop discord button
m3rchant-man Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 22 additions & 11 deletions app/components/Headbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function Headbar() {
/>
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="p-2 text-stone-200 hover:text-cyan-400 transition-colors"
className="p-2 text-stone-200 transition-colors hover:text-cyan-400"
aria-label="Toggle menu"
>
<svg
Expand All @@ -82,14 +82,25 @@ export default function Headbar() {
</div>

{/* Mobile Navigation Menu */}
{mobileMenuOpen && (
<nav className="xl:hidden bg-stone-900 border-t border-stone-700">
<ul className="flex flex-col gap-2 p-4 font-bold text-sm tracking-wider text-stone-200">
<nav
id="mobile-navigation"
className={`xl:hidden flex flex-col overflow-hidden border-t border-stone-700 bg-stone-900 shadow-lg shadow-stone-950/40 transition-[max-height,opacity] duration-300 ease-out ${
mobileMenuOpen
? "pointer-events-auto max-h-96 opacity-100"
: "pointer-events-none max-h-0 opacity-0"
}`}
>
<div className="px-4 pb-4">
<ul
className={`flex flex-col gap-2 pt-4 font-bold text-sm tracking-wider text-stone-200 transition-transform duration-300 ease-out ${
mobileMenuOpen ? "translate-y-0" : "-translate-y-16"
}`}
>
<li>
<Link
href="/"
onClick={() => setMobileMenuOpen(false)}
className="block py-2 px-4 hover:bg-stone-800 rounded transition-colors"
className="block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
>
GAME*
</Link>
Expand All @@ -98,7 +109,7 @@ export default function Headbar() {
<Link
href="/patch_notes"
onClick={() => setMobileMenuOpen(false)}
className="block py-2 px-4 hover:bg-stone-800 rounded transition-colors"
className="block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
>
PATCH NOTES*
</Link>
Expand All @@ -107,26 +118,26 @@ export default function Headbar() {
<Link
href="/dev_blog"
onClick={() => setMobileMenuOpen(false)}
className="dev-blog-transition block py-2 px-4 hover:bg-stone-800 rounded transition-colors"
className="dev-blog-transition block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
>
DEV BLOG
</Link>
</li>
<li className="pt-2 border-t border-stone-700">
<li>
<a
href="https://discord.gg/f6DGjvTWYT"
target="_blank"
rel="noopener noreferrer"
onClick={() => setMobileMenuOpen(false)}
>
<button className="w-full px-4 py-2 bg-cyan-800 font-bold hover:bg-cyan-400 transition-all duration-300 hover:text-stone-800 rounded-lg">
<button className="w-full rounded-lg bg-cyan-800 px-4 py-2 font-bold transition-all duration-300 hover:bg-cyan-400 hover:text-stone-800">
DISCORD
</button>
</a>
</li>
</ul>
</nav>
)}
</div>
</nav>
</div>
);
}