Next.js Discord

Discord Forum

Transision between routes

Unanswered
Western harvester ant posted this in #help-forum
Open in Discord
Western harvester antOP
Hello, i'm trying to transition between routes in app router.
i'm new to app router, so ig i have alot of mistakes there.

5 Replies

Western harvester antOP
this is my root layout
export default function RootLayout ({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang='en'>
      <body id='__phoenixclient'>
        <main
          dir='rtl'
          className={`flex ${fontStyles.danaFont_multi} h-full w-screen select-none flex-col`}
        >
          <Image
            src={'/login_background.png'}
            width={400}
            height={200}
            alt='login_background'
            className='bg-back absolute z-10 h-screen w-screen select-none object-cover brightness-[0.25]'
          />
          <div className='z-30 flex h-screen w-full select-none flex-col items-center justify-center text-white'>
            <div className=' bg-bg/60 w-[95%] max-w-[500px] rounded-3xl p-10 backdrop-blur-xl duration-500'>
              {children}
            </div>
          </div>
        </main>
      </body>
    </html>
  )
}
Register page
const Register = () => {
  return (
    <>
      <h1>Test</h1>
    </>
  )
}

export default Register;
Login page
const Login = () => {
  return (
    <>
      <Form />
    </>
  )
}

export default (Login)
while changing the route from Login->Register, i want the
/* layout.tsx */
<div className=' bg-bg/60 w-[95%] max-w-[500px] rounded-3xl p-10 backdrop-blur-xl duration-500'>
to change it's size with a css transition
Western harvester antOP
no answers ? 😢