mfrancois3k/layout.js

## layout.js
import './globals.css'
import NavBar from "../app/components/navbar";


export const metadata = {
  title: 'Create Next App',
  description: 'Gennerated by create next app',
}

export default function RootLayout({
  children,
}) {
  return (
    <html lang="en">
      <body className="bg-gradient-to-tr overflow-x-hidden min-w-screen from-zinc-950 via-stone-900 to-neutral-950 flex min-h-screen flex-col items-center justify-between">
        <main className="p-4 py-24 gap-6 w-full lg:w-[55%]">
          <section className="w-full flex gap-4 justify-start mb-6 p-2">
            <div>
              <img
                src="https://avatars.githubusercontent.com/u/68690233?s=100&v=4"
                alt="avatar"
                className="w-12 h-12 rounded-full shadow-lg grayscale hover:grayscale-0 duration-300"
              />
            </div>
            <div className="flex flex-col gap-2 justify-center">
              <h2 className="mb-0 text-zinc-100 font-bold">Ashish</h2>
              <p className="mb-0 text-zinc-400 font-semibold leading-none">
                Student • Dev • Ailurophile
              </p>
            </div>
          </section>
          <NavBar />
          {children}
        </main>
      </body>
    </html>
  );
}

## react navbar
 "use client";

import { usePathname } from "next/navigation";
import Link from "next/link";

const navItems = [
    {
        path: '/',
        name: 'Home',
    },
    {
        path: '/now',
        name: 'Now',
    },
    {
        path: '/guessbook',
        name: 'Guessbook',
    },
    {
        path: '/writing',
        name: 'Writing',
    },
]

export default function NavBar(){
    let pathname = usePathname() || '/';

    return (
        <div className="border border-stone-800/90 p-[0.4rem] rounded-lg mb-12 sticky top-4 z-[100] bg-stone-900/80 backdrop-blur-md">
          <nav className="flex gap-2 relative justify-start w-full z-[100]  rounded-lg">
            {navItems.map((item, index) => {
              const isActive = item.path === pathname;

              return (
                <Link
                  key={item.path}
                  className={`px-4 py-2 rounded-md text-sm lg:text-base relative no-underline duration-300 ease-in ${
                    isActive ? "text-zinc-100" : "text-zinc-400"
                  }`}
                  href={item.path}
                >
                  <span>{item.name}</span>
                </Link>
              );
            })}
          </nav>
        </div>
      );
    }
	import './globals.css'
	import NavBar from "../app/components/navbar";


	export const metadata = {
	title: 'Create Next App',
	description: 'Gennerated by create next app',
	}

	export default function RootLayout({
	children,
	}) {
	return (
	<html lang="en">
	<body className="bg-gradient-to-tr overflow-x-hidden min-w-screen from-zinc-950 via-stone-900 to-neutral-950 flex min-h-screen flex-col items-center justify-between">
	<main className="p-4 py-24 gap-6 w-full lg:w-[55%]">
	<section className="w-full flex gap-4 justify-start mb-6 p-2">
	<div>
	<img
	src="https://avatars.githubusercontent.com/u/68690233?s=100&v=4"
	alt="avatar"
	className="w-12 h-12 rounded-full shadow-lg grayscale hover:grayscale-0 duration-300"
	/>
	</div>
	<div className="flex flex-col gap-2 justify-center">
	<h2 className="mb-0 text-zinc-100 font-bold">Ashish</h2>
	<p className="mb-0 text-zinc-400 font-semibold leading-none">
	Student • Dev • Ailurophile
	</p>
	</div>
	</section>
	<NavBar />
	{children}
	</main>
	</body>
	</html>
	);
	}
	"use client";

	import { usePathname } from "next/navigation";
	import Link from "next/link";

	const navItems = [
	{
	path: '/',
	name: 'Home',
	},
	{
	path: '/now',
	name: 'Now',
	},
	{
	path: '/guessbook',
	name: 'Guessbook',
	},
	{
	path: '/writing',
	name: 'Writing',
	},
	]

	export default function NavBar(){
	let pathname = usePathname() \|\| '/';

	return (
	<div className="border border-stone-800/90 p-[0.4rem] rounded-lg mb-12 sticky top-4 z-[100] bg-stone-900/80 backdrop-blur-md">
	<nav className="flex gap-2 relative justify-start w-full z-[100] rounded-lg">
	{navItems.map((item, index) => {
	const isActive = item.path === pathname;

	return (
	<Link
	key={item.path}
	className={`px-4 py-2 rounded-md text-sm lg:text-base relative no-underline duration-300 ease-in ${
	isActive ? "text-zinc-100" : "text-zinc-400"
	}`}
	href={item.path}
	>
	<span>{item.name}</span>
	</Link>
	);
	})}
	</nav>
	</div>
	);
	}