fix(docs): fix salesforce docs & update styling (#2248)

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -7,8 +7,23 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/utils'
 
+const LANG_PREFIXES = ['/en', '/es', '/fr', '/de', '/ja', '/zh']
+
+function stripLangPrefix(path: string): string {
+  for (const prefix of LANG_PREFIXES) {
+    if (path === prefix) return '/'
+    if (path.startsWith(`${prefix}/`)) return path.slice(prefix.length)
+  }
+  return path
+}
+
 function isActive(url: string, pathname: string, nested = true): boolean {
-  return url === pathname || (nested && pathname.startsWith(`${url}/`))
+  const normalizedPathname = stripLangPrefix(pathname)
+  const normalizedUrl = stripLangPrefix(url)
+  return (
+    normalizedUrl === normalizedPathname ||
+    (nested && normalizedPathname.startsWith(`${normalizedUrl}/`))
+  )
 }
 
 export function SidebarItem({ item }: { item: Item }) {
@@ -16,97 +31,158 @@ export function SidebarItem({ item }: { item: Item }) {
   const active = isActive(item.url, pathname, false)
 
   return (
-    <li className='mb-[0.0625rem] list-none'>
-      <Link
-        href={item.url}
-        className={cn(
-          'block rounded-md px-2.5 py-1.5 font-normal text-[13px] leading-tight transition-colors',
-          'text-gray-600 dark:text-gray-400',
-          !active && 'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
-          active &&
-            'bg-purple-50/80 font-medium text-purple-600 dark:bg-purple-900/15 dark:text-purple-400'
-        )}
-      >
-        {item.name}
-      </Link>
-    </li>
+    <Link
+      href={item.url}
+      data-active={active}
+      className={cn(
+        // Mobile styles (default)
+        'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+        'text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground',
+        active && 'bg-fd-primary/10 font-medium text-fd-primary',
+        // Desktop styles (lg+)
+        'lg:mb-[0.0625rem] lg:block lg:rounded-md lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight',
+        'lg:text-gray-600 lg:dark:text-gray-400',
+        !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
+        active &&
+          'lg:bg-purple-50/80 lg:font-normal lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+      )}
+    >
+      {item.name}
+    </Link>
   )
 }
 
 export function SidebarFolder({ item, children }: { item: Folder; children: ReactNode }) {
   const pathname = usePathname()
   const hasActiveChild = checkHasActiveChild(item, pathname)
+  const hasChildren = item.children.length > 0
   const [open, setOpen] = useState(hasActiveChild)
 
   useEffect(() => {
     setOpen(hasActiveChild)
   }, [hasActiveChild])
 
+  const active = item.index ? isActive(item.index.url, pathname, false) : false
+
+  if (item.index && !hasChildren) {
+    return (
+      <Link
+        href={item.index.url}
+        data-active={active}
+        className={cn(
+          // Mobile styles (default)
+          'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+          'text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground',
+          active && 'bg-fd-primary/10 font-medium text-fd-primary',
+          // Desktop styles (lg+)
+          'lg:mb-[0.0625rem] lg:block lg:rounded-md lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight',
+          'lg:text-gray-600 lg:dark:text-gray-400',
+          !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
+          active &&
+            'lg:bg-purple-50/80 lg:font-normal lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+        )}
+      >
+        {item.name}
+      </Link>
+    )
+  }
+
   return (
-    <li className='mb-[0.0625rem] list-none'>
-      {item.index ? (
-        <div className='flex items-center gap-0.5'>
+    <div className='flex flex-col lg:mb-[0.0625rem]'>
+      <div className='flex w-full items-center lg:gap-0.5'>
+        {item.index ? (
           <Link
             href={item.index.url}
+            data-active={active}
             className={cn(
-              'block flex-1 rounded-md px-2.5 py-1.5 font-medium text-[13px] leading-tight transition-colors',
-              'text-gray-800 dark:text-gray-200',
-              !isActive(item.index.url, pathname, false) &&
-                'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
-              isActive(item.index.url, pathname, false) &&
-                'bg-purple-50/80 text-purple-600 dark:bg-purple-900/15 dark:text-purple-400'
+              // Mobile styles (default)
+              'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+              'text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground',
+              active && 'bg-fd-primary/10 font-medium text-fd-primary',
+              // Desktop styles (lg+)
+              'lg:block lg:flex-1 lg:rounded-md lg:px-2.5 lg:py-1.5 lg:font-medium lg:text-[13px] lg:leading-tight',
+              'lg:text-gray-800 lg:dark:text-gray-200',
+              !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
+              active &&
+                'lg:bg-purple-50/80 lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
             )}
           >
             {item.name}
           </Link>
+        ) : (
           <button
             onClick={() => setOpen(!open)}
-            className='cursor-pointer rounded p-1 transition-colors hover:bg-gray-100/60 dark:hover:bg-gray-800/40'
-            aria-label={open ? 'Collapse' : 'Expand'}
+            className={cn(
+              // Mobile styles (default)
+              'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+              'text-fd-muted-foreground hover:bg-fd-accent/50',
+              // Desktop styles (lg+)
+              'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-md lg:px-2.5 lg:py-1.5 lg:text-left lg:font-medium lg:text-[13px] lg:leading-tight',
+              'lg:text-gray-800 lg:hover:bg-gray-100/60 lg:dark:text-gray-200 lg:dark:hover:bg-gray-800/40'
+            )}
           >
+            <span>{item.name}</span>
+            {/* Desktop-only chevron for non-index folders */}
             <ChevronRight
               className={cn(
-                'h-3 w-3 text-gray-400 transition-transform duration-200 ease-in-out dark:text-gray-500',
+                'ml-auto hidden h-3 w-3 flex-shrink-0 text-gray-400 transition-transform duration-200 ease-in-out lg:block dark:text-gray-500',
                 open && 'rotate-90'
               )}
             />
           </button>
-        </div>
-      ) : (
-        <button
-          onClick={() => setOpen(!open)}
+        )}
+        {hasChildren && (
+          <button
+            onClick={() => setOpen(!open)}
+            className={cn(
+              // Mobile styles
+              'rounded p-1 hover:bg-fd-accent/50',
+              // Desktop styles
+              'lg:cursor-pointer lg:rounded lg:p-1 lg:transition-colors lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40'
+            )}
+            aria-label={open ? 'Collapse' : 'Expand'}
+          >
+            <ChevronRight
+              className={cn(
+                // Mobile styles
+                'h-4 w-4 transition-transform',
+                // Desktop styles
+                'lg:h-3 lg:w-3 lg:text-gray-400 lg:duration-200 lg:ease-in-out lg:dark:text-gray-500',
+                open && 'rotate-90'
+              )}
+            />
+          </button>
+        )}
+      </div>
+      {hasChildren && (
+        <div
           className={cn(
-            'flex w-full cursor-pointer items-center justify-between rounded-md px-2.5 py-1.5 text-left font-medium text-[13px] leading-tight transition-colors',
-            'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
-            'text-gray-800 dark:text-gray-200'
+            'overflow-hidden transition-all duration-200 ease-in-out',
+            open ? 'max-h-[10000px] opacity-100' : 'max-h-0 opacity-0'
           )}
         >
-          <span>{item.name}</span>
-          <ChevronRight
-            className={cn(
-              'ml-auto h-3 w-3 flex-shrink-0 text-gray-400 transition-transform duration-200 ease-in-out dark:text-gray-500',
-              open && 'rotate-90'
-            )}
-          />
-        </button>
+          {/* Mobile: simple indent */}
+          <div className='ml-4 flex flex-col gap-0.5 lg:hidden'>{children}</div>
+          {/* Desktop: styled with border */}
+          <ul className='mt-0.5 ml-2 hidden space-y-[0.0625rem] border-gray-200/60 border-l pl-2.5 lg:block dark:border-gray-700/60'>
+            {children}
+          </ul>
+        </div>
       )}
-      <div
-        className={cn(
-          'overflow-hidden transition-all duration-200 ease-in-out',
-          open ? 'max-h-[10000px] opacity-100' : 'max-h-0 opacity-0'
-        )}
-      >
-        <ul className='mt-0.5 ml-2 space-y-[0.0625rem] border-gray-200/60 border-l pl-2.5 dark:border-gray-700/60'>
-          {children}
-        </ul>
-      </div>
-    </li>
+    </div>
   )
 }
 
 export function SidebarSeparator({ item }: { item: Separator }) {
   return (
-    <p className='mt-4 mb-1.5 px-2.5 font-semibold text-[10px] text-gray-500/80 uppercase tracking-wide dark:text-gray-500'>
+    <p
+      className={cn(
+        // Mobile styles
+        'mt-4 mb-2 px-2 font-medium text-fd-muted-foreground text-xs',
+        // Desktop styles
+        'lg:mt-4 lg:mb-1.5 lg:px-2.5 lg:font-semibold lg:text-[10px] lg:text-gray-500/80 lg:uppercase lg:tracking-wide lg:dark:text-gray-500'
+      )}
+    >
       {item.name}
     </p>
   )