Feat: Make the navbar usable on mobile (#503)

frontend/src/components/NavBar/NavBar.tsx

@@ -1,25 +1,48 @@
 import NavBarLink from "./NavBarLink";
-import NavBarUserIcon from "./NavBarUserIcon";
 import { fetchWithToken } from "@/data/apiCallsWithToken";
 import { OrganisationReadModel } from "@/api-types";
 import NavBarOrganisationDropdown from "./NavBarOrganisationDropdown";
+import NavBarMobile from "./NavBarMobile";
+import {
+  authOptions,
+  getCustomServerSession,
+} from "@/app/api/auth/[...nextauth]/route";
+import NavBarDropdown from "./NavBarDropdown";
 
 export default async function NavBar() {
   const orgs =
     (await fetchWithToken<OrganisationReadModel[]>("organisations")) ?? [];
 
+  const session =
+    !process.env.NEXT_PUBLIC_NO_AUTH &&
+    (await getCustomServerSession(authOptions));
+
+  const initial =
+    session && session.user && session.user.name ? session.user.name[0] : "N";
+
+  const navBarLinks: { text: string; path: string }[] = [
+    { text: "Bemanning", path: "bemanning" },
+    { text: "Kunder", path: "kunder" },
+    { text: "Konsulenter", path: "konsulenter" },
+    { text: "Rapporter", path: "rapport" },
+  ];
+
   return (
-    <div className="bg-primary w-full flex flex-row justify-between header px-4">
-      <div className="flex flex-row gap-8">
-        <NavBarLink text="Bemanning" path={`bemanning`} />
-        <NavBarLink text="Kunder" path={`kunder`} />
-        <NavBarLink text="Konsulenter" path={`konsulenter`} />
-        <NavBarLink text="Rapporter" path={`rapport`} />
+    <div className="bg-primary w-full header px-4">
+      <div className="hidden sm:flex flex-row justify-between">
+        <div className="flex flex-row gap-8">
+          {navBarLinks.map((link, index) => (
+            <NavBarLink key={index} text={link.text} path={link.path} />
+          ))}
+        </div>
+        <div className="flex flex-row gap-4 items-center">
+          <NavBarOrganisationDropdown organisations={orgs} />
+          <div className="w-[1px] h-8 bg-white/20" />
+          <NavBarDropdown initial={initial} />
+        </div>
       </div>
-      <div className="flex flex-row gap-4 items-center">
-        <NavBarOrganisationDropdown organisations={orgs} />
-        <div className="w-[1px] h-8 bg-white/20" />
-        <NavBarUserIcon />
+      <div className="flex sm:hidden">
+        <NavBarMobile orgs={orgs} initial={initial} navBarLinks={navBarLinks} />
       </div>
     </div>
   );

frontend/src/components/NavBar/NavBarMobile.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { OrganisationReadModel } from "@/api-types";
+import { useState } from "react";
+import NavBarLink from "./NavBarLink";
+import NavBarOrganisationDropdown from "./NavBarOrganisationDropdown";
+import NavBarDropdown from "./NavBarDropdown";
+import { Menu, X } from "react-feather";
+
+export default function NavBarMobile({
+  orgs,
+  initial,
+  navBarLinks,
+}: {
+  orgs: OrganisationReadModel[];
+  initial: string;
+  navBarLinks: { text: string; path: string }[];
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col w-full min-h-[55px] py-4">
+      <div className="flex justify-end">
+        <button className="text-white" onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
+        </button>
+      </div>
+      {isOpen && (
+        <div className="flex flex-col gap-2 items-center">
+          {navBarLinks.map((link, index) => (
+            <NavBarLink key={index} text={link.text} path={link.path} />
+          ))}
+          <NavBarOrganisationDropdown organisations={orgs} />
+          <NavBarDropdown initial={initial} />
+        </div>
+      )}
+    </div>
+  );
+}