only showing AutoGPT logo if user is not present

Significant-Gravitas · Nov 11, 2024 · 42fcca6 · 42fcca6
1 parent 7a03d17
commit 42fcca6
Showing 1 changed file with 63 additions and 51 deletions.
diff --git a/autogpt_platform/frontend/src/components/NavBar.tsx b/autogpt_platform/frontend/src/components/NavBar.tsx
@@ -16,57 +16,69 @@ export async function NavBar() {
   );
   const { user } = await getServerUser();
 
-  return (
-    user && (
-      <header className="sticky top-0 z-50 mx-4 flex h-16 items-center gap-4 border border-gray-300 bg-background p-3 md:rounded-b-2xl md:px-6 md:shadow">
-        <div className="flex flex-1 items-center gap-4">
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="shrink-0 md:hidden"
-              >
-                <IconMenu />
-                <span className="sr-only">Toggle navigation menu</span>
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="left">
-              <nav className="grid gap-6 text-lg font-medium">
-                <NavBarButtons className="flex flex-row items-center gap-2" />
-              </nav>
-            </SheetContent>
-          </Sheet>
-          <nav className="hidden md:flex md:flex-row md:items-center md:gap-5 lg:gap-8">
-            <div className="flex h-10 w-20 flex-1 flex-row items-center justify-center gap-2">
-              <a href="https://agpt.co/">
-                <Image
-                  src="/AUTOgpt_Logo_dark.png"
-                  alt="AutoGPT Logo"
-                  width={100}
-                  height={40}
-                  priority
-                />
-              </a>
-            </div>
-            <NavBarButtons className="flex flex-row items-center gap-1 border border-white font-semibold hover:border-gray-900" />
-          </nav>
-        </div>
-        <div className="flex flex-1 items-center justify-end gap-4">
-          {isAvailable && user && <CreditButton />}
-
-          {isAvailable && !user && (
-            <Link
-              href="/login"
-              className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+  return user ? (
+    <header className="sticky top-0 z-50 mx-4 flex h-16 items-center gap-4 border border-gray-300 bg-background p-3 md:rounded-b-2xl md:px-6 md:shadow">
+      <div className="flex flex-1 items-center gap-4">
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="shrink-0 md:hidden"
             >
-              Log In
-              <IconCircleUser />
-            </Link>
-          )}
-          {isAvailable && user && <ProfileDropdown />}
-        </div>
-      </header>
-    )
+              <IconMenu />
+              <span className="sr-only">Toggle navigation menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left">
+            <nav className="grid gap-6 text-lg font-medium">
+              <NavBarButtons className="flex flex-row items-center gap-2" />
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <nav className="hidden md:flex md:flex-row md:items-center md:gap-5 lg:gap-8">
+          <div className="flex h-10 w-20 flex-1 flex-row items-center justify-center gap-2">
+            <a href="https://agpt.co/">
+              <Image
+                src="/AUTOgpt_Logo_dark.png"
+                alt="AutoGPT Logo"
+                width={100}
+                height={40}
+                priority
+              />
+            </a>
+          </div>
+          <NavBarButtons className="flex flex-row items-center gap-1 border border-white font-semibold hover:border-gray-900" />
+        </nav>
+      </div>
+      <div className="flex flex-1 items-center justify-end gap-4">
+        {isAvailable && user && <CreditButton />}
+
+        {isAvailable && !user && (
+          <Link
+            href="/login"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+          >
+            Log In
+            <IconCircleUser />
+          </Link>
+        )}
+        {isAvailable && user && <ProfileDropdown />}
+      </div>
+    </header>
+  ) : (
+    <nav className="flex w-full items-center p-2 pt-8">
+      <div className="flex h-10 w-20 flex-1 flex-row items-center justify-center gap-2">
+        <a href="https://agpt.co/">
+          <Image
+            src="/AUTOgpt_Logo_dark.png"
+            alt="AutoGPT Logo"
+            width={100}
+            height={40}
+            priority
+          />
+        </a>
+      </div>
+    </nav>
   );
 }