Mobile vs Web

src/app/layout.tsx

@@ -7,6 +7,8 @@ import { useEffect, useState } from "react";
 import * as rdd from "react-device-detect";
 import { useRouter } from "next/navigation";
 
+import MobileNav from "@/lib/components/MobileNav";
+
 const geistSans = Geist({
 	variable: "--font-geist-sans",
 	subsets: ["latin"],
@@ -30,15 +32,9 @@ export default function RootLayout({
 	useEffect(() => {
 		setIsSafari(rdd.isSafari);
 		setIsMobile(rdd.isMobile);
-
-		console.log("isMobile", isMobile);
-		console.log("isSafari", isSafari);
 	}, []);
 
     useEffect(() => {
-        if (isMobile && isSafari) {
-            router.push("/mobile");
-        }
     }, [isMobile, isSafari, router]);
 
 	return (
@@ -48,6 +44,9 @@ export default function RootLayout({
 				suppressHydrationWarning={true}
 			>
 				{children}
+				{isMobile && (
+					<MobileNav />
+				)}
 			</body>
 		</html>
 	);

src/app/mobile/layout.tsx

@@ -1,15 +0,0 @@
-
-import Footer from "@/lib/components/Footer";
-
-export default function MobileLayout({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
-	return (
-		<main>
-			{children}
-			<Footer />
-		</main>
-	);
-}

src/app/mobile/page.tsx

@@ -1,16 +0,0 @@
-"use client";
-import Image from "next/image";
-
-
-export default function Home() {
-
-	return (
-		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-				<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
-					Welcome to Mobile.s!
-				</h1>
-			</main>
-		</div>
-	);
-}

src/app/page.tsx

@@ -1,53 +1,30 @@
 "use client";
 import Image from "next/image";
 
-export default function Home() {
-
+function Mobile() {
 	return (
 		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
 			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
 				<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
-					Welcome to Next.s!
+					Welcome to Mobile.s!
 				</h1>
-				<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-					<li className="mb-2 tracking-[-.01em]">
-						Get started by editing{" "}
-						<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-							src/app/page.tsx
-						</code>
-						.
-					</li>
-					<li className="tracking-[-.01em]">
-						Save and see your changes instantly (REALLY??).
-					</li>
-				</ol>
-
-				<div className="flex gap-4 items-center flex-col sm:flex-row">
-					<a
-						className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-						href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<Image
-							className="dark:invert"
-							src="/vercel.svg"
-							alt="Vercel logomark"
-							width={20}
-							height={20}
-						/>
-						Deploy now
-					</a>
-					<a
-						className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-						href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Read our docs
-					</a>
-				</div>
 			</main>
 		</div>
 	);
 }
+
+function Web() {
+	return (
+		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+				<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
+					Welcome to Web.s!
+				</h1>
+			</main>
+		</div>
+	);
+}
+
+export default function Home() {
+	return Mobile();
+}