fix: mobile sidebar (#6760)

* fix: mobile sidebar * fix(web): prevent iOS sidebar taps from being swallowed

fix: mobile sidebar (#6760)
* fix: mobile sidebar * fix(web): prevent iOS sidebar taps from being swallowed
4eaeefbd · Seefs · GitHub · bb234ff4 · 4eaeefbd · 4eaeefbd
Commit 4eaeefbd authored Aug 11, 2026 by Seefs Committed by GitHub Aug 11, 2026
4 changed files
--- a/web/src/components/layout/components/chat-presets-item.tsx
+++ b/web/src/components/layout/components/chat-presets-item.tsx
@@ -61,12 +61,14 @@ function ChatMenuItem({
  loading,
  onOpen,
  onNavigate,
+  preload,
 }: {
  preset: ChatPreset
  active: boolean
  loading: boolean
  onOpen: (preset: ChatPreset) => void | Promise<void>
  onNavigate: () => void
+  preload?: false
 }) {
  if (preset.type === 'web') {
    return (
@@ -77,6 +79,7 @@ function ChatMenuItem({
            <Link
              to='/chat/$chatId'
              params={{ chatId: preset.id }}
+              preload={preload}
              onClick={onNavigate}
            />
          }
@@ -277,6 +280,7 @@ export function ChatPresetsItem({ item }: { item: NavChatPresets }) {
              loading={loadingPresetId === preset.id}
              onOpen={handleOpenExternal}
              onNavigate={() => setOpenMobile(false)}
+              preload={isMobile ? false : undefined}
            />
          ))}
        </SidebarMenuSub>

--- a/web/src/components/layout/components/nav-group.tsx
+++ b/web/src/components/layout/components/nav-group.tsx
@@ -48,11 +48,11 @@ import {
 } from '@/components/ui/sidebar'
 import { checkIsActive } from '../lib/url-utils'
-import {
+import type {
-  type NavCollapsible,
+  NavCollapsible,
-  type NavChatPresets,
+  NavChatPresets,
-  type NavLink,
+  NavLink,
-  type NavGroup as NavGroupProps,
+  NavGroup as NavGroupProps,
 } from '../types'
 import { ChatPresetsItem } from './chat-presets-item'
@@ -121,13 +121,19 @@ function NavBadge({ children }: { children: ReactNode }) {
 * Sidebar menu link item
 */
 function SidebarMenuLink({ item, href }: { item: NavLink; href: string }) {
-  const { setOpenMobile } = useSidebar()
+  const { isMobile, setOpenMobile } = useSidebar()
  return (
    <SidebarMenuItem>
      <SidebarMenuButton
        isActive={checkIsActive(href, item)}
        tooltip={item.title}
-        render={<Link to={item.url} onClick={() => setOpenMobile(false)} />}
+        render={
+          <Link
+            to={item.url}
+            preload={isMobile ? false : undefined}
+            onClick={() => setOpenMobile(false)}
+          />
+        }
      >
        {item.icon && <item.icon className='shrink-0' />}
        <span className='min-w-0 flex-1 truncate'>{item.title}</span>
@@ -147,7 +153,7 @@ function SidebarMenuCollapsible({
  item: NavCollapsible
  href: string
 }) {
-  const { setOpenMobile } = useSidebar()
+  const { isMobile, setOpenMobile } = useSidebar()
  // 检查当前路径是否匹配子菜单项
  const isSubItemActive = checkIsActive(href, item)
  // 使用受控状态，初始值基于当前路径是否匹配
@@ -184,7 +190,11 @@ function SidebarMenuCollapsible({
              <SidebarMenuSubButton
                isActive={checkIsActive(href, subItem)}
                render={
-                  <Link to={subItem.url} onClick={() => setOpenMobile(false)} />
+                  <Link
+                    to={subItem.url}
+                    preload={isMobile ? false : undefined}
+                    onClick={() => setOpenMobile(false)}
+                  />
                }
              >
                {subItem.icon && <subItem.icon className='shrink-0' />}

--- a/web/src/components/layout/components/sidebar-view-header.tsx
+++ b/web/src/components/layout/components/sidebar-view-header.tsx
@@ -43,7 +43,7 @@ type SidebarViewHeaderProps = {
 */
 export function SidebarViewHeader(props: SidebarViewHeaderProps) {
  const { t } = useTranslation()
-  const { setOpenMobile } = useSidebar()
+  const { isMobile, setOpenMobile } = useSidebar()
  return (
    <SidebarHeader className='border-sidebar-border border-b px-2 py-2'>
@@ -58,6 +58,7 @@ export function SidebarViewHeader(props: SidebarViewHeaderProps) {
            render={
              <Link
                to={props.view.parent.to}
+                preload={isMobile ? false : undefined}
                onClick={() => setOpenMobile(false)}
              />
            }

--- a/web/src/components/ui/sidebar.tsx
+++ b/web/src/components/ui/sidebar.tsx
@@ -207,7 +207,7 @@ function Sidebar({
          data-sidebar='sidebar'
          data-slot='sidebar'
          data-mobile='true'
-          className='bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden'
+          className='bg-sidebar text-sidebar-foreground pointer-events-auto z-60 w-(--sidebar-width) p-0 [&>button]:hidden'
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
@@ -530,6 +530,7 @@ function SidebarMenuButton({
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>) {
  const { isMobile, state } = useSidebar()
+  const tooltipEnabled = Boolean(tooltip) && !isMobile && state === 'collapsed'
  const comp = useRender({
    defaultTagName: 'button',
    props: mergeProps<'button'>(
@@ -538,7 +539,7 @@ function SidebarMenuButton({
      },
      props
    ),
-    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    render: tooltipEnabled ? <TooltipTrigger render={render} /> : render,
    state: {
      slot: 'sidebar-menu-button',
      sidebar: 'menu-button',
@@ -547,7 +548,7 @@ function SidebarMenuButton({
    },
  })
-  if (!tooltip) {
+  if (!tooltipEnabled || !tooltip) {
    return comp
  }
@@ -561,12 +562,7 @@ function SidebarMenuButton({
    <TooltipProvider delay={0}>
      <Tooltip>
        {comp}
-        <TooltipContent
+        <TooltipContent side='right' align='center' {...tooltip} />
-          side='right'
-          align='center'
-          hidden={state !== 'collapsed' || isMobile}
-          {...tooltip}
-        />
      </Tooltip>
    </TooltipProvider>
  )