fix: hide empty sidebar controls

Author: HamedFarazi

apps/site/components/withMetaBar.tsx

@@ -51,7 +51,12 @@ const WithMetaBar: FC = () => {
     usernames.length > 0 ||
     headings.length > 0;
 
-  // Always show collapsed rail when right sidebar is collapsed
+  // If no content, don't render metabar or controls at all
+  if (!hasContent) {
+    return null;
+  }
+
+  // Show collapsed rail when right sidebar is collapsed (only if there's content)
   if (isRightSidebarCollapsed) {
     return (
       <CollapsedSidebarRail side="right">
@@ -64,21 +69,6 @@ const WithMetaBar: FC = () => {
     );
   }
 
-  // If no content, show empty metabar area with toggle button
-  if (!hasContent) {
-    return (
-      <div className="flex w-full flex-col border-l border-neutral-200 bg-white dark:border-neutral-900 dark:bg-neutral-950">
-        <div className="mb-6 flex justify-end pt-6 pr-2">
-          <SidebarToggleButton
-            side="right"
-            isCollapsed={isRightSidebarCollapsed}
-            onToggle={toggleRightSidebar}
-          />
-        </div>
-      </div>
-    );
-  }
-
   return (
     <MetaBar
       heading={t('components.metabar.tableOfContents')}

apps/site/components/withSidebar.tsx

@@ -69,7 +69,12 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   const hasNavigationContent =
     mappedSidebarItems.length > 0 && navKeys.length > 0;
 
-  // Always show collapsed rail when sidebar is collapsed
+  // If no navigation content, don't render sidebar or controls at all
+  if (!hasNavigationContent) {
+    return null;
+  }
+
+  // Show collapsed rail when sidebar is collapsed (only if there's content)
   if (isLeftSidebarCollapsed) {
     return (
       <CollapsedSidebarRail side="left">
@@ -82,21 +87,6 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
     );
   }
 
-  // If no navigation content, show empty sidebar with toggle button
-  if (!hasNavigationContent) {
-    return (
-      <div className="flex w-full flex-col border-r border-neutral-200 bg-white dark:border-neutral-900 dark:bg-neutral-950">
-        <div className="flex justify-end pt-6 pr-3">
-          <SidebarToggleButton
-            side="left"
-            isCollapsed={isLeftSidebarCollapsed}
-            onToggle={toggleLeftSidebar}
-          />
-        </div>
-      </div>
-    );
-  }
-
   return (
     <Sidebar
       ref={sidebarRef}