Clean up navbar code, add logout button (#146)

varianter · Oct 18, 2023 · 679f163 · 679f163
1 parent 53a8ab4
commit 679f163
Show file tree

Hide file tree

Showing 19 changed files with 119 additions and 711 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,10 +11,6 @@
     "prettier:ci": "prettier --check . "
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.14.10",
     "@types/node": "20.5.9",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",

diff --git a/frontend/public/images/variant-logo-1.svg → frontend/public/images/variant-logo.svg b/frontend/public/images/variant-logo-1.svg → frontend/public/images/variant-logo.svg
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/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/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
@@ -0,0 +1,23 @@
+import Image from "next/image";
+import NavBarLink from "./NavBarLink";
+import NavBarUserIcon from "./NavBarUserIcon";
+
+export default 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.svg"
+          width="65"
+          height="16"
+        />
+        <NavBarUserIcon />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/NavBar/NavBarDropdown.tsx b/frontend/src/components/NavBar/NavBarDropdown.tsx
@@ -0,0 +1,40 @@
+"use client";
+import React, { useState } from "react";
+import { signOut } from "next-auth/react";
+import { LogOut, User } from "react-feather";
+
+export default function NavBarDropdown(props: { initials: string }) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <div className="relative">
+        <button
+          className={`flex rounded-full border border-white h-9 min-w-[36px] justify-center items-center ${
+            props.initials.length > 3 && "px-1"
+          }`}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <p className="text-white body-small">{props.initials}</p>
+        </button>
+        <div
+          className={`absolute right-0 top-11 rounded-b text-primary_default bg-white flex flex-col w-[138px] shadow-md ${
+            !isOpen && "hidden"
+          }`}
+        >
+          <button className="p-2 w-[138px] flex flex-row gap-3 hover:bg-primary_default hover:text-white">
+            <User className="w-4 h-4" />
+            <p className="body">Min profil</p>
+          </button>
+          <button
+            className="p-2 w-[138px] rounded-b flex flex-row gap-3 hover:bg-primary_default hover:text-white"
+            onClick={() => signOut()}
+          >
+            <LogOut className="w-4 h-4" />
+            <p className="body">Logg ut</p>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/components/NavBar/NavBarLink.tsx b/frontend/src/components/NavBar/NavBarLink.tsx
@@ -0,0 +1,20 @@
+"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);
+
+  return (
+    <a
+      className={`p-4 flex justify-center items-center text-white ${
+        isCurrentPath
+          ? "body-large-bold border-b-[3px] border-secondary_default"
+          : "body-large opacity-70 hover:opacity-100"
+      }`}
+      href={`${props.path}`}
+    >
+      {props.text}
+    </a>
+  );
+}
diff --git a/frontend/src/components/NavBar/NavBarUserIcon.tsx b/frontend/src/components/NavBar/NavBarUserIcon.tsx
@@ -0,0 +1,23 @@
+import {
+  authOptions,
+  getCustomServerSession,
+} from "@/app/api/auth/[...nextauth]/route";
+import NavBarDropdown from "./NavBarDropdown";
+
+export default async function NavBarUserIcon() {
+  const session =
+    !process.env.NEXT_PUBLIC_NO_AUTH &&
+    (await getCustomServerSession(authOptions));
+
+  const initials =
+    session && session.user && session.user.name
+      ? session.user.name
+          .split(" ")
+          .map((name) => name.charAt(0).toUpperCase())
+          .join("")
+      : "";
+
+  if (session) {
+    return <NavBarDropdown 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