Clean up navbar code, add logout button

varianter · Oct 16, 2023 · 095dc4d · 095dc4d
1 parent 02096fb
commit 095dc4d
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 248 deletions.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./globals.css";
 import Head from "next/head";
-import AppProviders from "../components/AppProviders";
+import NavBar from "@/components/NavBar";
 
 export default function RootLayout({
   children,
@@ -17,7 +17,8 @@ export default function RootLayout({
         />
       </Head>
       <body>
-        <AppProviders>{children}</AppProviders>
+        <NavBar />
+        {children}
       </body>
     </html>
   );

diff --git a/frontend/src/components/AppProviders.tsx b/frontend/src/components/AppProviders.tsx
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
@@ -0,0 +1,23 @@
+import Image from "next/image";
+import NavBarLink from "./NavBarLink";
+import NavBarUserIcon from "./NavBarUserIcon";
+
+export default async function NavBar() {
+  return (
+    <div className="bg-primary_default w-full h-[52px] flex flex-row justify-between sticky top-0 px-4">
+      <div className="flex flex-row">
+        <NavBarLink text="Bemanning" path="/bemanning" />
+      </div>
+      <div className="flex flex-row gap-6 items-center">
+        <Image
+          className="variant-logo"
+          alt="Variant logo"
+          src="./images/variant-logo-1.svg"
+          width="65"
+          height="16"
+        />
+        <NavBarUserIcon />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/NavBarDropdown.tsx b/frontend/src/components/NavBarDropdown.tsx
@@ -0,0 +1,36 @@
+"use client";
+import React, { useState } from "react";
+import { signOut } from "next-auth/react";
+
+export default function Dropdown(props: { initials: string }) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  function toggle() {
+    setIsOpen((old) => !old);
+  }
+
+  const transClass = isOpen ? "flex" : "hidden";
+
+  return (
+    <>
+      <div className="relative">
+        <button
+          className="flex rounded-full border border-white h-9 w-9 overflow-hidden justify-center items-center"
+          onClick={toggle}
+        >
+          <p className="text-white body-small">{props.initials}</p>
+        </button>
+        <div
+          className={`absolute origin-right right-0 bg-primary_l4 w-24 flex flex-col p-4 rounded-sm ${transClass}`}
+        >
+          <button
+            className="hover:opacity-70 text-center "
+            onClick={() => signOut()}
+          >
+            Logg ut
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/components/NavBarLink.tsx b/frontend/src/components/NavBarLink.tsx
@@ -0,0 +1,26 @@
+"use client";
+import { usePathname } from "next/navigation";
+
+export default function NavBarLink(props: { text: string; path: string }) {
+  const pathname = usePathname();
+  const isCurrentPath = props.path.includes(pathname);
+
+  if (isCurrentPath) {
+    return (
+      <a
+        className="p-4 body-large-bold text-white flex justify-items-center border-b-[3px] border-secondary_default "
+        href={`${props.path}`}
+      >
+        {props.text}
+      </a>
+    );
+  } else
+    return (
+      <a
+        className="p-4 body-large text-white opacity-70 flex justify-items-center hover:opacity-100 "
+        href={`${props.path}`}
+      >
+        {props.text}
+      </a>
+    );
+}
diff --git a/frontend/src/components/NavBarUserIcon.tsx b/frontend/src/components/NavBarUserIcon.tsx
@@ -0,0 +1,18 @@
+import {
+  authOptions,
+  getCustomServerSession,
+} from "@/app/api/auth/[...nextauth]/route";
+import Dropdown from "./NavBarDropdown";
+
+export default async function NavBarUserIcon() {
+  const session = await getCustomServerSession(authOptions);
+  const initials =
+    session.user?.name
+      ?.split(" ")
+      .map((n) => n.charAt(0).toUpperCase())
+      .join("") || "";
+
+  if (session) {
+    return <Dropdown initials={initials} />;
+  }
+}
diff --git a/frontend/src/components/PageLayout.tsx b/frontend/src/components/PageLayout.tsx
diff --git a/frontend/src/components/ThemeRegistry/ThemeRegistry.tsx b/frontend/src/components/ThemeRegistry/ThemeRegistry.tsx
diff --git a/frontend/src/components/ThemeRegistry/theme.ts b/frontend/src/components/ThemeRegistry/theme.ts
diff --git a/frontend/src/components/VibesNavBar.tsx b/frontend/src/components/VibesNavBar.tsx
diff --git a/frontend/src/components/VibesNavBarTabs.tsx b/frontend/src/components/VibesNavBarTabs.tsx
diff --git a/frontend/src/components/vibes-buttons/SignInButton.tsx b/frontend/src/components/vibes-buttons/SignInButton.tsx
diff --git a/frontend/src/components/vibes-buttons/SignInSignOutButton.tsx b/frontend/src/components/vibes-buttons/SignInSignOutButton.tsx
diff --git a/frontend/src/components/vibes-buttons/SignOutButton.tsx b/frontend/src/components/vibes-buttons/SignOutButton.tsx