Any reason for the { children } being above the component? Please look at the attached code & image.Layout File:import './globals.css' import { Navbar } from '@/components' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }Navbar File:import Image from "next/image" import Link from "next/link" import { Rubik } from "next/font/google" import SearchBar from "./SearchBar" import CustomBtn from "./CustomBtn" const RubikFont = Rubik({ subsets: ['latin']}) const Navbar = () => { return ( ) } export default Navbar

Need help with positioning of elements

Answered

Abert's Towhee posted this in #help-forum

Abert's TowheeOP

2023-07-15T18:52:01.000Z

Any reason for the { children } being above the <Navbar /> component? Please look at the attached code & image.

Layout File:

import './globals.css'
import { Navbar } from '@/components'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
        </body>
    </html>
  )
}

Navbar File:

import Image from "next/image"
import Link from "next/link"
import { Rubik } from "next/font/google"
import SearchBar from "./SearchBar"
import CustomBtn from "./CustomBtn"

const RubikFont = Rubik({ subsets: ['latin']})

const Navbar = () => {
  return (
    <header className="w-full absolute z-10">
      <nav className={`bg-[#1A1A1A] max-w-[1440px] mx-auto w-full flex flex-col sm:flex-row justify-between items-center px-16 py-4 text-white ${RubikFont.className}
      `}>
        <div className="flex items-center space-x-4">
          <Link href="/">
            <span>
              <Image src="/logo.svg" width={140} height={40} alt="logo" />
            </span>
          </Link>
        </div>
        <div>
          <ul className="flex items-center space-x-8">
            <li>
              <SearchBar />
            </li>
            <li>
              <Link href="/login">
                <CustomBtn />
              </Link>
            </li>
          </ul>
        </div>
      </nav>
    </header>
  )
}

export default Navbar