Merge pull request #33 from hack4impact-calpoly/27-customize-navbar

27 customize navbar
hack4impact-calpoly · Feb 11, 2024 · 4b04e36 · 4b04e36
2 parents d1580f8 + d1812af
commit 4b04e36
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 9 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,6 +22,7 @@
     "lucide-react": "^0.314.0",
     "mongoose": "^7.6.3",
     "next": "^14.1.0",
+    "next-auth": "^4.24.5",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.0",

diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
@@ -1,16 +1,41 @@
+"use client";
 import React from "react";
 import Link from "next/link";
+import { signOut } from "next-auth/react";
+// import { signOut, useSession } from "next-auth/react";
+import { useState } from "react";
+import "@/styles/globals.css";
 
 export default function Navbar() {
+  // const { data: session } = useSession();
+  const [user, setUser] = useState("Karen");
+
+  const handleSignOut = async () => {
+    await signOut();
+  };
+
+  // const user = session?.user?.name || "Karen";
   return (
     <div className="bg-secondary p-4">
       <div className="container flex justify-between items-center">
-        <div className="font-semibold">
-          <Link href="/">Ecologistics Web Scraper</Link>
+        <div>
+          <Link href="/" className="flex items-left">
+            <div className="font-bold">ECOLO</div>
+            <div className="text-primary">GISTICS Web Scraper</div>
+          </Link>
+        </div>
+        <div className="text-center  text-primary">
+          <h3>Welcome {user}</h3>
         </div>
         <ul>
-          <li>
+          <li className="flex space-x-4">
             <Link href="/">Home</Link>
+            <button onClick={handleSignOut}>Logout</button>
+            {/* {session ? (
+              <button onClick={handleSignOut}>Logout</button>
+            ) : (
+              <Link href="/login">Login</Link>
+            )} */}
           </li>
         </ul>
       </div>

diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 @layer base {
   :root {