From 464406603a4783fc87f424d3337247ae769c0682 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Fri, 13 May 2022 19:27:12 +0200
Subject: [PATCH] Fix NavBar on mobile

---
 src/components/navBar/NavBar.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/navBar/NavBar.tsx b/src/components/navBar/NavBar.tsx
index 5dc81092..c308ac98 100644
--- a/src/components/navBar/NavBar.tsx
+++ b/src/components/navBar/NavBar.tsx
@@ -11,7 +11,7 @@ import {
 import { useBooleanToggle } from "@mantine/hooks";
 import { NextLink } from "@mantine/next";
 import Image from "next/image";
-import React, { useContext, useEffect, useState } from "react";
+import React, { ReactNode, useContext, useEffect, useState } from "react";
 import headerStyle from "../../styles/header.style";
 import { IsSignedInContext } from "../../utils/auth.util";
 import { useConfig } from "../../utils/config.util";
@@ -19,7 +19,8 @@ import ActionAvatar from "./ActionAvatar";
 
 type Link = {
   link?: string;
-  label: string;
+  label?: string;
+  component?: ReactNode;
   action?: () => Promise<void>;
 };
 
@@ -35,6 +36,9 @@ const Header = () => {
       link: "/upload",
       label: "Upload",
     },
+    {
+      component: <ActionAvatar />,
+    },
   ];
 
   const unauthenticatedLinks: Link[] | undefined = [
@@ -59,6 +63,15 @@ const Header = () => {
   const links = isSignedIn ? authenticatedLinks : unauthenticatedLinks;
 
   const items = links.map((link) => {
+    if (link.component) {
+      return (
+        <>
+          <Container pl={5} py={15}>
+            {link.component}
+          </Container>
+        </>
+      );
+    }
     if (link) {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useEffect(() => {
@@ -97,8 +110,6 @@ const Header = () => {
         </NextLink>
         <Group spacing={5} className={classes.links}>
           {items}
-          <Space w={5} />
-          {isSignedIn && <ActionAvatar />}
         </Group>
         <Burger
           opened={opened}