From b0dee6d3faa2636c9511e805dbfeaa2a85876ddf Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Thu, 2 Apr 2026 14:58:42 +0200
Subject: [PATCH 1/8] fix(ChannelHeader): hide toggle sidebar button when no
 ChannelList is rendered

The expand button in ChannelHeader is pointless when there is no
ChannelList in the component tree. Use the existing ChannelListContext
to detect whether a ChannelList is present and conditionally render
the button.
---
 src/components/Button/ToggleSidebarButton.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/ToggleSidebarButton.tsx b/src/components/Button/ToggleSidebarButton.tsx
index 6f44eccbae..707b0628e1 100644
--- a/src/components/Button/ToggleSidebarButton.tsx
+++ b/src/components/Button/ToggleSidebarButton.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import { useIsMobileViewport } from '../ChannelHeader/hooks/useIsMobileViewport';
-import { useChatContext, useTranslationContext } from '../../context';
+import {
+  useChannelListContext,
+  useChatContext,
+  useTranslationContext,
+} from '../../context';
 import { Button, type ButtonProps } from './Button';
 
 type ToggleSidebarButtonProps = ButtonProps & {
@@ -19,7 +23,12 @@ export const ToggleSidebarButton = ({
   const { t } = useTranslationContext('ChannelHeader');
   const toggleNav = navOpen ? closeMobileNav : openMobileNav;
   const isMobileViewport = useIsMobileViewport();
-  const showButton = mode === 'expand' ? isMobileViewport || !navOpen : canCollapse;
+
+  const { channels } = useChannelListContext();
+  const hasChannelList = !!channels;
+
+  const sidebarCanExpand = hasChannelList && (isMobileViewport || !navOpen);
+  const showButton = mode === 'expand' ? sidebarCanExpand : !!canCollapse;
 
   return showButton ? (
     <Button

From eb6cd45b3a666c03f4916be63141d5851f91d805 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Thu, 2 Apr 2026 15:08:41 +0200
Subject: [PATCH 2/8] test(ChannelHeader): add tests for toggle sidebar button
 visibility

Verify the button is hidden without ChannelList and shown with it.
Update existing tests to provide ChannelListContext where needed.
---
 .../__tests__/ChannelHeader.test.tsx          | 56 ++++++++++++++++---
 1 file changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx b/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
index 5f9dd6d0ed..a5d63ee8b7 100644
--- a/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
+++ b/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
@@ -16,6 +16,7 @@ import {
   getOrCreateChannelApi,
   getTestClientWithUser,
   initClientWithChannels,
+  mockChannelListContext,
   mockChannelStateContext,
   mockChatContext,
   mockTranslationContextValue,
@@ -30,6 +31,7 @@ import type {
   StreamChat,
   UserResponse,
 } from 'stream-chat';
+import { ChannelListContextProvider } from '../../../context/ChannelListContext';
 import type { ChannelHeaderProps } from '../ChannelHeader';
 import type { GenerateChannelOptions } from '../../../mock-builders/generator/channel';
 
@@ -180,20 +182,58 @@ describe('ChannelHeader', () => {
     });
   });
 
-  it('should render the sidebar toggle button when sidebar is collapsed', async () => {
+  it('should not render the sidebar toggle button when no ChannelList is rendered', async () => {
     const { container } = await renderComponent();
-    // The ToggleSidebarButton renders when navOpen is falsy (not provided in mock context)
-    // or when on mobile viewport. In jsdom it sees !navOpen so the button shows.
+    const toggleButton = container.querySelector('.str-chat__header-sidebar-toggle');
+    expect(toggleButton).not.toBeInTheDocument();
+  });
+
+  it('should render the sidebar toggle button when ChannelList is rendered and sidebar is collapsed', async () => {
+    client = await getTestClientWithUser(user1);
+    testChannel1 = generateChannel({ ...defaultChannelState });
+    useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
+    const channel = client.channel('messaging', testChannel1.channel.id);
+    await channel.query();
+
+    const { container } = render(
+      <ChatProvider value={mockChatContext({ channel, client })}>
+        <ChannelListContextProvider
+          value={mockChannelListContext({ channels: [channel] })}
+        >
+          <ChannelStateProvider value={mockChannelStateContext({ channel })}>
+            <TranslationProvider value={mockTranslationContextValue({ t })}>
+              <ChannelHeader />
+            </TranslationProvider>
+          </ChannelStateProvider>
+        </ChannelListContextProvider>
+      </ChatProvider>,
+    );
+
     const toggleButton = container.querySelector('.str-chat__header-sidebar-toggle');
     expect(toggleButton).toBeInTheDocument();
   });
 
   it('should display custom menu icon', async () => {
-    const { container } = await renderComponent({
-      props: {
-        MenuIcon: CustomMenuIcon,
-      },
-    });
+    client = await getTestClientWithUser(user1);
+    testChannel1 = generateChannel({ ...defaultChannelState });
+    useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
+    const channel = client.channel('messaging', testChannel1.channel.id);
+    await channel.query();
+
+    const { container } = render(
+      <ChatProvider value={mockChatContext({ channel, client })}>
+        <ChannelListContextProvider
+          value={mockChannelListContext({ channels: [channel] })}
+        >
+          <ChannelStateProvider value={mockChannelStateContext({ channel })}>
+            <TranslationProvider value={mockTranslationContextValue({ t })}>
+              <ChannelHeader MenuIcon={CustomMenuIcon} />
+            </TranslationProvider>
+          </ChannelStateProvider>
+        </ChannelListContextProvider>
+      </ChatProvider>,
+    );
+
     expect(container.querySelector('div#custom-icon')).toBeInTheDocument();
   });
 

From 968e6f220251c8f1e61876d7d4275a7575c15315 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Fri, 3 Apr 2026 11:34:36 +0200
Subject: [PATCH 3/8] feat(ChannelHeader): make sidebar toggle an
 externally-provided component

Remove ToggleSidebarButton from the SDK and replace it with a
SidebarToggle slot in ComponentContext. Apps provide their own toggle
component via WithComponents; the SDK renders it in the appropriate
header slots with conditional visibility:

- ChannelHeader/ThreadHeader: render when sidebar is collapsed
- ChannelListHeader: render when a channel is active
- ThreadListHeader: render when a thread is active

Also removes IconSidebar (moved to vite example), MenuIcon prop
from ChannelHeader/ThreadHeader, and ToggleButtonIcon prop from
ChannelListHeader/ThreadListHeader.
---
 examples/vite/src/App.tsx                     |  35 ++++++
 src/components/Button/ToggleSidebarButton.tsx |  45 --------
 .../ChannelHeader/ChannelHeader.tsx           |  17 +--
 .../__tests__/ChannelHeader.test.tsx          | 102 +++++++++---------
 .../ChannelList/ChannelListHeader.tsx         |  23 ++--
 .../__tests__/ChannelListHeader.test.tsx      |  53 +++++++++
 src/components/Icons/icons.tsx                |  13 ---
 src/components/Thread/ThreadHeader.tsx        |  16 ++-
 .../Thread/__tests__/ThreadHeader.test.tsx    |  32 ------
 .../Threads/ThreadList/ThreadListHeader.tsx   |  23 ++--
 .../__tests__/ThreadListHeader.test.tsx       |  71 ++++++++++++
 src/context/ComponentContext.tsx              |   2 +
 12 files changed, 238 insertions(+), 194 deletions(-)
 delete mode 100644 src/components/Button/ToggleSidebarButton.tsx
 create mode 100644 src/components/ChannelList/__tests__/ChannelListHeader.test.tsx
 create mode 100644 src/components/Threads/ThreadList/__tests__/ThreadListHeader.test.tsx

diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
index 35ae6300d5..131425b0ee 100644
--- a/examples/vite/src/App.tsx
+++ b/examples/vite/src/App.tsx
@@ -16,8 +16,10 @@ import {
 import {
   Attachment,
   type AttachmentProps,
+  Button,
   Chat,
   ChatView,
+  createIcon,
   MessageReactions,
   type NotificationListProps,
   NotificationList,
@@ -26,7 +28,9 @@ import {
   defaultReactionOptions,
   type ReactionOptions,
   mapEmojiMartData,
+  useChatContext,
   useCreateChatClient,
+  useTranslationContext,
   Search,
 } from 'stream-chat-react';
 import { createTextComposerEmojiMiddleware, EmojiPicker } from 'stream-chat-react/emojis';
@@ -162,6 +166,36 @@ const ConfigurableNotificationList = (props: NotificationListProps) => {
   return <NotificationList {...props} verticalAlignment={verticalAlignment} />;
 };
 
+const IconSidebar = createIcon(
+  'IconSidebar',
+  <path
+    d='M6.875 3.75V16.25M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z'
+    fill='none'
+    stroke='currentColor'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+    strokeWidth='1.5'
+  />,
+);
+
+const SidebarToggle = () => {
+  const { closeMobileNav, navOpen, openMobileNav } = useChatContext();
+  const { t } = useTranslationContext();
+  return (
+    <Button
+      appearance='ghost'
+      aria-label={navOpen ? t('aria/Collapse sidebar') : t('aria/Expand sidebar')}
+      circular
+      className='str-chat__header-sidebar-toggle'
+      onClick={navOpen ? closeMobileNav : openMobileNav}
+      size='md'
+      variant='secondary'
+    >
+      <IconSidebar />
+    </Button>
+  );
+};
+
 const language = new URLSearchParams(window.location.search).get('language');
 const i18nInstance = language ? new Streami18n({ language: language as any }) : undefined;
 
@@ -358,6 +392,7 @@ const App = () => {
         MessageReactions: CustomMessageReactions,
         reactionOptions: newReactionOptions,
         Search: CustomChannelSearch,
+        SidebarToggle,
         ...messageUiOverrides,
       }}
     >
diff --git a/src/components/Button/ToggleSidebarButton.tsx b/src/components/Button/ToggleSidebarButton.tsx
deleted file mode 100644
index 707b0628e1..0000000000
--- a/src/components/Button/ToggleSidebarButton.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { useIsMobileViewport } from '../ChannelHeader/hooks/useIsMobileViewport';
-import {
-  useChannelListContext,
-  useChatContext,
-  useTranslationContext,
-} from '../../context';
-import { Button, type ButtonProps } from './Button';
-
-type ToggleSidebarButtonProps = ButtonProps & {
-  /** expand mode is usually assigned to button, whose task is to show the sidebar, and collapse vice versa */
-  mode: 'expand' | 'collapse';
-  /** usually can collapse if an item from sidebar was selected */
-  canCollapse?: boolean;
-};
-
-export const ToggleSidebarButton = ({
-  canCollapse,
-  mode,
-  ...props
-}: ToggleSidebarButtonProps) => {
-  const { closeMobileNav, navOpen, openMobileNav } = useChatContext('ChannelHeader');
-  const { t } = useTranslationContext('ChannelHeader');
-  const toggleNav = navOpen ? closeMobileNav : openMobileNav;
-  const isMobileViewport = useIsMobileViewport();
-
-  const { channels } = useChannelListContext();
-  const hasChannelList = !!channels;
-
-  const sidebarCanExpand = hasChannelList && (isMobileViewport || !navOpen);
-  const showButton = mode === 'expand' ? sidebarCanExpand : !!canCollapse;
-
-  return showButton ? (
-    <Button
-      appearance='ghost'
-      aria-label={navOpen ? t('aria/Collapse sidebar') : t('aria/Expand sidebar')}
-      circular
-      className='str-chat__header-sidebar-toggle'
-      onClick={toggleNav}
-      size='md'
-      variant='secondary'
-      {...props}
-    />
-  ) : null;
-};
diff --git a/src/components/ChannelHeader/ChannelHeader.tsx b/src/components/ChannelHeader/ChannelHeader.tsx
index 9b41699927..3d7be9b342 100644
--- a/src/components/ChannelHeader/ChannelHeader.tsx
+++ b/src/components/ChannelHeader/ChannelHeader.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
 
-import { IconSidebar } from '../Icons/icons';
 import { type ChannelAvatarProps, ChannelAvatar as DefaultAvatar } from '../Avatar';
 import { TypingIndicatorHeader } from '../TypingIndicator/TypingIndicatorHeader';
 import { useChannelHeaderOnlineStatus } from './hooks/useChannelHeaderOnlineStatus';
 import { useChannelPreviewInfo } from '../ChannelListItem/hooks/useChannelPreviewInfo';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
+import { useComponentContext } from '../../context/ComponentContext';
 import { useTypingContext } from '../../context/TypingContext';
 import clsx from 'clsx';
-import { ToggleSidebarButton } from '../Button/ToggleSidebarButton';
 
 const ChannelHeaderSubtitle = () => {
   const { channelConfig } = useChannelStateContext('ChannelHeaderSubtitle');
@@ -40,8 +39,6 @@ export type ChannelHeaderProps = {
   Avatar?: React.ComponentType<ChannelAvatarProps>;
   /** Manually set the image to render, defaults to the Channel image */
   image?: string;
-  /** UI component to display menu icon, defaults to IconSidebar*/
-  MenuIcon?: React.ComponentType;
   /** Set title manually */
   title?: string;
 };
@@ -50,15 +47,11 @@ export type ChannelHeaderProps = {
  * The ChannelHeader component renders some basic information about a Channel.
  */
 export const ChannelHeader = (props: ChannelHeaderProps) => {
-  const {
-    Avatar = DefaultAvatar,
-    image: overrideImage,
-    MenuIcon = IconSidebar,
-    title: overrideTitle,
-  } = props;
+  const { Avatar = DefaultAvatar, image: overrideImage, title: overrideTitle } = props;
 
   const { channel } = useChannelStateContext();
   const { navOpen } = useChatContext();
+  const { SidebarToggle } = useComponentContext();
   const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
     channel,
     overrideImage,
@@ -72,9 +65,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
       })}
     >
       <div className='str-chat__channel-header__start'>
-        <ToggleSidebarButton mode='expand'>
-          <MenuIcon />
-        </ToggleSidebarButton>
+        {!navOpen && SidebarToggle && <SidebarToggle />}
       </div>
       <div className='str-chat__channel-header__data'>
         <div className='str-chat__channel-header__data__title'>{displayTitle}</div>
diff --git a/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx b/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
index a5d63ee8b7..f5cb8c11af 100644
--- a/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
+++ b/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
@@ -6,6 +6,7 @@ import { ChannelHeader } from '../ChannelHeader';
 
 import { ChannelStateProvider } from '../../../context/ChannelStateContext';
 import { ChatProvider } from '../../../context/ChatContext';
+import { WithComponents } from '../../../context/WithComponents';
 import { TranslationProvider } from '../../../context/TranslationContext';
 import {
   dispatchUserUpdatedEvent,
@@ -16,7 +17,6 @@ import {
   getOrCreateChannelApi,
   getTestClientWithUser,
   initClientWithChannels,
-  mockChannelListContext,
   mockChannelStateContext,
   mockChatContext,
   mockTranslationContextValue,
@@ -31,7 +31,6 @@ import type {
   StreamChat,
   UserResponse,
 } from 'stream-chat';
-import { ChannelListContextProvider } from '../../../context/ChannelListContext';
 import type { ChannelHeaderProps } from '../ChannelHeader';
 import type { GenerateChannelOptions } from '../../../mock-builders/generator/channel';
 
@@ -42,7 +41,6 @@ const user2 = generateUser({ image: null });
 let testChannel1: ChannelAPIResponse;
 let client: StreamChat;
 
-const CustomMenuIcon = () => <div id='custom-icon'>Custom Menu Icon</div>;
 const defaultChannelState = {
   members: [generateMember({ user: user1 }), generateMember({ user: user2 })],
 };
@@ -182,59 +180,57 @@ describe('ChannelHeader', () => {
     });
   });
 
-  it('should not render the sidebar toggle button when no ChannelList is rendered', async () => {
-    const { container } = await renderComponent();
-    const toggleButton = container.querySelector('.str-chat__header-sidebar-toggle');
-    expect(toggleButton).not.toBeInTheDocument();
-  });
-
-  it('should render the sidebar toggle button when ChannelList is rendered and sidebar is collapsed', async () => {
-    client = await getTestClientWithUser(user1);
-    testChannel1 = generateChannel({ ...defaultChannelState });
-    useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
-    const channel = client.channel('messaging', testChannel1.channel.id);
-    await channel.query();
-
-    const { container } = render(
-      <ChatProvider value={mockChatContext({ channel, client })}>
-        <ChannelListContextProvider
-          value={mockChannelListContext({ channels: [channel] })}
-        >
-          <ChannelStateProvider value={mockChannelStateContext({ channel })}>
-            <TranslationProvider value={mockTranslationContextValue({ t })}>
-              <ChannelHeader />
-            </TranslationProvider>
-          </ChannelStateProvider>
-        </ChannelListContextProvider>
-      </ChatProvider>,
-    );
+  describe('SidebarToggle slot', () => {
+    const SidebarToggle = () => <div data-testid='sidebar-toggle' />;
 
-    const toggleButton = container.querySelector('.str-chat__header-sidebar-toggle');
-    expect(toggleButton).toBeInTheDocument();
-  });
+    it('should not render SidebarToggle when not provided via ComponentContext', async () => {
+      await renderComponent();
+      expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
+    });
 
-  it('should display custom menu icon', async () => {
-    client = await getTestClientWithUser(user1);
-    testChannel1 = generateChannel({ ...defaultChannelState });
-    useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
-    const channel = client.channel('messaging', testChannel1.channel.id);
-    await channel.query();
-
-    const { container } = render(
-      <ChatProvider value={mockChatContext({ channel, client })}>
-        <ChannelListContextProvider
-          value={mockChannelListContext({ channels: [channel] })}
-        >
-          <ChannelStateProvider value={mockChannelStateContext({ channel })}>
-            <TranslationProvider value={mockTranslationContextValue({ t })}>
-              <ChannelHeader MenuIcon={CustomMenuIcon} />
-            </TranslationProvider>
-          </ChannelStateProvider>
-        </ChannelListContextProvider>
-      </ChatProvider>,
-    );
+    it('should render SidebarToggle when navOpen is false', async () => {
+      client = await getTestClientWithUser(user1);
+      testChannel1 = generateChannel({ ...defaultChannelState });
+      useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
+      const channel = client.channel('messaging', testChannel1.channel.id);
+      await channel.query();
+
+      render(
+        <WithComponents overrides={{ SidebarToggle }}>
+          <ChatProvider value={mockChatContext({ channel, client, navOpen: false })}>
+            <ChannelStateProvider value={mockChannelStateContext({ channel })}>
+              <TranslationProvider value={mockTranslationContextValue({ t })}>
+                <ChannelHeader />
+              </TranslationProvider>
+            </ChannelStateProvider>
+          </ChatProvider>
+        </WithComponents>,
+      );
+
+      expect(screen.getByTestId('sidebar-toggle')).toBeInTheDocument();
+    });
 
-    expect(container.querySelector('div#custom-icon')).toBeInTheDocument();
+    it('should not render SidebarToggle when navOpen is true', async () => {
+      client = await getTestClientWithUser(user1);
+      testChannel1 = generateChannel({ ...defaultChannelState });
+      useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
+      const channel = client.channel('messaging', testChannel1.channel.id);
+      await channel.query();
+
+      render(
+        <WithComponents overrides={{ SidebarToggle }}>
+          <ChatProvider value={mockChatContext({ channel, client, navOpen: true })}>
+            <ChannelStateProvider value={mockChannelStateContext({ channel })}>
+              <TranslationProvider value={mockTranslationContextValue({ t })}>
+                <ChannelHeader />
+              </TranslationProvider>
+            </ChannelStateProvider>
+          </ChatProvider>
+        </WithComponents>,
+      );
+
+      expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
+    });
   });
 
   it("DM channel should reflect change of other user's name", async () => {
diff --git a/src/components/ChannelList/ChannelListHeader.tsx b/src/components/ChannelList/ChannelListHeader.tsx
index 9d80af4e47..3e6725f07e 100644
--- a/src/components/ChannelList/ChannelListHeader.tsx
+++ b/src/components/ChannelList/ChannelListHeader.tsx
@@ -1,18 +1,15 @@
-import React, { type ComponentType } from 'react';
+import React from 'react';
 import clsx from 'clsx';
-import { useChatContext, useTranslationContext } from '../../context';
-import { IconSidebar } from '../Icons';
-import { ToggleSidebarButton } from '../Button/ToggleSidebarButton';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../context';
 
-export type ChannelListHeaderProps = {
-  ToggleButtonIcon?: ComponentType;
-};
-
-export const ChannelListHeader = ({
-  ToggleButtonIcon = IconSidebar,
-}: ChannelListHeaderProps) => {
+export const ChannelListHeader = () => {
   const { t } = useTranslationContext();
   const { channel, navOpen } = useChatContext();
+  const { SidebarToggle } = useComponentContext();
   return (
     <div
       className={clsx('str-chat__channel-list__header', {
@@ -20,9 +17,7 @@ export const ChannelListHeader = ({
       })}
     >
       <div className='str-chat__channel-list__header__title'>{t('Chats')}</div>
-      <ToggleSidebarButton canCollapse={!!channel} mode={'collapse'}>
-        <ToggleButtonIcon />
-      </ToggleSidebarButton>
+      {channel && SidebarToggle && <SidebarToggle />}
     </div>
   );
 };
diff --git a/src/components/ChannelList/__tests__/ChannelListHeader.test.tsx b/src/components/ChannelList/__tests__/ChannelListHeader.test.tsx
new file mode 100644
index 0000000000..c0c40b1e47
--- /dev/null
+++ b/src/components/ChannelList/__tests__/ChannelListHeader.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import { ChatProvider, WithComponents } from '../../../context';
+import { TranslationProvider } from '../../../context/TranslationContext';
+import { mockChatContext, mockTranslationContextValue } from '../../../mock-builders';
+import { ChannelListHeader } from '../ChannelListHeader';
+
+const t = vi.fn((key: string) => key);
+const SidebarToggle = () => <div data-testid='sidebar-toggle' />;
+
+afterEach(cleanup);
+
+describe('ChannelListHeader', () => {
+  it('should not render SidebarToggle when not provided via ComponentContext', () => {
+    render(
+      <ChatProvider value={mockChatContext()}>
+        <TranslationProvider value={mockTranslationContextValue({ t })}>
+          <ChannelListHeader />
+        </TranslationProvider>
+      </ChatProvider>,
+    );
+
+    expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
+  });
+
+  it('should render SidebarToggle when a channel is active', () => {
+    render(
+      <WithComponents overrides={{ SidebarToggle }}>
+        <ChatProvider value={mockChatContext({ channel: {} })}>
+          <TranslationProvider value={mockTranslationContextValue({ t })}>
+            <ChannelListHeader />
+          </TranslationProvider>
+        </ChatProvider>
+      </WithComponents>,
+    );
+
+    expect(screen.getByTestId('sidebar-toggle')).toBeInTheDocument();
+  });
+
+  it('should not render SidebarToggle when no channel is active', () => {
+    render(
+      <WithComponents overrides={{ SidebarToggle }}>
+        <ChatProvider value={mockChatContext({ channel: undefined })}>
+          <TranslationProvider value={mockTranslationContextValue({ t })}>
+            <ChannelListHeader />
+          </TranslationProvider>
+        </ChatProvider>
+      </WithComponents>,
+    );
+
+    expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/Icons/icons.tsx b/src/components/Icons/icons.tsx
index 2ab77a1dca..7373281cf6 100644
--- a/src/components/Icons/icons.tsx
+++ b/src/components/Icons/icons.tsx
@@ -573,19 +573,6 @@ export const IconImage = createIcon(
   />,
 );
 
-// was: IconLayoutAlignLeft
-export const IconSidebar = createIcon(
-  'IconSidebar',
-  <path
-    d='M6.875 3.75V16.25M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z'
-    fill='none'
-    stroke='currentColor'
-    strokeLinecap='round'
-    strokeLinejoin='round'
-    strokeWidth='1.5'
-  />,
-);
-
 // was: IconMagnifyingGlassSearch
 export const IconSearch = createIcon(
   'IconSearch',
diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx
index ed82a8803e..c88e717dce 100644
--- a/src/components/Thread/ThreadHeader.tsx
+++ b/src/components/Thread/ThreadHeader.tsx
@@ -7,13 +7,13 @@ import { useChannelPreviewInfo } from '../ChannelListItem/hooks/useChannelPrevie
 import { TypingIndicatorHeader } from '../TypingIndicator/TypingIndicatorHeader';
 import { useThreadContext } from '../Threads';
 import { useChatContext } from '../../context/ChatContext';
+import { useComponentContext } from '../../context/ComponentContext';
 import { useTypingContext } from '../../context/TypingContext';
 
 import type { LocalMessage } from 'stream-chat';
 import type { ThreadState } from 'stream-chat';
 import { Button } from '../Button';
-import { IconSidebar, IconXmark } from '../Icons';
-import { ToggleSidebarButton } from '../Button/ToggleSidebarButton';
+import { IconXmark } from '../Icons';
 import { useChatViewContext } from '../ChatView';
 
 const threadStateSelector = ({ replyCount }: ThreadState) => ({ replyCount });
@@ -67,17 +67,17 @@ export type ThreadHeaderProps = {
   closeThread: (event?: React.BaseSyntheticEvent) => void;
   /** The thread parent message */
   thread: LocalMessage;
-  /** UI component to display menu icon, defaults to IconSidebar*/
-  MenuIcon?: React.ComponentType;
   /** Override the thread display title */
   overrideTitle?: string;
 };
 
 export const ThreadHeader = (props: ThreadHeaderProps) => {
-  const { closeThread, MenuIcon = IconSidebar, overrideTitle, thread } = props;
+  const { closeThread, overrideTitle, thread } = props;
 
   const { t } = useTranslationContext();
   const { channel } = useChannelStateContext();
+  const { navOpen } = useChatContext('ThreadHeader');
+  const { SidebarToggle } = useComponentContext();
   const { activeChatView } = useChatViewContext();
   const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
 
@@ -101,11 +101,7 @@ export const ThreadHeader = (props: ThreadHeaderProps) => {
   return (
     <div className='str-chat__thread-header'>
       <div className='str-chat__thread-header__start'>
-        {activeChatView === 'threads' && (
-          <ToggleSidebarButton canCollapse={!!threadInstance} mode='expand'>
-            <MenuIcon />
-          </ToggleSidebarButton>
-        )}
+        {activeChatView === 'threads' && !navOpen && SidebarToggle && <SidebarToggle />}
       </div>
       <div className='str-chat__thread-header-details'>
         <div className='str-chat__thread-header-title'>{t('Thread')}</div>
diff --git a/src/components/Thread/__tests__/ThreadHeader.test.tsx b/src/components/Thread/__tests__/ThreadHeader.test.tsx
index 52ac00f23a..f5be05bbb2 100644
--- a/src/components/Thread/__tests__/ThreadHeader.test.tsx
+++ b/src/components/Thread/__tests__/ThreadHeader.test.tsx
@@ -27,12 +27,6 @@ vi.mock('../../TypingIndicator/TypingIndicatorHeader', () => ({
   TypingIndicatorHeader: () => <div>Typing...</div>,
 }));
 
-vi.mock('../../Button/ToggleSidebarButton', () => ({
-  ToggleSidebarButton: ({ children }) => (
-    <div data-testid='toggle-sidebar-button'>{children}</div>
-  ),
-}));
-
 vi.mock('../../Threads', () => ({
   useThreadContext: vi.fn(() => undefined),
 }));
@@ -181,30 +175,4 @@ describe('ThreadHeader', () => {
     expect(screen.getByText('2 replies')).toBeInTheDocument();
     expect(screen.queryByText(/^undefined ·/)).not.toBeInTheDocument();
   });
-
-  it('does not render the sidebar toggle in the channels view', () => {
-    vi.mocked(useChannelPreviewInfo).mockReturnValue(
-      fromPartial({ displayTitle: 'Bob' }),
-    );
-
-    renderComponent({
-      activeChatView: 'channels',
-      threadContext: { id: 'thread-1' },
-    });
-
-    expect(screen.queryByTestId('toggle-sidebar-button')).not.toBeInTheDocument();
-  });
-
-  it('renders the sidebar toggle in the threads view', () => {
-    vi.mocked(useChannelPreviewInfo).mockReturnValue(
-      fromPartial({ displayTitle: 'Bob' }),
-    );
-
-    renderComponent({
-      activeChatView: 'threads',
-      threadContext: { id: 'thread-1' },
-    });
-
-    expect(screen.getByTestId('toggle-sidebar-button')).toBeInTheDocument();
-  });
 });
diff --git a/src/components/Threads/ThreadList/ThreadListHeader.tsx b/src/components/Threads/ThreadList/ThreadListHeader.tsx
index 14f3eb7587..89cc451220 100644
--- a/src/components/Threads/ThreadList/ThreadListHeader.tsx
+++ b/src/components/Threads/ThreadList/ThreadListHeader.tsx
@@ -1,19 +1,16 @@
-import React, { type ComponentType } from 'react';
+import React from 'react';
 import clsx from 'clsx';
-import { useChatContext, useTranslationContext } from '../../../context';
-import { IconSidebar } from '../../Icons';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../../context';
 import { useThreadsViewContext } from '../../ChatView';
-import { ToggleSidebarButton } from '../../Button/ToggleSidebarButton';
 
-export type ChannelListHeaderProps = {
-  ToggleButtonIcon?: ComponentType;
-};
-
-export const ThreadListHeader = ({
-  ToggleButtonIcon = IconSidebar,
-}: ChannelListHeaderProps) => {
+export const ThreadListHeader = () => {
   const { t } = useTranslationContext();
   const { navOpen } = useChatContext();
+  const { SidebarToggle } = useComponentContext();
   const { activeThread } = useThreadsViewContext();
   return (
     <div
@@ -22,9 +19,7 @@ export const ThreadListHeader = ({
       })}
     >
       <div className='str-chat__thread-list__header__title'>{t('Threads')}</div>
-      <ToggleSidebarButton canCollapse={!!activeThread} mode={'collapse'}>
-        <ToggleButtonIcon />
-      </ToggleSidebarButton>
+      {activeThread && SidebarToggle && <SidebarToggle />}
     </div>
   );
 };
diff --git a/src/components/Threads/ThreadList/__tests__/ThreadListHeader.test.tsx b/src/components/Threads/ThreadList/__tests__/ThreadListHeader.test.tsx
new file mode 100644
index 0000000000..3aadebfcce
--- /dev/null
+++ b/src/components/Threads/ThreadList/__tests__/ThreadListHeader.test.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { Thread } from 'stream-chat';
+import { ChatProvider, WithComponents } from '../../../../context';
+import { TranslationProvider } from '../../../../context/TranslationContext';
+import { mockChatContext, mockTranslationContextValue } from '../../../../mock-builders';
+import { ThreadListHeader } from '../ThreadListHeader';
+
+vi.mock('../../../ChatView', () => ({
+  useThreadsViewContext: vi.fn(() => ({ activeThread: undefined })),
+}));
+
+import { useThreadsViewContext } from '../../../ChatView';
+
+const t = vi.fn((key: string) => key);
+const SidebarToggle = () => <div data-testid='sidebar-toggle' />;
+
+afterEach(cleanup);
+
+describe('ThreadListHeader', () => {
+  it('should not render SidebarToggle when not provided via ComponentContext', () => {
+    render(
+      <ChatProvider value={mockChatContext()}>
+        <TranslationProvider value={mockTranslationContextValue({ t })}>
+          <ThreadListHeader />
+        </TranslationProvider>
+      </ChatProvider>,
+    );
+
+    expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
+  });
+
+  it('should render SidebarToggle when a thread is active', () => {
+    vi.mocked(useThreadsViewContext).mockReturnValue({
+      activeThread: fromPartial<Thread>({}),
+      setActiveThread: vi.fn(),
+    });
+
+    render(
+      <WithComponents overrides={{ SidebarToggle }}>
+        <ChatProvider value={mockChatContext()}>
+          <TranslationProvider value={mockTranslationContextValue({ t })}>
+            <ThreadListHeader />
+          </TranslationProvider>
+        </ChatProvider>
+      </WithComponents>,
+    );
+
+    expect(screen.getByTestId('sidebar-toggle')).toBeInTheDocument();
+  });
+
+  it('should not render SidebarToggle when no thread is active', () => {
+    vi.mocked(useThreadsViewContext).mockReturnValue({
+      activeThread: undefined,
+      setActiveThread: vi.fn(),
+    });
+
+    render(
+      <WithComponents overrides={{ SidebarToggle }}>
+        <ChatProvider value={mockChatContext()}>
+          <TranslationProvider value={mockTranslationContextValue({ t })}>
+            <ThreadListHeader />
+          </TranslationProvider>
+        </ChatProvider>
+      </WithComponents>,
+    );
+
+    expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index 7c03292ba2..295372067f 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -261,6 +261,8 @@ export type ComponentContextValue = {
   TypingIndicator?: React.ComponentType<TypingIndicatorProps>;
   /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */
   UnreadMessagesNotification?: React.ComponentType<UnreadMessagesNotificationProps>;
+  /** Custom UI component rendered in header slots to toggle sidebar visibility. The SDK does not provide a default — if omitted, no toggle button is rendered. Use `useChatContext()` to access `navOpen`, `openMobileNav`, and `closeMobileNav`. */
+  SidebarToggle?: React.ComponentType;
   /** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */
   UnreadMessagesSeparator?: React.ComponentType<UnreadMessagesSeparatorProps>;
   /** Component used to play video. If not provided, ReactPlayer is used as a default video player. */

From fdc986aaf864e047e566fe2b04c7fef8b4d86bf6 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Tue, 7 Apr 2026 14:07:37 +0200
Subject: [PATCH 4/8] feat!: remove navOpen and sidebar state from the SDK

BREAKING CHANGE: The SDK no longer manages sidebar visibility. The
following public APIs have been removed:

- `ChatContextValue.navOpen`, `closeMobileNav`, `openMobileNav`
- `ChatProps.initialNavOpen`
- `NAV_SIDEBAR_DESKTOP_BREAKPOINT` exported constant
- `useMobileNavigation` exported hook

Sidebar toggle is now fully app-owned. Apps provide a `SidebarToggle`
component via `WithComponents` and manage their own open/close state.

The vite example app demonstrates this with a new `SidebarContext`
that replaces the SDK's nav state.

Also removes all navOpen-dependent CSS classes and SCSS rules from
the SDK, and deletes `useMobileNavigation` and `useIsMobileViewport`
hooks.
---
 examples/vite/src/App.tsx                     | 81 +++++++--------
 examples/vite/src/ChatLayout/Panels.tsx       | 10 +-
 examples/vite/src/ChatLayout/Resize.tsx       | 16 +--
 .../vite/src/ChatLayout/SidebarContext.tsx    | 32 ++++++
 .../vite/src/LoadingScreen/LoadingScreen.tsx  | 19 +---
 examples/vite/src/index.scss                  | 23 ++++-
 .../ChannelHeader/ChannelHeader.tsx           | 10 +-
 .../__tests__/ChannelHeader.test.tsx          | 26 +----
 .../hooks/useIsMobileViewport.ts              | 24 -----
 src/components/ChannelHeader/plan.md          | 69 +++++--------
 .../ChannelHeader/styling/ChannelHeader.scss  |  5 -
 src/components/ChannelList/ChannelList.tsx    |  6 --
 .../ChannelList/ChannelListHeader.tsx         |  9 +-
 .../__tests__/ChannelList.test.tsx            | 90 -----------------
 src/components/ChannelList/hooks/index.ts     |  1 -
 .../ChannelList/hooks/useMobileNavigation.ts  | 43 --------
 .../ChannelList/styling/ChannelList.scss      | 30 ------
 .../styling/ChannelListHeader.scss            | 28 ------
 src/components/Chat/Chat.tsx                  | 12 ---
 src/components/Chat/__tests__/Chat.test.tsx   | 99 -------------------
 src/components/Chat/hooks/useChat.ts          | 25 -----
 .../Chat/hooks/useCreateChatContext.ts        |  7 --
 src/components/ChatView/ChatView.tsx          | 35 ++-----
 .../ChatView/__tests__/ChatView.test.tsx      |  4 -
 src/components/ChatView/styling/ChatView.scss | 41 --------
 src/components/Thread/ThreadHeader.tsx        |  3 +-
 .../Thread/__tests__/ThreadHeader.test.tsx    |  3 -
 .../Threads/ThreadList/ThreadList.tsx         | 16 +--
 .../Threads/ThreadList/ThreadListHeader.tsx   | 14 +--
 .../Threads/ThreadList/ThreadListItemUI.tsx   | 12 +--
 .../ThreadList/__tests__/ThreadList.test.tsx  |  2 +-
 .../ThreadList/styling/ThreadList.scss        | 36 -------
 .../ThreadList/styling/ThreadListHeader.scss  | 32 ------
 src/context/ChatContext.tsx                   |  3 -
 src/context/ComponentContext.tsx              |  2 +-
 35 files changed, 157 insertions(+), 711 deletions(-)
 create mode 100644 examples/vite/src/ChatLayout/SidebarContext.tsx
 delete mode 100644 src/components/ChannelHeader/hooks/useIsMobileViewport.ts
 delete mode 100644 src/components/ChannelList/hooks/useMobileNavigation.ts

diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
index 131425b0ee..540f4b140c 100644
--- a/examples/vite/src/App.tsx
+++ b/examples/vite/src/App.tsx
@@ -28,7 +28,6 @@ import {
   defaultReactionOptions,
   type ReactionOptions,
   mapEmojiMartData,
-  useChatContext,
   useCreateChatClient,
   useTranslationContext,
   Search,
@@ -41,6 +40,7 @@ import { humanId } from 'human-id';
 import { appSettingsStore, useAppSettingsSelector } from './AppSettings';
 import { DESKTOP_LAYOUT_BREAKPOINT } from './ChatLayout/constants.ts';
 import { ChannelsPanels, ThreadsPanels } from './ChatLayout/Panels.tsx';
+import { SidebarProvider, useSidebar } from './ChatLayout/SidebarContext.tsx';
 import {
   ChatViewSelectorWidthSync,
   PanelLayoutStyleSync,
@@ -179,15 +179,15 @@ const IconSidebar = createIcon(
 );
 
 const SidebarToggle = () => {
-  const { closeMobileNav, navOpen, openMobileNav } = useChatContext();
+  const { closeSidebar, openSidebar, sidebarOpen } = useSidebar();
   const { t } = useTranslationContext();
   return (
     <Button
       appearance='ghost'
-      aria-label={navOpen ? t('aria/Collapse sidebar') : t('aria/Expand sidebar')}
+      aria-label={sidebarOpen ? t('aria/Collapse sidebar') : t('aria/Expand sidebar')}
       circular
       className='str-chat__header-sidebar-toggle'
-      onClick={navOpen ? closeMobileNav : openMobileNav}
+      onClick={sidebarOpen ? closeSidebar : openSidebar}
       size='md'
       variant='secondary'
     >
@@ -229,7 +229,7 @@ const App = () => {
     () => appSettingsStore.getLatestValue().panelLayout,
     [],
   );
-  const initialNavOpen = useMemo(() => {
+  const initialSidebarOpen = useMemo(() => {
     if (typeof window === 'undefined') return !initialPanelLayout.leftPanel.collapsed;
 
     const isMobile = window.innerWidth < DESKTOP_LAYOUT_BREAKPOINT;
@@ -358,7 +358,7 @@ const App = () => {
       <LoadingScreen
         initialAppLayoutStyle={initialAppLayoutStyle}
         initialChannelSelected={Boolean(initialChannelId)}
-        initialNavOpen={initialNavOpen}
+        initialSidebarOpen={initialSidebarOpen}
       />
     );
   }
@@ -396,43 +396,44 @@ const App = () => {
         ...messageUiOverrides,
       }}
     >
-      <Chat
-        searchController={searchController}
-        client={chatClient}
-        i18nInstance={i18nInstance}
-        initialNavOpen={initialNavOpen}
-        isMessageAIGenerated={isMessageAIGenerated}
-        theme={chatTheme}
-      >
-        <div
-          className='app-chat-layout'
-          ref={appLayoutRef}
-          style={initialAppLayoutStyle}
-          data-variant={messageUiVariant ?? undefined}
+      <SidebarProvider initialOpen={initialSidebarOpen}>
+        <Chat
+          searchController={searchController}
+          client={chatClient}
+          i18nInstance={i18nInstance}
+          isMessageAIGenerated={isMessageAIGenerated}
+          theme={chatTheme}
         >
-          <PanelLayoutStyleSync layoutRef={appLayoutRef} />
-          <ChatViewSelectorWidthSync
-            iconOnly={chatView.iconOnly}
-            layoutRef={appLayoutRef}
-          />
-          <ChatView>
-            <ChatStateSync initialChatView={initialChatView} />
-            <SidebarLayoutSync />
-            <ChannelsPanels
-              filters={filters}
+          <div
+            className='app-chat-layout'
+            ref={appLayoutRef}
+            style={initialAppLayoutStyle}
+            data-variant={messageUiVariant ?? undefined}
+          >
+            <PanelLayoutStyleSync layoutRef={appLayoutRef} />
+            <ChatViewSelectorWidthSync
               iconOnly={chatView.iconOnly}
-              initialChannelId={initialChannelId ?? undefined}
-              itemSet={chatViewSelectorItemSet}
-              options={options}
-              sort={sort}
+              layoutRef={appLayoutRef}
             />
-            <ThreadsPanels
-              iconOnly={chatView.iconOnly}
-              itemSet={chatViewSelectorItemSet}
-            />
-          </ChatView>
-        </div>
-      </Chat>
+            <ChatView>
+              <ChatStateSync initialChatView={initialChatView} />
+              <SidebarLayoutSync />
+              <ChannelsPanels
+                filters={filters}
+                iconOnly={chatView.iconOnly}
+                initialChannelId={initialChannelId ?? undefined}
+                itemSet={chatViewSelectorItemSet}
+                options={options}
+                sort={sort}
+              />
+              <ThreadsPanels
+                iconOnly={chatView.iconOnly}
+                itemSet={chatViewSelectorItemSet}
+              />
+            </ChatView>
+          </div>
+        </Chat>
+      </SidebarProvider>
     </WithComponents>
   );
 };
diff --git a/examples/vite/src/ChatLayout/Panels.tsx b/examples/vite/src/ChatLayout/Panels.tsx
index 7ef63f2de7..8f46dcf7fe 100644
--- a/examples/vite/src/ChatLayout/Panels.tsx
+++ b/examples/vite/src/ChatLayout/Panels.tsx
@@ -23,6 +23,7 @@ import {
 } from 'stream-chat-react';
 
 import { SidebarResizeHandle, ThreadResizeHandle } from './Resize.tsx';
+import { useSidebar } from './SidebarContext.tsx';
 import { ThreadStateSync } from './Sync.tsx';
 
 const ChannelThreadPanel = () => {
@@ -86,7 +87,8 @@ export const ChannelsPanels = ({
   options: ChannelOptions;
   sort: ChannelSort;
 }) => {
-  const { channel, navOpen = true } = useChatContext('ChannelsPanels');
+  const { channel } = useChatContext('ChannelsPanels');
+  const { sidebarOpen } = useSidebar();
   const channelsLayoutRef = useRef<HTMLDivElement | null>(null);
 
   return (
@@ -94,7 +96,7 @@ export const ChannelsPanels = ({
       <div
         className={clsx('app-chat-view__channels-layout', {
           'app-chat-view__channels-layout--channel-selected': !!channel?.id,
-          'app-chat-view__channels-layout--sidebar-collapsed': navOpen === false,
+          'app-chat-view__channels-layout--sidebar-collapsed': !sidebarOpen,
         })}
         ref={channelsLayoutRef}
       >
@@ -133,7 +135,7 @@ export const ThreadsPanels = ({
   iconOnly?: boolean;
   itemSet?: ChatViewSelectorEntry[];
 }) => {
-  const { navOpen = true } = useChatContext('ThreadsPanels');
+  const { sidebarOpen } = useSidebar();
   const { activeThread } = useThreadsViewContext();
   const threadsLayoutRef = useRef<HTMLDivElement | null>(null);
 
@@ -143,7 +145,7 @@ export const ThreadsPanels = ({
       <div
         className={clsx('app-chat-view__threads-layout', {
           'app-chat-view__threads-layout--thread-selected': !!activeThread?.id,
-          'app-chat-view__threads-layout--sidebar-collapsed': navOpen === false,
+          'app-chat-view__threads-layout--sidebar-collapsed': !sidebarOpen,
         })}
         ref={threadsLayoutRef}
       >
diff --git a/examples/vite/src/ChatLayout/Resize.tsx b/examples/vite/src/ChatLayout/Resize.tsx
index ba640a5745..59dd67df1f 100644
--- a/examples/vite/src/ChatLayout/Resize.tsx
+++ b/examples/vite/src/ChatLayout/Resize.tsx
@@ -6,7 +6,7 @@ import {
   useEffect,
   useRef,
 } from 'react';
-import { useChatContext } from 'stream-chat-react';
+import { useSidebar } from './SidebarContext.tsx';
 
 import {
   type LeftPanelLayoutSettingsState,
@@ -197,7 +197,7 @@ const PanelResizeHandle = ({
 );
 
 export const SidebarLayoutSync = () => {
-  const { navOpen = true } = useChatContext();
+  const { sidebarOpen } = useSidebar();
   const { collapsed: leftPanelCollapsed } = useAppSettingsSelector(
     (state) => state.panelLayout.leftPanel,
   );
@@ -209,7 +209,7 @@ export const SidebarLayoutSync = () => {
 
     if (document.body.classList.contains('app-chat-resizing-sidebar')) return;
 
-    const shouldBeCollapsed = !navOpen;
+    const shouldBeCollapsed = !sidebarOpen;
 
     if (shouldBeCollapsed === leftPanelCollapsed) return;
 
@@ -220,7 +220,7 @@ export const SidebarLayoutSync = () => {
         collapsed: shouldBeCollapsed,
       },
     }));
-  }, [leftPanelCollapsed, navOpen]);
+  }, [leftPanelCollapsed, sidebarOpen]);
 
   return null;
 };
@@ -230,7 +230,7 @@ export const SidebarResizeHandle = ({
 }: {
   layoutRef: RefObject<HTMLDivElement | null>;
 }) => {
-  const { closeMobileNav, openMobileNav } = useChatContext('SidebarResizeHandle');
+  const { closeSidebar, openSidebar } = useSidebar();
   const leftPanel = useAppSettingsSelector((state) => state.panelLayout.leftPanel);
   const isSidebarCollapsedRef = useRef(leftPanel.collapsed);
   const leftPanelStateRef = useRef(leftPanel);
@@ -297,9 +297,9 @@ export const SidebarResizeHandle = ({
             isSidebarCollapsedRef.current = shouldCollapse;
 
             if (shouldCollapse) {
-              closeMobileNav();
+              closeSidebar();
             } else {
-              openMobileNav();
+              openSidebar();
             }
           }
         },
@@ -326,7 +326,7 @@ export const SidebarResizeHandle = ({
         pointerId: event.pointerId,
       });
     },
-    [closeMobileNav, layoutRef, openMobileNav],
+    [closeSidebar, layoutRef, openSidebar],
   );
 
   return (
diff --git a/examples/vite/src/ChatLayout/SidebarContext.tsx b/examples/vite/src/ChatLayout/SidebarContext.tsx
new file mode 100644
index 0000000000..36a98ae692
--- /dev/null
+++ b/examples/vite/src/ChatLayout/SidebarContext.tsx
@@ -0,0 +1,32 @@
+import { createContext, useCallback, useContext, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+
+type SidebarContextValue = {
+  closeSidebar: () => void;
+  openSidebar: () => void;
+  sidebarOpen: boolean;
+};
+
+const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
+
+export const useSidebar = () => {
+  const value = useContext(SidebarContext);
+  if (!value) throw new Error('useSidebar must be used within a SidebarProvider');
+  return value;
+};
+
+export const SidebarProvider = ({
+  children,
+  initialOpen = true,
+}: PropsWithChildren<{ initialOpen?: boolean }>) => {
+  const [sidebarOpen, setSidebarOpen] = useState(initialOpen);
+
+  const closeSidebar = useCallback(() => setSidebarOpen(false), []);
+  const openSidebar = useCallback(() => setTimeout(() => setSidebarOpen(true), 100), []);
+
+  return (
+    <SidebarContext.Provider value={{ closeSidebar, openSidebar, sidebarOpen }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
diff --git a/examples/vite/src/LoadingScreen/LoadingScreen.tsx b/examples/vite/src/LoadingScreen/LoadingScreen.tsx
index a3d00b1a4e..8a34149507 100644
--- a/examples/vite/src/LoadingScreen/LoadingScreen.tsx
+++ b/examples/vite/src/LoadingScreen/LoadingScreen.tsx
@@ -10,7 +10,7 @@ import { LoadingChannel, LoadingChannels } from 'stream-chat-react';
 type LoadingScreenProps = {
   initialAppLayoutStyle: CSSProperties;
   initialChannelSelected: boolean;
-  initialNavOpen: boolean;
+  initialSidebarOpen: boolean;
 };
 
 const selectorButtonCount = 4;
@@ -18,7 +18,7 @@ const selectorButtonCount = 4;
 export const LoadingScreen = ({
   initialAppLayoutStyle,
   initialChannelSelected,
-  initialNavOpen,
+  initialSidebarOpen,
 }: LoadingScreenProps) => (
   <div className='app-chat-layout' style={initialAppLayoutStyle}>
     <div className='str-chat'>
@@ -27,16 +27,11 @@ export const LoadingScreen = ({
           <div
             className={clsx('app-chat-view__channels-layout', {
               'app-chat-view__channels-layout--channel-selected': initialChannelSelected,
-              'app-chat-view__channels-layout--sidebar-collapsed': !initialNavOpen,
+              'app-chat-view__channels-layout--sidebar-collapsed': !initialSidebarOpen,
             })}
           >
             <div className='app-chat-sidebar-overlay'>
-              <div
-                className={clsx('str-chat__chat-view__selector', {
-                  'str-chat__chat-view__selector--nav-closed': !initialNavOpen,
-                  'str-chat__chat-view__selector--nav-open': initialNavOpen,
-                })}
-              >
+              <div className='str-chat__chat-view__selector'>
                 {Array.from({ length: selectorButtonCount }).map((_, index) => (
                   <div
                     className='str-chat__chat-view__selector-button-container'
@@ -48,11 +43,7 @@ export const LoadingScreen = ({
                   </div>
                 ))}
               </div>
-              <div
-                className={clsx('str-chat__channel-list', {
-                  'str-chat__channel-list--open': initialNavOpen,
-                })}
-              >
+              <div className='str-chat__channel-list'>
                 <LoadingChannels />
               </div>
             </div>
diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss
index 3c432f8f9d..5383f58225 100644
--- a/examples/vite/src/index.scss
+++ b/examples/vite/src/index.scss
@@ -309,11 +309,24 @@ body {
         0s, 0s, 0s, 0s, 0s, 0s, var(--str-chat__channel-list-transition-duration, 180ms);
     }
 
-    .app-chat-sidebar-overlay > .str-chat__chat-view__selector,
-    .app-chat-sidebar-overlay
-      > .str-chat__chat-view__selector.str-chat__chat-view__selector--nav-closed,
-    .app-chat-sidebar-overlay
-      > .str-chat__chat-view__selector.str-chat__chat-view__selector--nav-open {
+    /* Hide expand toggle in content headers when sidebar is visible */
+    .app-chat-view__channels-layout:not(
+        .app-chat-view__channels-layout--sidebar-collapsed
+      )
+      .str-chat__channel-header
+      .str-chat__header-sidebar-toggle {
+      display: none;
+    }
+
+    .app-chat-view__threads-layout:not(
+        .app-chat-view__threads-layout--sidebar-collapsed
+      )
+      .str-chat__thread-header
+      .str-chat__header-sidebar-toggle {
+      display: none;
+    }
+
+    .app-chat-sidebar-overlay > .str-chat__chat-view__selector {
       position: static;
       inset: auto;
       width: var(--str-chat__chat-view-selector-mobile-width);
diff --git a/src/components/ChannelHeader/ChannelHeader.tsx b/src/components/ChannelHeader/ChannelHeader.tsx
index 3d7be9b342..fb81ac5747 100644
--- a/src/components/ChannelHeader/ChannelHeader.tsx
+++ b/src/components/ChannelHeader/ChannelHeader.tsx
@@ -8,7 +8,6 @@ import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useTypingContext } from '../../context/TypingContext';
-import clsx from 'clsx';
 
 const ChannelHeaderSubtitle = () => {
   const { channelConfig } = useChannelStateContext('ChannelHeaderSubtitle');
@@ -50,7 +49,6 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
   const { Avatar = DefaultAvatar, image: overrideImage, title: overrideTitle } = props;
 
   const { channel } = useChannelStateContext();
-  const { navOpen } = useChatContext();
   const { SidebarToggle } = useComponentContext();
   const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
     channel,
@@ -59,13 +57,9 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
   });
 
   return (
-    <div
-      className={clsx('str-chat__channel-header', {
-        'str-chat__channel-header--sidebar-collapsed': !navOpen,
-      })}
-    >
+    <div className='str-chat__channel-header'>
       <div className='str-chat__channel-header__start'>
-        {!navOpen && SidebarToggle && <SidebarToggle />}
+        {SidebarToggle && <SidebarToggle />}
       </div>
       <div className='str-chat__channel-header__data'>
         <div className='str-chat__channel-header__data__title'>{displayTitle}</div>
diff --git a/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx b/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
index f5cb8c11af..dfb61759de 100644
--- a/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
+++ b/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
@@ -188,7 +188,7 @@ describe('ChannelHeader', () => {
       expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
     });
 
-    it('should render SidebarToggle when navOpen is false', async () => {
+    it('should render SidebarToggle when provided via ComponentContext', async () => {
       client = await getTestClientWithUser(user1);
       testChannel1 = generateChannel({ ...defaultChannelState });
       useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
@@ -197,7 +197,7 @@ describe('ChannelHeader', () => {
 
       render(
         <WithComponents overrides={{ SidebarToggle }}>
-          <ChatProvider value={mockChatContext({ channel, client, navOpen: false })}>
+          <ChatProvider value={mockChatContext({ channel, client })}>
             <ChannelStateProvider value={mockChannelStateContext({ channel })}>
               <TranslationProvider value={mockTranslationContextValue({ t })}>
                 <ChannelHeader />
@@ -209,28 +209,6 @@ describe('ChannelHeader', () => {
 
       expect(screen.getByTestId('sidebar-toggle')).toBeInTheDocument();
     });
-
-    it('should not render SidebarToggle when navOpen is true', async () => {
-      client = await getTestClientWithUser(user1);
-      testChannel1 = generateChannel({ ...defaultChannelState });
-      useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
-      const channel = client.channel('messaging', testChannel1.channel.id);
-      await channel.query();
-
-      render(
-        <WithComponents overrides={{ SidebarToggle }}>
-          <ChatProvider value={mockChatContext({ channel, client, navOpen: true })}>
-            <ChannelStateProvider value={mockChannelStateContext({ channel })}>
-              <TranslationProvider value={mockTranslationContextValue({ t })}>
-                <ChannelHeader />
-              </TranslationProvider>
-            </ChannelStateProvider>
-          </ChatProvider>
-        </WithComponents>,
-      );
-
-      expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
-    });
   });
 
   it("DM channel should reflect change of other user's name", async () => {
diff --git a/src/components/ChannelHeader/hooks/useIsMobileViewport.ts b/src/components/ChannelHeader/hooks/useIsMobileViewport.ts
deleted file mode 100644
index 1ad58ce3c8..0000000000
--- a/src/components/ChannelHeader/hooks/useIsMobileViewport.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { NAV_SIDEBAR_DESKTOP_BREAKPOINT } from '../../Chat/hooks/useChat';
-
-const mobileQuery = () =>
-  typeof window !== 'undefined'
-    ? window.matchMedia(`(max-width: ${NAV_SIDEBAR_DESKTOP_BREAKPOINT - 1}px)`)
-    : null;
-
-/** True when viewport width is below NAV_SIDEBAR_DESKTOP_BREAKPOINT (768px). */
-export const useIsMobileViewport = (): boolean => {
-  const [isMobile, setIsMobile] = useState(() => mobileQuery()?.matches ?? false);
-
-  useEffect(() => {
-    const mql = mobileQuery();
-    if (!mql) return;
-    const handler = () => setIsMobile(mql.matches);
-    handler();
-    mql.addEventListener('change', handler);
-    return () => mql.removeEventListener('change', handler);
-  }, []);
-
-  return isMobile;
-};
diff --git a/src/components/ChannelHeader/plan.md b/src/components/ChannelHeader/plan.md
index a06fe46dac..4425c766ee 100644
--- a/src/components/ChannelHeader/plan.md
+++ b/src/components/ChannelHeader/plan.md
@@ -30,9 +30,9 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 
 **Key design elements (channel header section):**
 
-- Layout: `[hamburger or sidebar icon] | [channelName + Online stacked] | [avatar right]`
-- Variant: Sidebar collapsed (shows `IconLayoutAlignLeft`) vs expanded (hamburger / MenuIcon)
-- Avatar on the right (current impl has it between hamburger and title)
+- Layout: `[sidebar toggle slot] | [channelName + Online stacked] | [avatar right]`
+- Sidebar toggle is provided externally via `SidebarToggle` in `ComponentContext`
+- Avatar on the right (current impl has it between toggle and title)
 
 ---
 
@@ -63,33 +63,11 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 
 ---
 
-## Task 2: Add Sidebar-Collapsed Variant Styles
-
-**File(s) to create/modify:** `src/components/ChannelHeader/styling/ChannelHeader.scss`
-
-**Dependencies:** Task 1
-
-**Status:** pending
-
-**Owner:** unassigned
-
-**Scope:**
-
-- Add modifier: `.str-chat__channel-header--sidebar-collapsed` (compact left icon area if needed)
-- Use existing `--str-chat__*` vars from design-system-tokens
-- Hamburger (MenuIcon) and sidebar toggle (`IconLayoutAlignLeft`) button styling
-
-**Acceptance Criteria:**
-
-- [ ] Sidebar-collapsed modifier applies correctly when class is present
-
----
-
-## Task 3: Register ChannelHeader Styles and Update Component
+## Task 2: Register ChannelHeader Styles and Update Component
 
 **File(s) to create/modify:** `src/styling/index.scss`, `src/components/ChannelHeader/ChannelHeader.tsx`
 
-**Dependencies:** Task 1, Task 2
+**Dependencies:** Task 1
 
 **Status:** pending
 
@@ -99,27 +77,26 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 
 - Add `@use '../components/ChannelHeader/styling' as ChannelHeader` to `src/styling/index.scss` in the appropriate group (alphabetical, chat components)
 - Update `ChannelHeader.tsx`:
-  - Reorder layout: hamburger/sidebar icon | text block (title + Online) | avatar (right)
-  - Add optional prop: `sidebarCollapsed?: boolean`
-  - Render `MenuIcon` (hamburger) when expanded, `IconLayoutAlignLeft` when `sidebarCollapsed` — import from `src/components/Icons/icons.tsx`
+  - Reorder layout: sidebar toggle slot | text block (title + Online) | avatar (right)
+  - The sidebar toggle is provided externally via the `SidebarToggle` slot in `ComponentContext` (no built-in toggle or `MenuIcon` prop)
   - Simplify info line to "Online" (or keep watcher_count: "X online") per design
-  - Apply modifier class: `str-chat__channel-header--sidebar-collapsed` when `sidebarCollapsed`
-- Preserve: `live`, `subtitle`, `member_count`, `Avatar`, `MenuIcon`, `title`, `image` — ensure backward compatibility
+- Preserve: `live`, `subtitle`, `member_count`, `Avatar`, `title`, `image` — ensure backward compatibility
+- Note: sidebar collapsed/expanded state is NOT managed by the SDK; the app owns sidebar visibility
 
 **Acceptance Criteria:**
 
 - [ ] ChannelHeader styles imported in `src/styling/index.scss`
 - [ ] Component layout matches Figma: avatar on right, text in middle
-- [ ] New prop `sidebarCollapsed` works and applies modifier
+- [ ] `SidebarToggle` slot renders when provided via `ComponentContext`
 - [ ] Existing tests pass; update tests if needed for new structure
 
 ---
 
-## Task 4: Integration and Tests
+## Task 3: Integration and Tests
 
 **File(s) to create/modify:** `src/components/ChannelHeader/__tests__/ChannelHeader.test.js`
 
-**Dependencies:** Task 3
+**Dependencies:** Task 2
 
 **Status:** pending
 
@@ -128,7 +105,7 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 **Scope:**
 
 - Run existing tests; fix any failures from layout/class changes
-- Add tests for `sidebarCollapsed` when applicable
+- Add tests for `SidebarToggle` slot rendering when applicable
 - Ensure `yarn test`, `yarn types`, `yarn lint-fix` pass
 
 **Acceptance Criteria:**
@@ -141,12 +118,11 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 
 ## Execution Order
 
-| Phase | Tasks  | Can run in parallel?      |
-| ----- | ------ | ------------------------- |
-| 1     | Task 1 | —                         |
-| 2     | Task 2 | No (depends on Task 1)    |
-| 3     | Task 3 | No (depends on Task 1, 2) |
-| 4     | Task 4 | No (depends on Task 3)    |
+| Phase | Tasks  | Can run in parallel?   |
+| ----- | ------ | ---------------------- |
+| 1     | Task 1 | —                      |
+| 2     | Task 2 | No (depends on Task 1) |
+| 3     | Task 3 | No (depends on Task 2) |
 
 ---
 
@@ -155,9 +131,8 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 | Task | Creates                                                                        | Modifies                                                    |
 | ---- | ------------------------------------------------------------------------------ | ----------------------------------------------------------- |
 | 1    | `ChannelHeader/styling/ChannelHeader.scss`, `ChannelHeader/styling/index.scss` | —                                                           |
-| 2    | —                                                                              | `ChannelHeader/styling/ChannelHeader.scss`                  |
-| 3    | —                                                                              | `src/styling/index.scss`, `ChannelHeader/ChannelHeader.tsx` |
-| 4    | —                                                                              | `ChannelHeader/__tests__/ChannelHeader.test.js`             |
+| 2    | —                                                                              | `src/styling/index.scss`, `ChannelHeader/ChannelHeader.tsx` |
+| 3    | —                                                                              | `ChannelHeader/__tests__/ChannelHeader.test.js`             |
 
 ---
 
@@ -165,5 +140,5 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 
 - ChannelHeader currently has no dedicated styling folder; styles may come from stream-chat-css. This plan introduces ChannelHeader/styling per dev-patterns.
 - Loading channel header in `Channel/styling/Channel.scss` uses `--str-chat__channel-header-background-color`; keep variable usage consistent.
-- Backward compatibility: `sidebarCollapsed` defaults to `false`; existing usage unchanged.
-- Sidebar expansion toggle icon: use `IconLayoutAlignLeft` from `src/components/Icons/icons.tsx` when `sidebarCollapsed=true`.
+- Sidebar toggle is externally provided via `SidebarToggle` slot in `ComponentContext`. The SDK does not own sidebar state — apps provide their own toggle via `WithComponents`.
+- No `sidebarCollapsed` prop or `MenuIcon` prop — these were removed as part of the navOpen removal.
diff --git a/src/components/ChannelHeader/styling/ChannelHeader.scss b/src/components/ChannelHeader/styling/ChannelHeader.scss
index 11b7d4d0a3..f9044e21dc 100644
--- a/src/components/ChannelHeader/styling/ChannelHeader.scss
+++ b/src/components/ChannelHeader/styling/ChannelHeader.scss
@@ -64,9 +64,4 @@
     color: var(--str-chat__channel-header__data__subtitle-color);
   }
 
-  &.str-chat__channel-header--sidebar-collapsed {
-    .str-chat__header-sidebar-toggle {
-      // Compact styling when sidebar collapsed
-    }
-  }
 }
diff --git a/src/components/ChannelList/ChannelList.tsx b/src/components/ChannelList/ChannelList.tsx
index 95679a3a51..aef6418d35 100644
--- a/src/components/ChannelList/ChannelList.tsx
+++ b/src/components/ChannelList/ChannelList.tsx
@@ -11,7 +11,6 @@ import type {
 } from 'stream-chat';
 
 import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';
-import { useMobileNavigation } from './hooks/useMobileNavigation';
 import type { CustomQueryChannelsFn } from './hooks/usePaginatedChannels';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
 import {
@@ -185,9 +184,7 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
     channel,
     channelsQueryState,
     client,
-    closeMobileNav,
     customClasses,
-    navOpen = true,
     searchController,
     setActiveChannel,
     theme,
@@ -270,8 +267,6 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
     ? channelRenderFilterFn(channels)
     : channels;
 
-  useMobileNavigation(channelListRef, navOpen, closeMobileNav);
-
   const { customHandler, defaultHandler } = usePrepareShapeHandlers({
     allowNewMessagesFromUnfilteredChannels,
     filters,
@@ -335,7 +330,6 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
     {
       'str-chat--windows-flags':
         useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
-      [`${baseClass}--open`]: navOpen,
     },
   );
 
diff --git a/src/components/ChannelList/ChannelListHeader.tsx b/src/components/ChannelList/ChannelListHeader.tsx
index 3e6725f07e..b1665ba432 100644
--- a/src/components/ChannelList/ChannelListHeader.tsx
+++ b/src/components/ChannelList/ChannelListHeader.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import {
   useChatContext,
   useComponentContext,
@@ -8,14 +7,10 @@ import {
 
 export const ChannelListHeader = () => {
   const { t } = useTranslationContext();
-  const { channel, navOpen } = useChatContext();
+  const { channel } = useChatContext();
   const { SidebarToggle } = useComponentContext();
   return (
-    <div
-      className={clsx('str-chat__channel-list__header', {
-        'str-chat__channel-list__header--sidebar-collapsed': !navOpen,
-      })}
-    >
+    <div className='str-chat__channel-list__header'>
       <div className='str-chat__channel-list__header__title'>{t('Chats')}</div>
       {channel && SidebarToggle && <SidebarToggle />}
     </div>
diff --git a/src/components/ChannelList/__tests__/ChannelList.test.tsx b/src/components/ChannelList/__tests__/ChannelList.test.tsx
index 62075da26f..e22d5d7cf4 100644
--- a/src/components/ChannelList/__tests__/ChannelList.test.tsx
+++ b/src/components/ChannelList/__tests__/ChannelList.test.tsx
@@ -113,96 +113,6 @@ describe('ChannelList', () => {
     vi.restoreAllMocks();
   });
 
-  describe('mobile navigation', () => {
-    let closeMobileNav: Mock;
-    let props: ChannelListProps & { closeMobileNav: Mock };
-    beforeEach(() => {
-      closeMobileNav = vi.fn();
-      props = {
-        closeMobileNav,
-        filters: {},
-      };
-      useMockedApis(chatClient, [queryChannelsApi([])]);
-    });
-    it('should call `closeMobileNav` prop function, when clicked outside ChannelList', async () => {
-      Object.defineProperty(window, 'innerWidth', { value: 500, writable: true });
-      const { container, getByRole, getByTestId } = await render(
-        <ChatContext.Provider
-          value={fromPartial<ChatContextValue>({
-            channelsQueryState: channelsQueryStateMock,
-            client: chatClient,
-            closeMobileNav,
-            navOpen: true,
-            searchController: new SearchController(),
-          })}
-        >
-          <WithComponents
-            overrides={{
-              ChannelListItemUI: ChannelPreviewComponent,
-              ChannelListUI: ChannelListComponent,
-            }}
-          >
-            <ChannelList {...props} />
-          </WithComponents>
-          <div data-testid='outside-channellist' />
-        </ChatContext.Provider>,
-      );
-      // Wait for list of channels to load in DOM.
-      await waitFor(() => {
-        expect(getByRole('list')).toBeInTheDocument();
-      });
-
-      await act(() => {
-        fireEvent.click(getByTestId('outside-channellist'));
-      });
-
-      await waitFor(() => {
-        expect(closeMobileNav).toHaveBeenCalledTimes(1);
-      });
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-      Object.defineProperty(window, 'innerWidth', { value: 1024, writable: true });
-    });
-
-    it('should not call `closeMobileNav` prop function on click, if ChannelList is collapsed', async () => {
-      const { container, getByRole, getByTestId } = await render(
-        <ChatContext.Provider
-          value={fromPartial<ChatContextValue>({
-            channelsQueryState: channelsQueryStateMock,
-            client: chatClient,
-            closeMobileNav,
-            navOpen: false,
-            searchController: new SearchController(),
-          })}
-        >
-          <WithComponents
-            overrides={{
-              ChannelListItemUI: ChannelPreviewComponent,
-              ChannelListUI: ChannelListComponent,
-            }}
-          >
-            <ChannelList {...props} />
-          </WithComponents>
-          <div data-testid='outside-channellist' />
-        </ChatContext.Provider>,
-      );
-
-      // Wait for list of channels to load in DOM.
-      await waitFor(() => {
-        expect(getByRole('list')).toBeInTheDocument();
-      });
-
-      await act(() => {
-        fireEvent.click(getByTestId('outside-channellist'));
-      });
-      await waitFor(() => {
-        expect(closeMobileNav).toHaveBeenCalledTimes(0);
-      });
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-  });
-
   it('should re-query channels when filters change', async () => {
     const props = {
       filters: {},
diff --git a/src/components/ChannelList/hooks/index.ts b/src/components/ChannelList/hooks/index.ts
index ed5454b7ba..f70b3fa281 100644
--- a/src/components/ChannelList/hooks/index.ts
+++ b/src/components/ChannelList/hooks/index.ts
@@ -5,7 +5,6 @@ export * from './useChannelUpdatedListener';
 export * from './useChannelVisibleListener';
 export * from './useConnectionRecoveredListener';
 export * from './useMessageNewListener';
-export * from './useMobileNavigation';
 export * from './useNotificationAddedToChannelListener';
 export * from './useNotificationMessageNewListener';
 export * from './useNotificationRemovedFromChannelListener';
diff --git a/src/components/ChannelList/hooks/useMobileNavigation.ts b/src/components/ChannelList/hooks/useMobileNavigation.ts
deleted file mode 100644
index d938c84d5b..0000000000
--- a/src/components/ChannelList/hooks/useMobileNavigation.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useEffect } from 'react';
-
-const MOBILE_NAV_BREAKPOINT = 768;
-
-export const useMobileNavigation = (
-  channelListRef: React.RefObject<HTMLDivElement | null>,
-  navOpen: boolean,
-  closeMobileNav?: () => void,
-) => {
-  useEffect(() => {
-    const isClickInsideChannelList = (event: MouseEvent) => {
-      const channelListElement = channelListRef.current;
-
-      if (!channelListElement) return false;
-
-      const eventPath = event.composedPath();
-
-      // `event.target` may become detached before this document listener runs.
-      // Use composedPath to reliably detect whether the click originated inside.
-      return eventPath.includes(channelListElement);
-    };
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (typeof window !== 'undefined' && window.innerWidth >= MOBILE_NAV_BREAKPOINT) {
-        return;
-      }
-      if (
-        closeMobileNav &&
-        channelListRef.current &&
-        !isClickInsideChannelList(event) &&
-        navOpen
-      ) {
-        closeMobileNav();
-      }
-    };
-
-    document.addEventListener('click', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [channelListRef, closeMobileNav, navOpen]);
-};
diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss
index daa566489a..a9fb5067ba 100644
--- a/src/components/ChannelList/styling/ChannelList.scss
+++ b/src/components/ChannelList/styling/ChannelList.scss
@@ -195,36 +195,6 @@
       width: calc(100% - var(--str-chat__chat-view-selector-mobile-width, 0px));
     }
 
-    &.str-chat__channel-list--open {
-      pointer-events: auto;
-      transform: translateX(0);
-      transition-delay: 0s, 0s;
-      visibility: visible;
-    }
-  }
-
-  /* Desktop (≥768px): collapse when nav closed so main content uses space. */
-  @media (min-width: 768px) {
-    &.str-chat__channel-list--open {
-      flex-basis: var(--str-chat__channel-list-width);
-      max-width: 100%;
-      min-width: 280px;
-      opacity: 1;
-      pointer-events: auto;
-      transform: translateX(0);
-      width: var(--str-chat__channel-list-width);
-    }
-
-    &:not(.str-chat__channel-list--open) {
-      flex: 0 0 0;
-      width: 0;
-      min-width: 0;
-      max-width: 0;
-      opacity: 0;
-      overflow: hidden;
-      pointer-events: none;
-      transform: translateX(calc(0px - var(--str-chat__channel-list-transition-offset)));
-    }
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/src/components/ChannelList/styling/ChannelListHeader.scss b/src/components/ChannelList/styling/ChannelListHeader.scss
index 734d1d9ac2..b95684a1e3 100644
--- a/src/components/ChannelList/styling/ChannelListHeader.scss
+++ b/src/components/ChannelList/styling/ChannelListHeader.scss
@@ -1,14 +1,7 @@
 .str-chat__channel-list__header {
   display: flex;
   align-items: center;
-  opacity: 1;
   padding: var(--spacing-md);
-  transform: translateX(0);
-  transition:
-    opacity var(--str-chat__channel-list-transition-duration, 180ms)
-      var(--str-chat__channel-list-transition-easing, ease),
-    transform var(--str-chat__channel-list-transition-duration, 180ms)
-      var(--str-chat__channel-list-transition-easing, ease);
   width: 100%;
 
   .str-chat__channel-list__header__title {
@@ -16,25 +9,4 @@
     font: var(--str-chat__heading-lg-text);
     color: var(--text-primary);
   }
-
-  &.str-chat__channel-list__header--sidebar-collapsed {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateX(
-      calc(0px - var(--str-chat__channel-list-transition-offset, 8px))
-    );
-  }
-
-  @media (max-width: 767px) {
-    transition: none;
-
-    &.str-chat__channel-list__header--sidebar-collapsed {
-      opacity: 1;
-      transform: none;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 }
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index d56123937a..53c2fca8e4 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -27,10 +27,6 @@ export type ChatProps = {
   defaultLanguage?: SupportedTranslations;
   /** Instance of Stream i18n */
   i18nInstance?: Streami18n;
-  /**
-   * Initial open state of the sidebar. Omit for responsive (viewport-derived); set to true/false for an explicit initial state.
-   */
-  initialNavOpen?: boolean;
   /** Instance of SearchController class that allows to control all the search operations. */
   searchController?: SearchController;
   /** Used for injecting className/s to the Channel and ChannelList components */
@@ -56,7 +52,6 @@ export const Chat = (props: PropsWithChildren<ChatProps>) => {
     customClasses,
     defaultLanguage,
     i18nInstance,
-    initialNavOpen,
     isMessageAIGenerated,
     searchController: customChannelSearchController,
     theme = 'messaging light',
@@ -65,19 +60,15 @@ export const Chat = (props: PropsWithChildren<ChatProps>) => {
 
   const {
     channel,
-    closeMobileNav,
     getAppSettings,
     latestMessageDatesByChannels,
     mutes,
-    navOpen,
-    openMobileNav,
     setActiveChannel,
     translators,
   } = useChat({
     client,
     defaultLanguage,
     i18nInstance,
-    initialNavOpen,
   });
 
   const channelsQueryState = useChannelsQueryState();
@@ -99,14 +90,11 @@ export const Chat = (props: PropsWithChildren<ChatProps>) => {
     channel,
     channelsQueryState,
     client,
-    closeMobileNav,
     customClasses,
     getAppSettings,
     isMessageAIGenerated,
     latestMessageDatesByChannels,
     mutes,
-    navOpen,
-    openMobileNav,
     searchController,
     setActiveChannel,
     theme,
diff --git a/src/components/Chat/__tests__/Chat.test.tsx b/src/components/Chat/__tests__/Chat.test.tsx
index 40da2a9f90..9ef07b863d 100644
--- a/src/components/Chat/__tests__/Chat.test.tsx
+++ b/src/components/Chat/__tests__/Chat.test.tsx
@@ -61,11 +61,8 @@ describe('Chat', () => {
       expect(context.client).toBe(chatClient);
       expect(context.channel).toBeUndefined();
       expect(context.mutes).toStrictEqual([]);
-      expect(context.navOpen).toBe(true);
       expect(context.theme).toBe('messaging light');
       expect(context.setActiveChannel).toBeInstanceOf(Function);
-      expect(context.openMobileNav).toBeInstanceOf(Function);
-      expect(context.closeMobileNav).toBeInstanceOf(Function);
       expect(context.client.getUserAgent()).toMatch(
         new RegExp(
           `^stream-chat-react-.+-${originalUserAgent.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`,
@@ -108,102 +105,6 @@ describe('Chat', () => {
     });
   });
 
-  describe('mobile nav', () => {
-    it('initialNavOpen prop should set navOpen', async () => {
-      let context: ChatContextValue;
-      await act(() => {
-        render(
-          <Chat client={chatClient} initialNavOpen={false}>
-            <ChatContextConsumer
-              fn={(ctx) => {
-                context = ctx;
-              }}
-            />
-          </Chat>,
-        );
-      });
-
-      await waitFor(() => expect(context.navOpen).toBe(false));
-    });
-
-    it('initialNavOpen prop update should be ignored', async () => {
-      let context: ChatContextValue;
-      const { rerender } = render(
-        <Chat client={chatClient} initialNavOpen={false}>
-          <ChatContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          />
-        </Chat>,
-      );
-      await waitFor(() => expect(context.navOpen).toBe(false));
-
-      rerender(
-        <Chat client={chatClient} initialNavOpen={true}>
-          <ChatContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          />
-        </Chat>,
-      );
-      await waitFor(() => expect(context.navOpen).toBe(false));
-    });
-
-    it('open/close fn updates the nav state', async () => {
-      let context: ChatContextValue;
-      render(
-        <Chat client={chatClient}>
-          <ChatContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          />
-        </Chat>,
-      );
-
-      await waitFor(() => expect(context.navOpen).toBe(true));
-      act(() => context.closeMobileNav());
-      await waitFor(() => expect(context.navOpen).toBe(false));
-      act(() => {
-        context.openMobileNav();
-      });
-
-      await waitFor(() => expect(context.navOpen).toBe(true));
-    });
-
-    it('setActiveChannel closes the nav', async () => {
-      const originalInnerWidth = window.innerWidth;
-      Object.defineProperty(window, 'innerWidth', {
-        configurable: true,
-        value: 500,
-        writable: true,
-      });
-
-      let context: ChatContextValue;
-      render(
-        <Chat client={chatClient}>
-          <ChatContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          />
-        </Chat>,
-      );
-
-      await waitFor(() => expect(context.navOpen).toBe(true));
-      await act(() => context.setActiveChannel());
-      await waitFor(() => expect(context.navOpen).toBe(false));
-
-      Object.defineProperty(window, 'innerWidth', {
-        configurable: true,
-        value: originalInnerWidth,
-        writable: true,
-      });
-    });
-  });
-
   describe('mutes', () => {
     it('init the mute state with client data', async () => {
       const chatClientWithUser = await getTestClientWithUser({ id: 'user_x' });
diff --git a/src/components/Chat/hooks/useChat.ts b/src/components/Chat/hooks/useChat.ts
index 1d8085055b..0af9603cfd 100644
--- a/src/components/Chat/hooks/useChat.ts
+++ b/src/components/Chat/hooks/useChat.ts
@@ -18,27 +18,16 @@ import type {
   StreamChat,
 } from 'stream-chat';
 
-/** Viewport width (px) above which the sidebar is open by default when using responsive initial nav state. */
-export const NAV_SIDEBAR_DESKTOP_BREAKPOINT = 768;
-
-/** With responsive nav: sidebar is open on load (so ChannelList/ThreadList + selector visible); close on channel/thread selection. */
-const getDefaultNavOpenFromViewport = (): boolean => true;
-
 export type UseChatParams = {
   client: StreamChat;
   defaultLanguage?: SupportedTranslations;
   i18nInstance?: Streami18n;
-  /**
-   * Initial open state of the sidebar. Omit for responsive (viewport-derived); set to true/false for an explicit initial state.
-   */
-  initialNavOpen?: boolean;
 };
 
 export const useChat = ({
   client,
   defaultLanguage = 'en',
   i18nInstance,
-  initialNavOpen,
 }: UseChatParams) => {
   const [translators, setTranslators] = useState<TranslationContextValue>({
     t: defaultTranslatorFunction,
@@ -48,17 +37,10 @@ export const useChat = ({
 
   const [channel, setChannel] = useState<Channel>();
   const [mutes, setMutes] = useState<Array<Mute>>([]);
-  const [navOpen, setNavOpen] = useState(() => {
-    if (initialNavOpen === undefined) return getDefaultNavOpenFromViewport() ?? true;
-    return initialNavOpen;
-  });
   const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = useState({});
 
   const clientMutes = (client.user as OwnUserResponse)?.mutes ?? [];
 
-  const closeMobileNav = () => setNavOpen(false);
-  const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
-
   const appSettings = useRef<Promise<AppSettingsAPIResponse> | null>(null);
 
   const getAppSettings = () => {
@@ -144,10 +126,6 @@ export const useChat = ({
       }
 
       setChannel(activeChannel);
-      const isMobileViewport =
-        typeof window !== 'undefined' &&
-        window.innerWidth < NAV_SIDEBAR_DESKTOP_BREAKPOINT;
-      if (isMobileViewport) closeMobileNav();
     },
     [],
   );
@@ -158,12 +136,9 @@ export const useChat = ({
 
   return {
     channel,
-    closeMobileNav,
     getAppSettings,
     latestMessageDatesByChannels,
     mutes,
-    navOpen,
-    openMobileNav,
     setActiveChannel,
     translators,
   };
diff --git a/src/components/Chat/hooks/useCreateChatContext.ts b/src/components/Chat/hooks/useCreateChatContext.ts
index 5cf96e11fb..6337a415de 100644
--- a/src/components/Chat/hooks/useCreateChatContext.ts
+++ b/src/components/Chat/hooks/useCreateChatContext.ts
@@ -7,14 +7,11 @@ export const useCreateChatContext = (value: ChatContextValue) => {
     channel,
     channelsQueryState,
     client,
-    closeMobileNav,
     customClasses,
     getAppSettings,
     isMessageAIGenerated,
     latestMessageDatesByChannels,
     mutes,
-    navOpen,
-    openMobileNav,
     searchController,
     setActiveChannel,
     theme,
@@ -35,14 +32,11 @@ export const useCreateChatContext = (value: ChatContextValue) => {
       channel,
       channelsQueryState,
       client,
-      closeMobileNav,
       customClasses,
       getAppSettings,
       isMessageAIGenerated,
       latestMessageDatesByChannels,
       mutes,
-      navOpen,
-      openMobileNav,
       searchController,
       setActiveChannel,
       theme,
@@ -57,7 +51,6 @@ export const useCreateChatContext = (value: ChatContextValue) => {
       getAppSettings,
       searchController,
       mutedUsersLength,
-      navOpen,
       isMessageAIGenerated,
     ],
   );
diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx
index 89f06671fc..89ae49ab8a 100644
--- a/src/components/ChatView/ChatView.tsx
+++ b/src/components/ChatView/ChatView.tsx
@@ -237,7 +237,6 @@ export const ChatViewChannelsSelectorButton = ({
   iconOnly = true,
 }: ChatViewSelectorItemProps) => {
   const { activeChatView, setActiveChatView } = useChatViewContext();
-  const { openMobileNav } = useChatContext('ChatViewChannelsSelectorButton');
   const { t } = useTranslationContext();
 
   const isActive = activeChatView === 'channels';
@@ -248,10 +247,7 @@ export const ChatViewChannelsSelectorButton = ({
       Icon={IconMessageBubble}
       iconOnly={iconOnly}
       isActive={isActive}
-      onPointerDown={() => {
-        openMobileNav();
-        setActiveChatView('channels');
-      }}
+      onPointerDown={() => setActiveChatView('channels')}
       text={t('Channels')}
     />
   );
@@ -260,7 +256,7 @@ export const ChatViewChannelsSelectorButton = ({
 export const ChatViewThreadsSelectorButton = ({
   iconOnly = true,
 }: ChatViewSelectorItemProps) => {
-  const { client, openMobileNav } = useChatContext();
+  const { client } = useChatContext();
   const { unreadThreadCount } = useStateStore(
     client.threads.state,
     unreadThreadCountSelector,
@@ -278,10 +274,7 @@ export const ChatViewThreadsSelectorButton = ({
       Icon={IconThread}
       iconOnly={iconOnly}
       isActive={isActive}
-      onPointerDown={() => {
-        openMobileNav();
-        setActiveChatView('threads');
-      }}
+      onPointerDown={() => setActiveChatView('threads')}
       text={t('Threads')}
     >
       <UnreadCountBadge count={unreadThreadCount} position='top-right'>
@@ -317,21 +310,13 @@ export const defaultChatViewSelectorItemSet: ChatViewSelectorEntry[] = [
 const ChatViewSelector = ({
   iconOnly = true,
   itemSet = defaultChatViewSelectorItemSet,
-}: ChatViewSelectorProps) => {
-  const { navOpen } = useChatContext('ChatView.Selector');
-  return (
-    <div
-      className={clsx('str-chat__chat-view__selector', {
-        'str-chat__chat-view__selector--nav-closed': navOpen === false,
-        'str-chat__chat-view__selector--nav-open': navOpen === true,
-      })}
-    >
-      {itemSet.map(({ Component, type }) => (
-        <Component iconOnly={iconOnly} key={type} />
-      ))}
-    </div>
-  );
-};
+}: ChatViewSelectorProps) => (
+  <div className='str-chat__chat-view__selector'>
+    {itemSet.map(({ Component, type }) => (
+      <Component iconOnly={iconOnly} key={type} />
+    ))}
+  </div>
+);
 
 ChatView.Channels = ChannelsView;
 ChatView.Threads = ThreadsView;
diff --git a/src/components/ChatView/__tests__/ChatView.test.tsx b/src/components/ChatView/__tests__/ChatView.test.tsx
index e07e9826de..e5b9aec40c 100644
--- a/src/components/ChatView/__tests__/ChatView.test.tsx
+++ b/src/components/ChatView/__tests__/ChatView.test.tsx
@@ -48,11 +48,9 @@ const renderComponent = async (threadManagerState: any) => {
       value={{
         channelsQueryState: fromPartial({}),
         client,
-        closeMobileNav: vi.fn(),
         getAppSettings: vi.fn(),
         latestMessageDatesByChannels: {},
         mutes: [],
-        openMobileNav: vi.fn(),
         searchController: fromPartial({}),
         setActiveChannel: vi.fn(),
         theme: 'messaging light',
@@ -82,11 +80,9 @@ const renderSelector = async (selectorProps?: any) => {
       value={{
         channelsQueryState: fromPartial({}),
         client,
-        closeMobileNav: vi.fn(),
         getAppSettings: vi.fn(),
         latestMessageDatesByChannels: {},
         mutes: [],
-        openMobileNav: vi.fn(),
         searchController: fromPartial({}),
         setActiveChannel: vi.fn(),
         theme: 'messaging light',
diff --git a/src/components/ChatView/styling/ChatView.scss b/src/components/ChatView/styling/ChatView.scss
index 53346b7541..6e440f1ac4 100644
--- a/src/components/ChatView/styling/ChatView.scss
+++ b/src/components/ChatView/styling/ChatView.scss
@@ -29,47 +29,6 @@
     border-right: 1px solid var(--str-chat-selector-border-color);
     background-color: var(--str-chat-selector-background-color);
 
-    /* Mobile: hide when nav closed, show when nav open. */
-    @media (max-width: 767px) {
-      &.str-chat__chat-view__selector--nav-closed {
-        pointer-events: none;
-        transform: translateX(
-          calc(0px - var(--str-chat__chat-view-selector-transition-offset))
-        );
-        visibility: hidden;
-      }
-
-      inset-block: 0;
-      inset-inline-start: 0;
-      position: absolute;
-      transition:
-        transform var(--str-chat__chat-view-selector-transition-duration)
-          var(--str-chat__chat-view-selector-transition-easing),
-        visibility 0s linear var(--str-chat__chat-view-selector-transition-duration);
-      width: var(--str-chat__chat-view-selector-mobile-width);
-      z-index: 2;
-
-      &.str-chat__chat-view__selector--nav-open {
-        pointer-events: auto;
-        transform: translateX(0);
-        transition-delay: 0s, 0s;
-        visibility: visible;
-      }
-    }
-
-    /* Desktop (≥768px): collapse when nav closed so main content uses space. */
-    @media (min-width: 768px) {
-      &.str-chat__chat-view__selector--nav-closed {
-        width: 0;
-        min-width: 0;
-        overflow: hidden;
-        padding-inline: 0;
-        padding-block: 0;
-        gap: 0;
-        border-inline-end: none;
-      }
-    }
-
     .str-chat__chat-view__selector-button-container {
       display: flex;
       position: relative;
diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx
index c88e717dce..264d21511a 100644
--- a/src/components/Thread/ThreadHeader.tsx
+++ b/src/components/Thread/ThreadHeader.tsx
@@ -76,7 +76,6 @@ export const ThreadHeader = (props: ThreadHeaderProps) => {
 
   const { t } = useTranslationContext();
   const { channel } = useChannelStateContext();
-  const { navOpen } = useChatContext('ThreadHeader');
   const { SidebarToggle } = useComponentContext();
   const { activeChatView } = useChatViewContext();
   const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
@@ -101,7 +100,7 @@ export const ThreadHeader = (props: ThreadHeaderProps) => {
   return (
     <div className='str-chat__thread-header'>
       <div className='str-chat__thread-header__start'>
-        {activeChatView === 'threads' && !navOpen && SidebarToggle && <SidebarToggle />}
+        {activeChatView === 'threads' && SidebarToggle && <SidebarToggle />}
       </div>
       <div className='str-chat__thread-header-details'>
         <div className='str-chat__thread-header-title'>{t('Thread')}</div>
diff --git a/src/components/Thread/__tests__/ThreadHeader.test.tsx b/src/components/Thread/__tests__/ThreadHeader.test.tsx
index f5be05bbb2..6880d99a9b 100644
--- a/src/components/Thread/__tests__/ThreadHeader.test.tsx
+++ b/src/components/Thread/__tests__/ThreadHeader.test.tsx
@@ -87,10 +87,7 @@ const renderComponent = ({
     <ChatProvider
       value={fromPartial<ChatContextValue>({
         client,
-        closeMobileNav: vi.fn(),
         latestMessageDatesByChannels: {},
-        navOpen: false,
-        openMobileNav: vi.fn(),
       })}
     >
       <ChannelStateProvider value={mockChannelStateContext({ channel, thread })}>
diff --git a/src/components/Threads/ThreadList/ThreadList.tsx b/src/components/Threads/ThreadList/ThreadList.tsx
index d41547cdd2..49fbef9c9b 100644
--- a/src/components/Threads/ThreadList/ThreadList.tsx
+++ b/src/components/Threads/ThreadList/ThreadList.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import type { ComputeItemKey, VirtuosoProps } from 'react-virtuoso';
 import { Virtuoso } from 'react-virtuoso';
-import clsx from 'clsx';
-
 import type { Thread, ThreadManager, ThreadManagerState } from 'stream-chat';
 
 import { ThreadListItem as DefaultThreadListItem } from './ThreadListItem';
@@ -85,7 +83,7 @@ const useThreadHighlighting = (threadManager: ThreadManager) => {
 };
 
 export const ThreadList = ({ virtuosoProps }: ThreadListProps) => {
-  const { client, navOpen = true } = useChatContext();
+  const { client } = useChatContext();
   const {
     NotificationList: NotificationListFromContext = NotificationList,
     ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder,
@@ -101,11 +99,7 @@ export const ThreadList = ({ virtuosoProps }: ThreadListProps) => {
 
   if (isLoading && !threads.length) {
     return (
-      <div
-        className={clsx('str-chat__thread-list-container', {
-          'str-chat__thread-list-container--open': navOpen,
-        })}
-      >
+      <div className='str-chat__thread-list-container'>
         <ThreadListHeader />
         <div className='str-chat__thread-list str-chat__thread-list--loading'>
           <LoadingChannels />
@@ -115,11 +109,7 @@ export const ThreadList = ({ virtuosoProps }: ThreadListProps) => {
   }
 
   return (
-    <div
-      className={clsx('str-chat__thread-list-container', {
-        'str-chat__thread-list-container--open': navOpen,
-      })}
-    >
+    <div className='str-chat__thread-list-container'>
       <ThreadListHeader />
       {/* TODO: allow re-load on stale ThreadManager state */}
       <ThreadListUnseenThreadsBanner />
diff --git a/src/components/Threads/ThreadList/ThreadListHeader.tsx b/src/components/Threads/ThreadList/ThreadListHeader.tsx
index 89cc451220..185b150cdd 100644
--- a/src/components/Threads/ThreadList/ThreadListHeader.tsx
+++ b/src/components/Threads/ThreadList/ThreadListHeader.tsx
@@ -1,23 +1,13 @@
 import React from 'react';
-import clsx from 'clsx';
-import {
-  useChatContext,
-  useComponentContext,
-  useTranslationContext,
-} from '../../../context';
+import { useComponentContext, useTranslationContext } from '../../../context';
 import { useThreadsViewContext } from '../../ChatView';
 
 export const ThreadListHeader = () => {
   const { t } = useTranslationContext();
-  const { navOpen } = useChatContext();
   const { SidebarToggle } = useComponentContext();
   const { activeThread } = useThreadsViewContext();
   return (
-    <div
-      className={clsx('str-chat__thread-list__header', {
-        'str-chat__thread-list__header--sidebar-collapsed': !navOpen,
-      })}
-    >
+    <div className='str-chat__thread-list__header'>
       <div className='str-chat__thread-list__header__title'>{t('Threads')}</div>
       {activeThread && SidebarToggle && <SidebarToggle />}
     </div>
diff --git a/src/components/Threads/ThreadList/ThreadListItemUI.tsx b/src/components/Threads/ThreadList/ThreadListItemUI.tsx
index 2340aa625a..519c73dc29 100644
--- a/src/components/Threads/ThreadList/ThreadListItemUI.tsx
+++ b/src/components/Threads/ThreadList/ThreadListItemUI.tsx
@@ -13,7 +13,6 @@ import { useThreadListItemContext } from './ThreadListItem';
 import { useStateStore } from '../../../store';
 import { Badge } from '../../Badge';
 import { SummarizedMessagePreview } from '../../SummarizedMessagePreview';
-import { NAV_SIDEBAR_DESKTOP_BREAKPOINT } from '../../Chat';
 
 export type ThreadListItemUIProps = ComponentPropsWithoutRef<'button'> & {
   resetHighlighting?: () => void;
@@ -54,7 +53,6 @@ export const ThreadListItemUI = ({
   const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
   const { t } = useTranslationContext('ThreadListItemUI');
 
-  const { closeMobileNav } = useChatContext('ThreadListItemUI');
   const { activeThread, setActiveThread } = useThreadsViewContext();
 
   const avatarProps: Partial<AvatarProps> | undefined = deletedAt
@@ -96,15 +94,7 @@ export const ThreadListItemUI = ({
             typeof resetHighlighting !== 'undefined',
         })}
         data-thread-id={thread.id}
-        onClick={() => {
-          if (
-            typeof window !== 'undefined' &&
-            window.innerWidth < NAV_SIDEBAR_DESKTOP_BREAKPOINT
-          ) {
-            closeMobileNav();
-          }
-          setActiveThread(thread);
-        }}
+        onClick={() => setActiveThread(thread)}
         role='option'
         {...props}
       >
diff --git a/src/components/Threads/ThreadList/__tests__/ThreadList.test.tsx b/src/components/Threads/ThreadList/__tests__/ThreadList.test.tsx
index 2c637793df..5309f7472a 100644
--- a/src/components/Threads/ThreadList/__tests__/ThreadList.test.tsx
+++ b/src/components/Threads/ThreadList/__tests__/ThreadList.test.tsx
@@ -60,7 +60,7 @@ describe('ThreadList', () => {
   };
 
   beforeEach(() => {
-    mockUseChatContext.mockReturnValue({ client: mockClient, navOpen: true });
+    mockUseChatContext.mockReturnValue({ client: mockClient });
     mockUseComponentContext.mockReturnValue({});
     mockUseStateStore.mockReturnValue({ isLoading: false, threads: [] });
   });
diff --git a/src/components/Threads/ThreadList/styling/ThreadList.scss b/src/components/Threads/ThreadList/styling/ThreadList.scss
index 4335bcd4c3..a699015846 100644
--- a/src/components/Threads/ThreadList/styling/ThreadList.scss
+++ b/src/components/Threads/ThreadList/styling/ThreadList.scss
@@ -71,42 +71,6 @@
     width: var(--str-chat__thread-list-mobile-width);
     z-index: 1;
 
-    &.str-chat__thread-list-container--open {
-      box-shadow: var(--str-chat__thread-list-box-shadow);
-      pointer-events: auto;
-      transform: translateX(0);
-      transition-delay: 0s, 0s;
-      visibility: visible;
-
-      .str-chat__chat-view & {
-        inset-inline-start: var(--str-chat__chat-view-selector-mobile-width, 0px);
-        width: calc(100% - var(--str-chat__chat-view-selector-mobile-width, 0px));
-      }
-    }
-  }
-
-  /* Desktop (≥768px): collapse when nav closed so main content uses space. */
-  @media (min-width: 768px) {
-    &.str-chat__thread-list-container--open {
-      flex-basis: var(--str-chat__thread-list-width);
-      max-width: 100%;
-      min-width: var(--str-chat__thread-list-min-width);
-      opacity: 1;
-      pointer-events: auto;
-      transform: translateX(0);
-      width: var(--str-chat__thread-list-width);
-    }
-
-    &:not(.str-chat__thread-list-container--open) {
-      flex: 0 0 0;
-      width: 0;
-      min-width: 0;
-      max-width: 0;
-      opacity: 0;
-      overflow: hidden;
-      pointer-events: none;
-      transform: translateX(calc(0px - var(--str-chat__thread-list-transition-offset)));
-    }
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/src/components/Threads/ThreadList/styling/ThreadListHeader.scss b/src/components/Threads/ThreadList/styling/ThreadListHeader.scss
index a60e2cd744..7ea4de58cb 100644
--- a/src/components/Threads/ThreadList/styling/ThreadListHeader.scss
+++ b/src/components/Threads/ThreadList/styling/ThreadListHeader.scss
@@ -1,15 +1,8 @@
 .str-chat__thread-list__header {
   display: flex;
   align-items: center;
-  opacity: 1;
   padding: var(--spacing-md);
   height: var(--str-chat__channel-header-height);
-  transform: translateX(0);
-  transition:
-    opacity var(--str-chat__channel-list-transition-duration, 180ms)
-      var(--str-chat__channel-list-transition-easing, ease),
-    transform var(--str-chat__channel-list-transition-duration, 180ms)
-      var(--str-chat__channel-list-transition-easing, ease);
   width: 100%;
 
   .str-chat__thread-list__header__title {
@@ -17,29 +10,4 @@
     font: var(--str-chat__heading-lg-text);
     color: var(--text-primary);
   }
-
-  &.str-chat__thread-list__header--sidebar-collapsed {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateX(
-      calc(0px - var(--str-chat__channel-list-transition-offset, 8px))
-    );
-
-    .str-chat__header-sidebar-toggle {
-      // Compact styling when sidebar collapsed
-    }
-  }
-
-  @media (max-width: 767px) {
-    transition: none;
-
-    &.str-chat__thread-list__header--sidebar-collapsed {
-      opacity: 1;
-      transform: none;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 }
diff --git a/src/context/ChatContext.tsx b/src/context/ChatContext.tsx
index fbd7f74c7a..83af30a3de 100644
--- a/src/context/ChatContext.tsx
+++ b/src/context/ChatContext.tsx
@@ -31,11 +31,9 @@ export type ChatContextValue = {
    * Indicates, whether a channels query has been triggered within ChannelList by its channels pagination controller.
    */
   channelsQueryState: ChannelsQueryState;
-  closeMobileNav: () => void;
   getAppSettings: () => Promise<AppSettingsAPIResponse> | null;
   latestMessageDatesByChannels: Record<ChannelConfId, Date>;
   mutes: Array<Mute>;
-  openMobileNav: () => void;
   /** Instance of SearchController class that allows to control all the search operations. */
   searchController: SearchController;
   /**
@@ -58,7 +56,6 @@ export type ChatContextValue = {
    * Object through which custom classes can be set for main container components of the SDK.
    */
   customClasses?: CustomClasses;
-  navOpen?: boolean;
 } & Partial<Pick<ChatProps, 'isMessageAIGenerated'>> &
   Required<Pick<ChatProps, 'theme' | 'client'>>;
 
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index 295372067f..7a1305fee0 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -261,7 +261,7 @@ export type ComponentContextValue = {
   TypingIndicator?: React.ComponentType<TypingIndicatorProps>;
   /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */
   UnreadMessagesNotification?: React.ComponentType<UnreadMessagesNotificationProps>;
-  /** Custom UI component rendered in header slots to toggle sidebar visibility. The SDK does not provide a default — if omitted, no toggle button is rendered. Use `useChatContext()` to access `navOpen`, `openMobileNav`, and `closeMobileNav`. */
+  /** Custom UI component rendered in header slots to toggle sidebar visibility. The SDK does not provide a default — if omitted, no toggle button is rendered. The application is responsible for managing sidebar state. */
   SidebarToggle?: React.ComponentType;
   /** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */
   UnreadMessagesSeparator?: React.ComponentType<UnreadMessagesSeparatorProps>;

From a0a9869044384610c4d41f97e9e44d4c5ced67e8 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Tue, 7 Apr 2026 14:17:59 +0200
Subject: [PATCH 5/8] refactor: rename SidebarToggle slot to HeaderStartContent
 / HeaderEndContent

Split the single SidebarToggle slot into two generic slots:

- HeaderStartContent: rendered at the start of content headers
  (ChannelHeader, ThreadHeader)
- HeaderEndContent: rendered at the end of sidebar headers
  (ChannelListHeader, ThreadListHeader)

These are position-aware, generic slots that can serve any purpose
(sidebar toggle, breadcrumbs, back button, etc.).
---
 examples/vite/src/App.tsx                            |  3 ++-
 src/components/ChannelHeader/ChannelHeader.tsx       |  4 ++--
 .../ChannelHeader/__tests__/ChannelHeader.test.tsx   | 10 +++++-----
 src/components/ChannelHeader/plan.md                 | 10 +++++-----
 src/components/ChannelList/ChannelListHeader.tsx     |  4 ++--
 .../ChannelList/__tests__/ChannelListHeader.test.tsx | 12 ++++++------
 src/components/Thread/ThreadHeader.tsx               |  4 ++--
 .../Threads/ThreadList/ThreadListHeader.tsx          |  4 ++--
 .../ThreadList/__tests__/ThreadListHeader.test.tsx   | 12 ++++++------
 src/context/ComponentContext.tsx                     |  6 ++++--
 10 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
index 540f4b140c..08b72bb7df 100644
--- a/examples/vite/src/App.tsx
+++ b/examples/vite/src/App.tsx
@@ -392,7 +392,8 @@ const App = () => {
         MessageReactions: CustomMessageReactions,
         reactionOptions: newReactionOptions,
         Search: CustomChannelSearch,
-        SidebarToggle,
+        HeaderEndContent: SidebarToggle,
+        HeaderStartContent: SidebarToggle,
         ...messageUiOverrides,
       }}
     >
diff --git a/src/components/ChannelHeader/ChannelHeader.tsx b/src/components/ChannelHeader/ChannelHeader.tsx
index fb81ac5747..22ad27c32f 100644
--- a/src/components/ChannelHeader/ChannelHeader.tsx
+++ b/src/components/ChannelHeader/ChannelHeader.tsx
@@ -49,7 +49,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
   const { Avatar = DefaultAvatar, image: overrideImage, title: overrideTitle } = props;
 
   const { channel } = useChannelStateContext();
-  const { SidebarToggle } = useComponentContext();
+  const { HeaderStartContent } = useComponentContext();
   const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
     channel,
     overrideImage,
@@ -59,7 +59,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
   return (
     <div className='str-chat__channel-header'>
       <div className='str-chat__channel-header__start'>
-        {SidebarToggle && <SidebarToggle />}
+        {HeaderStartContent && <HeaderStartContent />}
       </div>
       <div className='str-chat__channel-header__data'>
         <div className='str-chat__channel-header__data__title'>{displayTitle}</div>
diff --git a/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx b/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
index dfb61759de..d75ed975f1 100644
--- a/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
+++ b/src/components/ChannelHeader/__tests__/ChannelHeader.test.tsx
@@ -180,15 +180,15 @@ describe('ChannelHeader', () => {
     });
   });
 
-  describe('SidebarToggle slot', () => {
-    const SidebarToggle = () => <div data-testid='sidebar-toggle' />;
+  describe('HeaderStartContent slot', () => {
+    const HeaderStartContent = () => <div data-testid='sidebar-toggle' />;
 
-    it('should not render SidebarToggle when not provided via ComponentContext', async () => {
+    it('should not render HeaderStartContent when not provided via ComponentContext', async () => {
       await renderComponent();
       expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
     });
 
-    it('should render SidebarToggle when provided via ComponentContext', async () => {
+    it('should render HeaderStartContent when provided via ComponentContext', async () => {
       client = await getTestClientWithUser(user1);
       testChannel1 = generateChannel({ ...defaultChannelState });
       useMockedApis(client, [getOrCreateChannelApi(testChannel1)]);
@@ -196,7 +196,7 @@ describe('ChannelHeader', () => {
       await channel.query();
 
       render(
-        <WithComponents overrides={{ SidebarToggle }}>
+        <WithComponents overrides={{ HeaderStartContent }}>
           <ChatProvider value={mockChatContext({ channel, client })}>
             <ChannelStateProvider value={mockChannelStateContext({ channel })}>
               <TranslationProvider value={mockTranslationContextValue({ t })}>
diff --git a/src/components/ChannelHeader/plan.md b/src/components/ChannelHeader/plan.md
index 4425c766ee..5cb704c54d 100644
--- a/src/components/ChannelHeader/plan.md
+++ b/src/components/ChannelHeader/plan.md
@@ -31,7 +31,7 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 **Key design elements (channel header section):**
 
 - Layout: `[sidebar toggle slot] | [channelName + Online stacked] | [avatar right]`
-- Sidebar toggle is provided externally via `SidebarToggle` in `ComponentContext`
+- Sidebar toggle is provided externally via `HeaderStartContent` in `ComponentContext`
 - Avatar on the right (current impl has it between toggle and title)
 
 ---
@@ -78,7 +78,7 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 - Add `@use '../components/ChannelHeader/styling' as ChannelHeader` to `src/styling/index.scss` in the appropriate group (alphabetical, chat components)
 - Update `ChannelHeader.tsx`:
   - Reorder layout: sidebar toggle slot | text block (title + Online) | avatar (right)
-  - The sidebar toggle is provided externally via the `SidebarToggle` slot in `ComponentContext` (no built-in toggle or `MenuIcon` prop)
+  - The sidebar toggle is provided externally via the `HeaderStartContent` slot in `ComponentContext` (no built-in toggle or `MenuIcon` prop)
   - Simplify info line to "Online" (or keep watcher_count: "X online") per design
 - Preserve: `live`, `subtitle`, `member_count`, `Avatar`, `title`, `image` — ensure backward compatibility
 - Note: sidebar collapsed/expanded state is NOT managed by the SDK; the app owns sidebar visibility
@@ -87,7 +87,7 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 
 - [ ] ChannelHeader styles imported in `src/styling/index.scss`
 - [ ] Component layout matches Figma: avatar on right, text in middle
-- [ ] `SidebarToggle` slot renders when provided via `ComponentContext`
+- [ ] `HeaderStartContent` slot renders when provided via `ComponentContext`
 - [ ] Existing tests pass; update tests if needed for new structure
 
 ---
@@ -105,7 +105,7 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 **Scope:**
 
 - Run existing tests; fix any failures from layout/class changes
-- Add tests for `SidebarToggle` slot rendering when applicable
+- Add tests for `HeaderStartContent` slot rendering when applicable
 - Ensure `yarn test`, `yarn types`, `yarn lint-fix` pass
 
 **Acceptance Criteria:**
@@ -140,5 +140,5 @@ Tasks are self-contained; styling and component tasks have a dependency order. A
 
 - ChannelHeader currently has no dedicated styling folder; styles may come from stream-chat-css. This plan introduces ChannelHeader/styling per dev-patterns.
 - Loading channel header in `Channel/styling/Channel.scss` uses `--str-chat__channel-header-background-color`; keep variable usage consistent.
-- Sidebar toggle is externally provided via `SidebarToggle` slot in `ComponentContext`. The SDK does not own sidebar state — apps provide their own toggle via `WithComponents`.
+- Sidebar toggle is externally provided via `HeaderStartContent` slot in `ComponentContext`. The SDK does not own sidebar state — apps provide their own toggle via `WithComponents`.
 - No `sidebarCollapsed` prop or `MenuIcon` prop — these were removed as part of the navOpen removal.
diff --git a/src/components/ChannelList/ChannelListHeader.tsx b/src/components/ChannelList/ChannelListHeader.tsx
index b1665ba432..ca47e2444d 100644
--- a/src/components/ChannelList/ChannelListHeader.tsx
+++ b/src/components/ChannelList/ChannelListHeader.tsx
@@ -8,11 +8,11 @@ import {
 export const ChannelListHeader = () => {
   const { t } = useTranslationContext();
   const { channel } = useChatContext();
-  const { SidebarToggle } = useComponentContext();
+  const { HeaderEndContent } = useComponentContext();
   return (
     <div className='str-chat__channel-list__header'>
       <div className='str-chat__channel-list__header__title'>{t('Chats')}</div>
-      {channel && SidebarToggle && <SidebarToggle />}
+      {channel && HeaderEndContent && <HeaderEndContent />}
     </div>
   );
 };
diff --git a/src/components/ChannelList/__tests__/ChannelListHeader.test.tsx b/src/components/ChannelList/__tests__/ChannelListHeader.test.tsx
index c0c40b1e47..a0c9f9ab26 100644
--- a/src/components/ChannelList/__tests__/ChannelListHeader.test.tsx
+++ b/src/components/ChannelList/__tests__/ChannelListHeader.test.tsx
@@ -6,12 +6,12 @@ import { mockChatContext, mockTranslationContextValue } from '../../../mock-buil
 import { ChannelListHeader } from '../ChannelListHeader';
 
 const t = vi.fn((key: string) => key);
-const SidebarToggle = () => <div data-testid='sidebar-toggle' />;
+const HeaderEndContent = () => <div data-testid='sidebar-toggle' />;
 
 afterEach(cleanup);
 
 describe('ChannelListHeader', () => {
-  it('should not render SidebarToggle when not provided via ComponentContext', () => {
+  it('should not render HeaderEndContent when not provided via ComponentContext', () => {
     render(
       <ChatProvider value={mockChatContext()}>
         <TranslationProvider value={mockTranslationContextValue({ t })}>
@@ -23,9 +23,9 @@ describe('ChannelListHeader', () => {
     expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
   });
 
-  it('should render SidebarToggle when a channel is active', () => {
+  it('should render HeaderEndContent when a channel is active', () => {
     render(
-      <WithComponents overrides={{ SidebarToggle }}>
+      <WithComponents overrides={{ HeaderEndContent }}>
         <ChatProvider value={mockChatContext({ channel: {} })}>
           <TranslationProvider value={mockTranslationContextValue({ t })}>
             <ChannelListHeader />
@@ -37,9 +37,9 @@ describe('ChannelListHeader', () => {
     expect(screen.getByTestId('sidebar-toggle')).toBeInTheDocument();
   });
 
-  it('should not render SidebarToggle when no channel is active', () => {
+  it('should not render HeaderEndContent when no channel is active', () => {
     render(
-      <WithComponents overrides={{ SidebarToggle }}>
+      <WithComponents overrides={{ HeaderEndContent }}>
         <ChatProvider value={mockChatContext({ channel: undefined })}>
           <TranslationProvider value={mockTranslationContextValue({ t })}>
             <ChannelListHeader />
diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx
index 264d21511a..aaef556287 100644
--- a/src/components/Thread/ThreadHeader.tsx
+++ b/src/components/Thread/ThreadHeader.tsx
@@ -76,7 +76,7 @@ export const ThreadHeader = (props: ThreadHeaderProps) => {
 
   const { t } = useTranslationContext();
   const { channel } = useChannelStateContext();
-  const { SidebarToggle } = useComponentContext();
+  const { HeaderStartContent } = useComponentContext();
   const { activeChatView } = useChatViewContext();
   const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
 
@@ -100,7 +100,7 @@ export const ThreadHeader = (props: ThreadHeaderProps) => {
   return (
     <div className='str-chat__thread-header'>
       <div className='str-chat__thread-header__start'>
-        {activeChatView === 'threads' && SidebarToggle && <SidebarToggle />}
+        {activeChatView === 'threads' && HeaderStartContent && <HeaderStartContent />}
       </div>
       <div className='str-chat__thread-header-details'>
         <div className='str-chat__thread-header-title'>{t('Thread')}</div>
diff --git a/src/components/Threads/ThreadList/ThreadListHeader.tsx b/src/components/Threads/ThreadList/ThreadListHeader.tsx
index 185b150cdd..5b3047e8b2 100644
--- a/src/components/Threads/ThreadList/ThreadListHeader.tsx
+++ b/src/components/Threads/ThreadList/ThreadListHeader.tsx
@@ -4,12 +4,12 @@ import { useThreadsViewContext } from '../../ChatView';
 
 export const ThreadListHeader = () => {
   const { t } = useTranslationContext();
-  const { SidebarToggle } = useComponentContext();
+  const { HeaderEndContent } = useComponentContext();
   const { activeThread } = useThreadsViewContext();
   return (
     <div className='str-chat__thread-list__header'>
       <div className='str-chat__thread-list__header__title'>{t('Threads')}</div>
-      {activeThread && SidebarToggle && <SidebarToggle />}
+      {activeThread && HeaderEndContent && <HeaderEndContent />}
     </div>
   );
 };
diff --git a/src/components/Threads/ThreadList/__tests__/ThreadListHeader.test.tsx b/src/components/Threads/ThreadList/__tests__/ThreadListHeader.test.tsx
index 3aadebfcce..693d4f2399 100644
--- a/src/components/Threads/ThreadList/__tests__/ThreadListHeader.test.tsx
+++ b/src/components/Threads/ThreadList/__tests__/ThreadListHeader.test.tsx
@@ -14,12 +14,12 @@ vi.mock('../../../ChatView', () => ({
 import { useThreadsViewContext } from '../../../ChatView';
 
 const t = vi.fn((key: string) => key);
-const SidebarToggle = () => <div data-testid='sidebar-toggle' />;
+const HeaderEndContent = () => <div data-testid='sidebar-toggle' />;
 
 afterEach(cleanup);
 
 describe('ThreadListHeader', () => {
-  it('should not render SidebarToggle when not provided via ComponentContext', () => {
+  it('should not render HeaderEndContent when not provided via ComponentContext', () => {
     render(
       <ChatProvider value={mockChatContext()}>
         <TranslationProvider value={mockTranslationContextValue({ t })}>
@@ -31,14 +31,14 @@ describe('ThreadListHeader', () => {
     expect(screen.queryByTestId('sidebar-toggle')).not.toBeInTheDocument();
   });
 
-  it('should render SidebarToggle when a thread is active', () => {
+  it('should render HeaderEndContent when a thread is active', () => {
     vi.mocked(useThreadsViewContext).mockReturnValue({
       activeThread: fromPartial<Thread>({}),
       setActiveThread: vi.fn(),
     });
 
     render(
-      <WithComponents overrides={{ SidebarToggle }}>
+      <WithComponents overrides={{ HeaderEndContent }}>
         <ChatProvider value={mockChatContext()}>
           <TranslationProvider value={mockTranslationContextValue({ t })}>
             <ThreadListHeader />
@@ -50,14 +50,14 @@ describe('ThreadListHeader', () => {
     expect(screen.getByTestId('sidebar-toggle')).toBeInTheDocument();
   });
 
-  it('should not render SidebarToggle when no thread is active', () => {
+  it('should not render HeaderEndContent when no thread is active', () => {
     vi.mocked(useThreadsViewContext).mockReturnValue({
       activeThread: undefined,
       setActiveThread: vi.fn(),
     });
 
     render(
-      <WithComponents overrides={{ SidebarToggle }}>
+      <WithComponents overrides={{ HeaderEndContent }}>
         <ChatProvider value={mockChatContext()}>
           <TranslationProvider value={mockTranslationContextValue({ t })}>
             <ThreadListHeader />
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index 7a1305fee0..acd7207db0 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -261,8 +261,10 @@ export type ComponentContextValue = {
   TypingIndicator?: React.ComponentType<TypingIndicatorProps>;
   /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */
   UnreadMessagesNotification?: React.ComponentType<UnreadMessagesNotificationProps>;
-  /** Custom UI component rendered in header slots to toggle sidebar visibility. The SDK does not provide a default — if omitted, no toggle button is rendered. The application is responsible for managing sidebar state. */
-  SidebarToggle?: React.ComponentType;
+  /** Custom UI component rendered at the end of sidebar headers (ChannelListHeader, ThreadListHeader). No default — if omitted, the slot is empty. */
+  HeaderEndContent?: React.ComponentType;
+  /** Custom UI component rendered at the start of content headers (ChannelHeader, ThreadHeader). No default — if omitted, the slot is empty. */
+  HeaderStartContent?: React.ComponentType;
   /** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */
   UnreadMessagesSeparator?: React.ComponentType<UnreadMessagesSeparatorProps>;
   /** Component used to play video. If not provided, ReactPlayer is used as a default video player. */

From 0811b4dfbae6aa8412fed0ce07c03382286ab5d1 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Tue, 7 Apr 2026 14:39:47 +0200
Subject: [PATCH 6/8] fix(examples): remove unnecessary setTimeout from
 openSidebar

---
 examples/vite/src/ChatLayout/SidebarContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/vite/src/ChatLayout/SidebarContext.tsx b/examples/vite/src/ChatLayout/SidebarContext.tsx
index 36a98ae692..6472a570ee 100644
--- a/examples/vite/src/ChatLayout/SidebarContext.tsx
+++ b/examples/vite/src/ChatLayout/SidebarContext.tsx
@@ -22,7 +22,7 @@ export const SidebarProvider = ({
   const [sidebarOpen, setSidebarOpen] = useState(initialOpen);
 
   const closeSidebar = useCallback(() => setSidebarOpen(false), []);
-  const openSidebar = useCallback(() => setTimeout(() => setSidebarOpen(true), 100), []);
+  const openSidebar = useCallback(() => setSidebarOpen(true), []);
 
   return (
     <SidebarContext.Provider value={{ closeSidebar, openSidebar, sidebarOpen }}>

From d6b0dc475a3a5d269dbdf5602f610f46f51bf6db Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Tue, 7 Apr 2026 15:11:26 +0200
Subject: [PATCH 7/8] style: fix prettier formatting in SCSS files

---
 examples/vite/src/index.scss                              | 4 +---
 src/components/ChannelHeader/styling/ChannelHeader.scss   | 1 -
 src/components/ChannelList/styling/ChannelList.scss       | 1 -
 src/components/Threads/ThreadList/styling/ThreadList.scss | 1 -
 4 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss
index 5383f58225..6ec84dbec3 100644
--- a/examples/vite/src/index.scss
+++ b/examples/vite/src/index.scss
@@ -318,9 +318,7 @@ body {
       display: none;
     }
 
-    .app-chat-view__threads-layout:not(
-        .app-chat-view__threads-layout--sidebar-collapsed
-      )
+    .app-chat-view__threads-layout:not(.app-chat-view__threads-layout--sidebar-collapsed)
       .str-chat__thread-header
       .str-chat__header-sidebar-toggle {
       display: none;
diff --git a/src/components/ChannelHeader/styling/ChannelHeader.scss b/src/components/ChannelHeader/styling/ChannelHeader.scss
index f9044e21dc..ff93ce6335 100644
--- a/src/components/ChannelHeader/styling/ChannelHeader.scss
+++ b/src/components/ChannelHeader/styling/ChannelHeader.scss
@@ -63,5 +63,4 @@
     font: var(--str-chat__caption-default-text);
     color: var(--str-chat__channel-header__data__subtitle-color);
   }
-
 }
diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss
index a9fb5067ba..0d74f6782f 100644
--- a/src/components/ChannelList/styling/ChannelList.scss
+++ b/src/components/ChannelList/styling/ChannelList.scss
@@ -194,7 +194,6 @@
       inset-inline-start: var(--str-chat__chat-view-selector-mobile-width, 0px);
       width: calc(100% - var(--str-chat__chat-view-selector-mobile-width, 0px));
     }
-
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/src/components/Threads/ThreadList/styling/ThreadList.scss b/src/components/Threads/ThreadList/styling/ThreadList.scss
index a699015846..35e77141f3 100644
--- a/src/components/Threads/ThreadList/styling/ThreadList.scss
+++ b/src/components/Threads/ThreadList/styling/ThreadList.scss
@@ -70,7 +70,6 @@
     visibility: hidden;
     width: var(--str-chat__thread-list-mobile-width);
     z-index: 1;
-
   }
 
   @media (prefers-reduced-motion: reduce) {

From 0bc0dbd3e44efc66f274581b0040f9958d117a6c Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Wed, 8 Apr 2026 11:48:35 +0200
Subject: [PATCH 8/8] chore: remove missing import

---
 src/components/ChannelList/hooks/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ChannelList/hooks/index.ts b/src/components/ChannelList/hooks/index.ts
index 85c9bf0e04..421def9a09 100644
--- a/src/components/ChannelList/hooks/index.ts
+++ b/src/components/ChannelList/hooks/index.ts
@@ -1,5 +1,4 @@
 export * from './useConnectionRecoveredListener';
-export * from './useMobileNavigation';
 export * from './usePaginatedChannels';
 export * from './useChannelMembershipState';
 export * from './useChannelMembersState';