From 901bab77db4445a95da5380e96eed0d935df161c Mon Sep 17 00:00:00 2001
From: John Smith <john@johnjcsmith.com>
Date: Sun, 22 Dec 2024 18:37:08 +1030
Subject: [PATCH] chore: Center playground logo (#354)

---
 app/components/header.tsx | 131 ++++++++++++++++++++------------------
 1 file changed, 69 insertions(+), 62 deletions(-)

diff --git a/app/components/header.tsx b/app/components/header.tsx
index c058f371..3a06d283 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -22,83 +22,90 @@ export function Header() {
 
   return (
     <header className="flex items-center justify-between w-full h-16 px-8">
-      <div className="flex items-center space-x-8">
-        <div className="flex items-center gap-4">
-          {/* Mobile menu */}
-          <div className="md:hidden">
-            <Sheet>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="sm">
-                  <Menu className="h-5 w-5" />
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="left" className="w-[240px] flex flex-col gap-2 pt-8">
-                {/* User profile section */}
-                <div className="mb-4 pb-4 border-b">
-                  <div className="flex justify-center mb-4">
-                    <UserButton
-                      appearance={{
-                        variables: {
-                          colorText: 'black',
-                        },
-                      }}
-                    />
-                  </div>
-                  <OrganizationSwitcher
-                    hidePersonal={true}
+      {/* Left section with menu */}
+      <div className="flex items-center md:hidden">
+        {/* Mobile menu */}
+        <div>
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <Menu className="h-5 w-5" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-[240px] flex flex-col gap-2 pt-8">
+              {/* User profile section */}
+              <div className="mb-4 pb-4 border-b">
+                <div className="flex justify-center mb-4">
+                  <UserButton
                     appearance={{
                       variables: {
                         colorText: 'black',
                       },
-                      elements: {
-                        rootBox: 'w-full',
-                        organizationSwitcherTrigger: 'w-full',
-                      },
                     }}
-                    afterSelectOrganizationUrl="/switch-org"
                   />
                 </div>
-                {/* Navigation section */}
-                <h2 className="font-medium mb-2 text-sm">Navigation</h2>
-                {navigationLinks.map(
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  (child: any, index: any) =>
-                    child && (
-                      <SheetClose key={index} asChild>
-                        {child}
-                      </SheetClose>
-                    )
-                )}
-              </SheetContent>
-            </Sheet>
-          </div>
-          <a href="/" className="flex items-center space-x-4">
-            <div className="flex items-center space-x-4 -ml-2">
-              <Image className="hidden md:block" src={logo} width={40} height={40} alt={'logo'} />
-              <h1 className="text-2xl hidden md:block">Playground</h1>
-            </div>
-          </a>
+                <OrganizationSwitcher
+                  hidePersonal={true}
+                  appearance={{
+                    variables: {
+                      colorText: 'black',
+                    },
+                    elements: {
+                      rootBox: 'w-full',
+                      organizationSwitcherTrigger: 'w-full',
+                    },
+                  }}
+                  afterSelectOrganizationUrl="/switch-org"
+                />
+              </div>
+              {/* Navigation section */}
+              <h2 className="font-medium mb-2 text-sm">Navigation</h2>
+              {navigationLinks.map(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (child: any, index: any) =>
+                  child && (
+                    <SheetClose key={index} asChild>
+                      {child}
+                    </SheetClose>
+                  )
+              )}
+            </SheetContent>
+          </Sheet>
         </div>
       </div>
-      {/* Desktop user controls */}
-      <div className="hidden md:flex items-center space-x-8">
-        <UserButton
-          appearance={{
-            variables: {
-              colorText: 'black',
-            },
-          }}
-        />
-        <div className="pt-2">
-          <OrganizationSwitcher
-            hidePersonal={true}
+
+      {/* Logo and text section - centered on mobile, left on desktop */}
+      <div className="flex-1 flex justify-center md:justify-start">
+        <a href="/" className="flex items-center">
+          <div className="flex items-center space-x-3">
+            <Image className="w-8 h-8 md:w-10 md:h-10" src={logo} width={40} height={40} alt={'logo'} />
+            <h1 className="text-xl md:text-2xl">Playground</h1>
+          </div>
+        </a>
+      </div>
+
+      {/* Right section with desktop controls */}
+      <div className="flex items-center space-x-8 md:flex-none">
+        {/* Desktop user controls */}
+        <div className="hidden md:flex items-center space-x-8">
+          <UserButton
             appearance={{
               variables: {
                 colorText: 'black',
               },
             }}
-            afterSelectOrganizationUrl="/switch-org"
           />
+          <div className="pt-2">
+            <OrganizationSwitcher
+              hidePersonal={true}
+              appearance={{
+                variables: {
+                  colorText: 'black',
+                },
+              }}
+              afterSelectOrganizationUrl="/switch-org"
+            />
+          </div>
         </div>
       </div>
     </header>