fix: address sidebar toggle review feedback

Author: HamedFarazi

apps/site/components/Common/SidebarToggleButton.module.css

@@ -0,0 +1,29 @@
+@reference "../../styles/index.css";
+
+.toggleButton {
+  @apply flex
+    size-8
+    items-center
+    justify-center
+    rounded-md
+    border
+    border-neutral-200
+    bg-white
+    text-neutral-700
+    shadow-sm
+    transition-all
+    duration-200
+    ease-out
+    hover:bg-neutral-50
+    hover:shadow-md
+    focus:ring-2
+    focus:ring-neutral-400
+    focus:ring-offset-1
+    focus:outline-none
+    dark:border-neutral-700
+    dark:bg-neutral-800
+    dark:text-neutral-300
+    dark:shadow-neutral-900/20
+    dark:hover:bg-neutral-700
+    dark:focus:ring-neutral-500;
+}

apps/site/components/Common/SidebarToggleButton.tsx

@@ -5,6 +5,8 @@ import { useTranslations } from 'next-intl';
 
 import type { FC, ButtonHTMLAttributes } from 'react';
 
+import styles from './SidebarToggleButton.module.css';
+
 type SidebarToggleButtonProps = {
   side: 'left' | 'right';
   isCollapsed: boolean;
@@ -48,7 +50,7 @@ const SidebarToggleButton: FC<SidebarToggleButtonProps> = ({
       aria-label={label}
       aria-expanded={!isCollapsed}
       title={label}
-      className="flex size-8 items-center justify-center rounded-md border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-all duration-200 ease-out hover:bg-neutral-50 hover:shadow-md focus:ring-2 focus:ring-neutral-400 focus:ring-offset-1 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300 dark:shadow-neutral-900/20 dark:hover:bg-neutral-700 dark:focus:ring-neutral-500"
+      className={styles.toggleButton}
       {...props}
     >
       {icon}

apps/site/components/withMetaBar.tsx

@@ -18,7 +18,9 @@ import { getGitHubBlobUrl } from '#site/util/github';
 
 import type { FC } from 'react';
 
-const WithMetaBar: FC = () => {
+const WithMetaBar: FC<{ disableToggle?: boolean }> = ({
+  disableToggle = false,
+}) => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
   const formatter = useFormatter();
   const lastUpdated = frontmatter.date
@@ -51,13 +53,13 @@ const WithMetaBar: FC = () => {
     usernames.length > 0 ||
     headings.length > 0;
 
-  // If no content, don't render metabar or controls at all
+  // If no content, render empty div to preserve grid structure
   if (!hasContent) {
-    return null;
+    return <div />;
   }
 
-  // Show collapsed rail when right sidebar is collapsed (only if there's content)
-  if (isRightSidebarCollapsed) {
+  // Show collapsed rail when right sidebar is collapsed and toggle is enabled
+  if (isRightSidebarCollapsed && !disableToggle) {
     return (
       <CollapsedSidebarRail side="right">
         <SidebarToggleButton
@@ -104,13 +106,15 @@ const WithMetaBar: FC = () => {
       }}
       headings={{ items: headings }}
     >
-      <div className="mb-6 flex justify-end pr-2">
-        <SidebarToggleButton
-          side="right"
-          isCollapsed={isRightSidebarCollapsed}
-          onToggle={toggleRightSidebar}
-        />
-      </div>
+      {!disableToggle && (
+        <div className="mb-1 flex justify-end pr-2">
+          <SidebarToggleButton
+            side="right"
+            isCollapsed={isRightSidebarCollapsed}
+            onToggle={toggleRightSidebar}
+          />
+        </div>
+      )}
     </MetaBar>
   );
 };

apps/site/components/withSidebar.tsx

@@ -20,6 +20,7 @@ import type { FC } from 'react';
 type WithSidebarProps = {
   navKeys: Array<NavigationKeys>;
   context?: Record<string, RichTranslationValues>;
+  disableToggle?: boolean;
 };
 
 type MappedItem = {
@@ -43,7 +44,12 @@ const mapItem = ([, item]: [string, MappedItem]): SidebarMappedEntry => ({
   items: item.items ? item.items.map(mapItem) : [],
 });
 
-const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
+const WithSidebar: FC<WithSidebarProps> = ({
+  navKeys,
+  context,
+  disableToggle = false,
+  ...props
+}) => {
   const { getSideNavigation } = useSiteNavigation();
   const pathname = usePathname()!;
   const t = useTranslations();
@@ -69,13 +75,13 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   const hasNavigationContent =
     mappedSidebarItems.length > 0 && navKeys.length > 0;
 
-  // If no navigation content, don't render sidebar or controls at all
+  // If no navigation content, render empty div to preserve grid structure
   if (!hasNavigationContent) {
-    return null;
+    return <div />;
   }
 
-  // Show collapsed rail when sidebar is collapsed (only if there's content)
-  if (isLeftSidebarCollapsed) {
+  // Show collapsed rail when sidebar is collapsed and toggle is enabled
+  if (isLeftSidebarCollapsed && !disableToggle) {
     return (
       <CollapsedSidebarRail side="left">
         <SidebarToggleButton
@@ -98,13 +104,15 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
       as={Link}
       {...props}
     >
-      <div className="mb-6 flex justify-end pr-2">
-        <SidebarToggleButton
-          side="left"
-          isCollapsed={isLeftSidebarCollapsed}
-          onToggle={toggleLeftSidebar}
-        />
-      </div>
+      {!disableToggle && (
+        <div className="mb-1 flex justify-end pr-2">
+          <SidebarToggleButton
+            side="left"
+            isCollapsed={isLeftSidebarCollapsed}
+            onToggle={toggleLeftSidebar}
+          />
+        </div>
+      )}
     </Sidebar>
   );
 };

apps/site/layouts/About.tsx

@@ -12,14 +12,14 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
     <WithNavBar />
 
     <ArticleWithSidebarState>
-      <WithSidebar navKeys={['about', 'getInvolved']} />
+      <WithSidebar navKeys={['about', 'getInvolved']} disableToggle />
 
       <div>
         <main id="main" tabIndex={-1}>
           {children}
         </main>
 
-        <WithMetaBar />
+        <WithMetaBar disableToggle />
       </div>
 
       <WithBreadcrumbs navKeys={['about', 'getInvolved']} />