diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index fcc3f52550..2e7f5062ad 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -33,7 +33,6 @@ import data from '@emoji-mart/data/sets/14/native.json'; import { humanId } from 'human-id'; import { appSettingsStore, useAppSettingsSelector } from './AppSettings/state.ts'; -import { DESKTOP_LAYOUT_BREAKPOINT } from './ChatLayout/constants.ts'; import { ChannelsPanels, ThreadsPanels } from './ChatLayout/Panels.tsx'; import { PanelLayoutStyleSync, SidebarLayoutSync } from './ChatLayout/Resize.tsx'; import { @@ -159,9 +158,6 @@ const App = () => { tokenOrProvider: tokenProvider, userData: { id: userId }, }); - const useResponsiveInitialNav = - typeof window === 'undefined' || window.innerWidth < DESKTOP_LAYOUT_BREAKPOINT; - const searchController = useMemo(() => { if (!chatClient) return undefined; @@ -265,7 +261,6 @@ const App = () => { searchController={searchController} client={chatClient} initialNavOpen={initialNavOpen} - initialNavOpenResponsive={useResponsiveInitialNav} isMessageAIGenerated={isMessageAIGenerated} theme={chatTheme} > diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index b452b6486d..d56123937a 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -27,10 +27,10 @@ export type ChatProps = { defaultLanguage?: SupportedTranslations; /** Instance of Stream i18n */ i18nInstance?: Streami18n; - /** Initial status of mobile navigation. Ignored when initialNavOpenResponsive is true. */ + /** + * Initial open state of the sidebar. Omit for responsive (viewport-derived); set to true/false for an explicit initial state. + */ initialNavOpen?: boolean; - /** When true, sidebar (ChannelList/ThreadList + selector) is open on load; it closes when a channel or thread is selected. */ - initialNavOpenResponsive?: 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,8 +56,7 @@ export const Chat = (props: PropsWithChildren) => { customClasses, defaultLanguage, i18nInstance, - initialNavOpen = true, - initialNavOpenResponsive = true, + initialNavOpen, isMessageAIGenerated, searchController: customChannelSearchController, theme = 'messaging light', @@ -79,7 +78,6 @@ export const Chat = (props: PropsWithChildren) => { defaultLanguage, i18nInstance, initialNavOpen, - initialNavOpenResponsive, }); const channelsQueryState = useChannelsQueryState(); diff --git a/src/components/Chat/hooks/useChat.ts b/src/components/Chat/hooks/useChat.ts index c4cd406e85..1d8085055b 100644 --- a/src/components/Chat/hooks/useChat.ts +++ b/src/components/Chat/hooks/useChat.ts @@ -28,10 +28,10 @@ export type UseChatParams = { client: StreamChat; defaultLanguage?: SupportedTranslations; i18nInstance?: Streami18n; - /** Initial open state of the sidebar. Ignored when initialNavOpenResponsive is true. */ + /** + * Initial open state of the sidebar. Omit for responsive (viewport-derived); set to true/false for an explicit initial state. + */ initialNavOpen?: boolean; - /** When true, initial nav state is open so sidebar (ChannelList/ThreadList + selector) is visible; close on channel/thread selection. */ - initialNavOpenResponsive?: boolean; }; export const useChat = ({ @@ -39,7 +39,6 @@ export const useChat = ({ defaultLanguage = 'en', i18nInstance, initialNavOpen, - initialNavOpenResponsive = false, }: UseChatParams) => { const [translators, setTranslators] = useState({ t: defaultTranslatorFunction, @@ -50,8 +49,8 @@ export const useChat = ({ const [channel, setChannel] = useState(); const [mutes, setMutes] = useState>([]); const [navOpen, setNavOpen] = useState(() => { - if (initialNavOpenResponsive) return getDefaultNavOpenFromViewport() ?? true; - return initialNavOpen === false ? false : true; + if (initialNavOpen === undefined) return getDefaultNavOpenFromViewport() ?? true; + return initialNavOpen; }); const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = useState({});