From 415d5fe8bd91c4bdfeedcc6711ba5253455e93a6 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Sun, 17 Oct 2021 13:13:24 +0100
Subject: [PATCH] fix type error in <Shell> Userdropdown (#980)

* removed settings from bottom nav

* truncate bottom nav

* fixed type error in Shell
---
 components/Shell.tsx | 169 +++++++++++++++++++++----------------------
 1 file changed, 82 insertions(+), 87 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 40a9360703..f6a93aa6fc 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -298,93 +298,88 @@ function UserDropdown({ small }: { small?: boolean }) {
   const query = useMeQuery();
   const user = query.data;
 
-  return (
-    !!user && (
-      <Dropdown>
-        <DropdownMenuTrigger asChild>
-          <div className="flex items-center space-x-2 cursor-pointer group">
-            <Avatar
-              imageSrc={user.avatar}
-              alt={user.username}
-              className={classNames(
-                small ? "w-8 h-8" : "w-10 h-10",
-                "bg-gray-300 rounded-full flex-shrink-0"
-              )}
-            />
-            {!small && (
-              <>
-                <span className="flex-grow text-sm">
-                  <span className="block font-medium text-gray-900 truncate">{user.name}</span>
-                  <span className="block font-normal truncate text-neutral-500">/{user.username}</span>
-                </span>
-                <SelectorIcon
-                  className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500"
-                  aria-hidden="true"
-                />
-              </>
-            )}
-          </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuItem>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`}
-              className="flex px-4 py-2 text-sm text-neutral-500">
-              {t("view_public_page")} <ExternalLinkIcon className="w-3 h-3 mt-1 ml-1 text-neutral-400" />
-            </a>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator className="h-px bg-gray-200" />
-          <DropdownMenuItem>
-            <a
-              href="https://cal.com/slack"
-              target="_blank"
-              rel="noreferrer"
-              className="flex px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900">
-              <svg
-                viewBox="0 0 2447.6 2452.5"
-                className={classNames(
-                  "text-neutral-400 group-hover:text-neutral-500",
-                  "mt-0.5 mr-3 flex-shrink-0 h-4 w-4"
-                )}
-                xmlns="http://www.w3.org/2000/svg">
-                <g clipRule="evenodd" fillRule="evenodd">
-                  <path
-                    d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                    fill="#9BA6B6"></path>
-                  <path
-                    d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                    fill="#9BA6B6"></path>
-                  <path
-                    d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                    fill="#9BA6B6"></path>
-                  <path
-                    d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                    fill="#9BA6B6"></path>
-                </g>
-              </svg>
-              {t("join_our_slack")}
-            </a>
-          </DropdownMenuItem>
-          <HelpMenuItemDynamic />
-          <DropdownMenuSeparator className="h-px bg-gray-200" />
-          <DropdownMenuItem>
-            <a
-              onClick={() => signOut({ callbackUrl: "/auth/logout" })}
-              className="flex px-4 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 hover:text-gray-900">
-              <LogoutIcon
-                className={classNames(
-                  "text-neutral-400 group-hover:text-neutral-500",
-                  "mr-2 flex-shrink-0 h-5 w-5"
-                )}
+  return user ? (
+    <Dropdown>
+      <DropdownMenuTrigger asChild>
+        <div className="flex items-center space-x-2 cursor-pointer group">
+          <Avatar
+            imageSrc={user.avatar}
+            alt={user.username}
+            className={classNames(small ? "w-8 h-8" : "w-10 h-10", "bg-gray-300 rounded-full flex-shrink-0")}
+          />
+          {!small && (
+            <>
+              <span className="flex-grow text-sm">
+                <span className="block font-medium text-gray-900 truncate">{user.name}</span>
+                <span className="block font-normal truncate text-neutral-500">/{user.username}</span>
+              </span>
+              <SelectorIcon
+                className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
-              {t("sign_out")}
-            </a>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </Dropdown>
-    )
-  );
+            </>
+          )}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`}
+            className="flex px-4 py-2 text-sm text-neutral-500">
+            {t("view_public_page")} <ExternalLinkIcon className="w-3 h-3 mt-1 ml-1 text-neutral-400" />
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className="h-px bg-gray-200" />
+        <DropdownMenuItem>
+          <a
+            href="https://cal.com/slack"
+            target="_blank"
+            rel="noreferrer"
+            className="flex px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900">
+            <svg
+              viewBox="0 0 2447.6 2452.5"
+              className={classNames(
+                "text-neutral-400 group-hover:text-neutral-500",
+                "mt-0.5 mr-3 flex-shrink-0 h-4 w-4"
+              )}
+              xmlns="http://www.w3.org/2000/svg">
+              <g clipRule="evenodd" fillRule="evenodd">
+                <path
+                  d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
+                  fill="#9BA6B6"></path>
+                <path
+                  d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
+                  fill="#9BA6B6"></path>
+                <path
+                  d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
+                  fill="#9BA6B6"></path>
+                <path
+                  d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
+                  fill="#9BA6B6"></path>
+              </g>
+            </svg>
+            {t("join_our_slack")}
+          </a>
+        </DropdownMenuItem>
+        <HelpMenuItemDynamic />
+        <DropdownMenuSeparator className="h-px bg-gray-200" />
+        <DropdownMenuItem>
+          <a
+            onClick={() => signOut({ callbackUrl: "/auth/logout" })}
+            className="flex px-4 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 hover:text-gray-900">
+            <LogoutIcon
+              className={classNames(
+                "text-neutral-400 group-hover:text-neutral-500",
+                "mr-2 flex-shrink-0 h-5 w-5"
+              )}
+              aria-hidden="true"
+            />
+            {t("sign_out")}
+          </a>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </Dropdown>
+  ) : null;
 }