replace SideBar new component

RocketChat · Sep 3, 2024 · 92fcca8 · 92fcca8
1 parent a45daa1
commit 92fcca8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 15 deletions.
diff --git a/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx b/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import type { ISubscription, IRoom } from '@rocket.chat/core-typings';
-import { SideBar, SideBarGroupTitle } from '@rocket.chat/fuselage';
+import { Box, SideBarGroupTitle } from '@rocket.chat/fuselage';
 import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useUserPreference, useUserId, useTranslation } from '@rocket.chat/ui-contexts';
@@ -68,14 +68,14 @@ const RoomList = () => {
 	const { groupCounts, groupList, roomList } = getRoomsByGroup(roomsList);
 
 	return (
-		<SideBar ref={ref}>
+		<Box position='relative' display='flex' overflow='hidden' height='full' flexGrow={1} flexShrink={1} flexBasis='auto' ref={ref}>
 			<GroupedVirtuoso
 				groupCounts={groupCounts}
 				groupContent={(index) => <SideBarGroupTitle title={t(groupList[index])} />}
 				itemContent={(index) => <RoomListRow data={itemData} item={roomList[index]} />}
 				components={{ Item: RoomListRowWrapper, List: RoomListWrapper, Scroller: VirtuosoScrollbars }}
 			/>
-		</SideBar>
+		</Box>
 	);
 };
 

diff --git a/apps/meteor/client/sidebarv2/Sidebar.tsx b/apps/meteor/client/sidebarv2/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@rocket.chat/fuselage';
+import { SideBar } from '@rocket.chat/fuselage';
 import { useSessionStorage } from '@rocket.chat/fuselage-hooks';
 import { useSetting, useUserPreference } from '@rocket.chat/ui-contexts';
 import React, { memo } from 'react';
@@ -15,23 +15,17 @@ const Sidebar = () => {
 	const presenceDisabled = useSetting<boolean>('Presence_broadcast_disabled');
 
 	return (
-		<Box
-			display='flex'
-			flexDirection='column'
-			height='100%'
-			is='nav'
-			className={[
-				'rcx-sidebar--main',
-				`rcx-sidebar rcx-sidebar--${sidebarViewMode}`,
-				sidebarHideAvatar && 'rcx-sidebar--hide-avatar',
-			].filter(Boolean)}
+		<SideBar
 			aria-label='sidebar'
+			className={['rcx-sidebar--main', `rcx-sidebar rcx-sidebar--${sidebarViewMode}`, sidebarHideAvatar && 'rcx-sidebar--hide-avatar']
+				.filter(Boolean)
+				.join(' ')}
 		>
 			<SearchSection />
 			{presenceDisabled && !bannerDismissed && <StatusDisabledSection onDismiss={() => setBannerDismissed(true)} />}
 			<SidebarRoomList />
 			<SidebarFooter />
-		</Box>
+		</SideBar>
 	);
 };