varianter · sigridge · Oct 18, 2023 · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023
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/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,42 @@
+"use client";
+import React, { useState } from "react";
+import { signOut } from "next-auth/react";
+import { LogOut, User } from "react-feather";
+
+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 top-11 rounded text-primary_default bg-white flex flex-col w-[138px] shadow-[0_4px_4px_0_rgba(66,61,137,0.10)]  ${transClass}`}
+        >
+          <button className="text-center p-2 w-[138px] rounded flex flex-row gap-3 align-middle hover:bg-primary_default hover:text-white">
+            <User className=" w-4 h-4" />
+            <p className="body">Min profil</p>
+          </button>
+          <button
+            className="text-center p-2 w-[138px] rounded flex flex-row gap-3 align-middle 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/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,23 @@
+import {
+  authOptions,
+  getCustomServerSession,
+} from "@/app/api/auth/[...nextauth]/route";
+import Dropdown from "./NavBarDropdown";
+
+export default async function NavBarUserIcon() {
+  const session = process.env.NEXT_PUBLIC_NO_AUTH
+    ? null
+    : await getCustomServerSession(authOptions);
+
+  const initials =
+    session && session.user && session.user.name
+      ? 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