Web Narbar Update

src/app/(app)/layout.tsx

@@ -1,34 +1,35 @@
 "use client";
 
 import MobileNav from "@/lib/components/MobileNav";
+import NavBar from "@/lib/components/NavBar";
 import { useDevice } from "@/lib/context/DeviceContext";
 
 import Image from "next/image";
 
-
 export default function RootLayout({
-    children,
+	children,
 }: Readonly<{
-    children: React.ReactNode;
+	children: React.ReactNode;
 }>) {
-
+	const { isMobile, isSafari } = useDevice();
-    const { isMobile, isSafari } = useDevice();
+	return (
-    return (
+		<main>
-        <main className="card grid grid-rows-[1fr_auto]">
+			{!isMobile && !isSafari ? <NavBar /> : null}
-
+			<section className="grid grid-rows-[1fr_auto]">
-            <Image 
+				<Image
-                src="/drinkhappylogo.png"
+					src="/drinkhappylogo.png"
-                alt="Drink Happy Logo Image"
+					alt="Drink Happy Logo Image"
-                width={500}
+					width={200}
-                height={500}
+					height={200}
-                className="h-auto mx-auto w-1/2"
+					className="h-auto mx-auto w-1/4"
-            />
+				/>
-            {children}
+				{children}
-            { isMobile && isSafari ? (
+			</section>
-                <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-300">
+			{isMobile && isSafari ? (
-                    <MobileNav />
+				<div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-300">
-                </div>
+					<MobileNav />
-            ) : null }
+				</div>
-        </main>
+			) : null}
-    );
+		</main>
+	);
 }

src/app/(app)/page.tsx

@@ -25,23 +25,30 @@ function Mobile() {
 
 function Web() {
 	const { session } = useDevice();
+	let isAuthenticated = session == null ? false : true;
+
 	return (
 		<main className="flex flex-col gap-[32px] row-start-2 items-center mt-10">
 			<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
 				Welcome, {session?.name || "NULL"} !!
 			</h1>
 
-			<div className="card preset-tonal-success grid grid-cols-1 items-center gap-4 p-4 lg:grid-cols-[1fr_auto]">
+			{isAuthenticated ? (
-				<div className="gap-1">
+				<div>
-					<button type="button" className="btn hover:preset-tonal">
+					<button type="button" className="btn bg-surface-500">
-						<a href="/auth/login?screen_hint=signup">Sign up</a>
+						<a href="/auth/logout">Logout</a>
 					</button>
 				</div>
-			</div>
+			) : (
-			
+				<div className="flex gap-4">
-			<button>
+					<button type="button" className="btn bg-surface-500">
-				<a href="/auth/login?screen_hint=login">Log in</a>
+						<a href="/auth/login?screen_hint=signup">Sign up</a>
-			</button>
+					</button>
+					<button type="button" className="btn bg-surface-500">
+						<a href="/auth/login?screen_hint=login">Log in</a>
+					</button>
+				</div>
+			)}
 		</main>
 	);
 }

src/lib/components/NavBar.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import { Navigation } from "@skeletonlabs/skeleton-react";
+import {
+    Home as IconHome,
+    Folder as IconFolder,
+    BookText as BookImage,
+    Music as IconMusic,
+    Video as IconVideo,
+} from "lucide-react";
+
+import { useRouter } from "next/navigation";
+
+const NavBar = () => {
+    return (
+<nav className="sticky top-0 z-50 shadow-xl text-black dark:text-white bg-surface-800">
+    <div className="container mx-auto px-4">
+        <div className="grid grid-cols-[auto_1fr_auto] items-center gap-4 p-4">
+            <h1 className="text-xl font-semibold"><a href="/">Drink Happy</a></h1>
+            <div className="hidden md:flex items-center gap-4 justify-center">
+                <a href="/#create" className="btn variant-ghost">Create</a>
+                <a href="/#edit" className="btn variant-ghost">Edit</a>
+            </div>
+        </div>
+    </div>
+</nav>
+    );
+};
+
+export default NavBar;