From 436c19fca1fd1653727a323ebd5b0bc6e96dd81b Mon Sep 17 00:00:00 2001
From: John Lightner <jlightner@a.xpltd.co>
Date: Tue, 24 Mar 2026 21:02:35 -0500
Subject: [PATCH] =?UTF-8?q?feat(S04/T01):=20Moved=20sidebar=20collapse=20t?=
 =?UTF-8?q?oggle=20from=20nav=20bottom=20into=20brand=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- src/frontend/src/components/Sidebar.tsx
---
 src/frontend/src/components/Sidebar.tsx | 72 ++++++++++++++-----------
 1 file changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/components/Sidebar.tsx b/src/frontend/src/components/Sidebar.tsx
index a2d22d7..532dc0c 100644
--- a/src/frontend/src/components/Sidebar.tsx
+++ b/src/frontend/src/components/Sidebar.tsx
@@ -59,13 +59,49 @@ export function Sidebar() {
           height: 'var(--header-height)',
           display: 'flex',
           alignItems: 'center',
-          padding: collapsed ? '0 var(--space-3)' : '0 var(--space-4)',
+          padding: collapsed ? '0 var(--space-1)' : '0 var(--space-4)',
           borderBottom: '1px solid var(--border)',
-          gap: 'var(--space-2)',
-          justifyContent: collapsed ? 'center' : 'flex-start',
+          gap: collapsed ? '2px' : 'var(--space-2)',
         }}
       >
-        <TubearrLogo collapsed={collapsed} />
+        <NavLink
+          to="/"
+          aria-label="Go to Channels"
+          style={{
+            textDecoration: 'none',
+            color: 'inherit',
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <TubearrLogo collapsed={collapsed} />
+        </NavLink>
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 'var(--space-1)',
+            borderRadius: 'var(--radius-md)',
+            color: 'var(--text-muted)',
+            cursor: 'pointer',
+            transition: 'color var(--transition-fast), background-color var(--transition-fast)',
+            marginLeft: 'auto',
+            flexShrink: 0,
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = 'var(--text-secondary)';
+            e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--text-muted)';
+            e.currentTarget.style.backgroundColor = 'transparent';
+          }}
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
+        </button>
       </div>
 
       {/* Nav links */}
@@ -105,34 +141,6 @@ export function Sidebar() {
           </NavLink>
         ))}
       </div>
-
-      {/* Collapse toggle */}
-      <button
-        onClick={() => setCollapsed(!collapsed)}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 'var(--space-2)',
-          padding: 'var(--space-3)',
-          margin: 'var(--space-2)',
-          borderRadius: 'var(--radius-md)',
-          color: 'var(--text-muted)',
-          cursor: 'pointer',
-          transition: 'color var(--transition-fast)',
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.color = 'var(--text-secondary)';
-          e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.color = 'var(--text-muted)';
-          e.currentTarget.style.backgroundColor = 'transparent';
-        }}
-        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-      >
-        {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
-      </button>
     </nav>
   );
 }