Added better navbar UI, added pages for each link

Author: chenfoonglim

client/src/pages/index.tsx

@@ -26,7 +26,7 @@ export default function Home() {
           fontSans.variable,
         )}
       >
-        <h1 className="text-3xl text-primary">Test title</h1>
+        <h1 className="text-3xl text-primary">HOME</h1>
         <Button onClick={() => setClicked(true)}>
           {isLoading ? "Loading" : "Ping"}
         </Button>

client/src/pages/layout.tsx

@@ -1,48 +1,37 @@
-import { NavigationMenuLink } from "@radix-ui/react-navigation-menu";
+import { Bell,Home, Mail, User } from "lucide-react";
 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>
+      <main className="pb-24">{children}</main>
 
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>Clubs</NavigationMenuTrigger>
-            </NavigationMenuItem>
+      <nav className="fixed bottom-6 left-1/2 z-50 -translate-x-1/2">
+        <div className="flex items-center gap-8 rounded-full bg-[#000912] px-8 py-4 shadow-lg">
+          <Link href="/" className="text-gray-300 hover:text-white">
+            <Home className="h-6 w-6" />
+          </Link>
 
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>About us</NavigationMenuTrigger>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
+          <Link href="/messages" className="text-gray-300 hover:text-white">
+            <Mail className="h-6 w-6" />
+          </Link>
 
-        <Button>Join or something</Button>
-      </div>
+          <Link href="/profile" className="text-gray-300 hover:text-white">
+            <User className="h-6 w-6" />
+          </Link>
 
-      <main>{children}</main>
+          <Link
+            href="/notifications"
+            className="text-gray-300 hover:text-white"
+          >
+            <Bell className="h-6 w-6" />
+          </Link>
+        </div>
+      </nav>
     </>
   );
 }

client/src/pages/messages.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">Messages</h1>
+        <p>This is the Messages page.</p>
+      </div>
+    </Layout>
+  );
+}

client/src/pages/notification.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">Notifiocation</h1>
+        <p>This is the Notification page.</p>
+      </div>
+    </Layout>
+  );
+}

client/src/pages/try.tsx client/src/pages/profile.tsxclient/src/pages/try.tsx renamed to client/src/pages/profile.tsx

@@ -4,8 +4,8 @@ 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>
+        <h1 className="text-2xl font-bold">Profile</h1>
+        <p>Profile</p>
       </div>
     </Layout>
   );