layout

Author: chenfoonglim

client/package-lock.json

@@ -5,6 +5,7 @@ import { usePings } from "@/hooks/pings";
 import { cn } from "@/lib/utils";
 
 import { Button } from "../components/ui/button";
+import Layout from "./layout";
 
 const fontSans = FontSans({
   subsets: ["latin"],
@@ -18,19 +19,21 @@ export default function Home() {
   });
 
   return (
-    <main
-      className={cn(
-        "flex min-h-screen flex-col items-center gap-4 p-24 font-sans",
-        fontSans.variable,
-      )}
-    >
-      <h1 className="text-3xl text-primary">Test title</h1>
-      <Button onClick={() => setClicked(true)}>
-        {isLoading ? "Loading" : "Ping"}
-      </Button>
-      <p>
-        Response from server: <span>{data as string}</span>
-      </p>
-    </main>
+    <Layout>
+      <main
+        className={cn(
+          "flex min-h-screen flex-col items-center gap-4 p-24 font-sans",
+          fontSans.variable,
+        )}
+      >
+        <h1 className="text-3xl text-primary">Test title</h1>
+        <Button onClick={() => setClicked(true)}>
+          {isLoading ? "Loading" : "Ping"}
+        </Button>
+        <p>
+          Response from server: <span>{data as string}</span>
+        </p>
+      </main>
+    </Layout>
   );
 }

client/src/pages/index.tsx

@@ -0,0 +1,48 @@
+import { NavigationMenuLink } from "@radix-ui/react-navigation-menu";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <>
+      <div className="flex flex-row items-center justify-between gap-6 bg-blue-500 p-6">
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Events</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <NavigationMenuLink asChild>
+                  <Link href="/">Index</Link>
+                </NavigationMenuLink>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Clubs</NavigationMenuTrigger>
+            </NavigationMenuItem>
+
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>About us</NavigationMenuTrigger>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+
+        <Button>Join or something</Button>
+      </div>
+
+      <main>{children}</main>
+    </>
+  );
+}

client/src/pages/layout.tsx

@@ -0,0 +1,12 @@
+import Layout from "./layout";
+
+export default function Home() {
+  return (
+    <Layout>
+      <div className="p-6">
+        <h1 className="text-2xl font-bold">Home</h1>
+        <p>This is the home page.</p>
+      </div>
+    </Layout>
+  );
+}