Next.js Discord

Discord Forum

Page transition

Unanswered
Holland Lop posted this in #help-forum
Open in Discord
Holland LopOP
Is there a way to animate this button to the right and go to a different page at the same time?

import Link from "next/link";

export default function AuthNavMenu({ selected }: { selected: "sign-in" | "sign-up" }) {
    return (
        <div className="custom-bg-card rounded-lg flex items-center p-1 custom-border-highlight mb-10 text-center">
            <Link href="/auth/signin"
                className={`w-full font-medium rounded-lg py-2 ${selected === "sign-in" && "custom-bg-selected custom-text-selected"}`}>
                Sign In
            </Link>
            <Link href="/auth/signup"
                className={`w-full font-medium rounded-lg py-2 ${selected === "sign-up" && "custom-bg-selected custom-text-selected"}`}>
                Sign Up
            </Link>
        </div>
    );
}

1 Reply

You can put the menu into your layout, so it won't be unmounted when navigating between pages