diff --git a/apps/meteor/client/sidebar/Sidebar.stories.tsx b/apps/meteor/client/sidebar/Sidebar.stories.tsx index f738222516e7..f147ed86b4e4 100644 --- a/apps/meteor/client/sidebar/Sidebar.stories.tsx +++ b/apps/meteor/client/sidebar/Sidebar.stories.tsx @@ -6,7 +6,7 @@ import type { ObjectId } from 'mongodb'; import type { ContextType } from 'react'; import React from 'react'; -import Sidebar from './Sidebar'; +import Sidebar from './SidebarRegion'; export default { title: 'Sidebar', diff --git a/apps/meteor/client/sidebar/Sidebar.tsx b/apps/meteor/client/sidebar/Sidebar.tsx index 6e514ad7bc33..ae333bbdb2a1 100644 --- a/apps/meteor/client/sidebar/Sidebar.tsx +++ b/apps/meteor/client/sidebar/Sidebar.tsx @@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Palette } from '@rocket.chat/fuselage'; import { useSessionStorage } from '@rocket.chat/fuselage-hooks'; import { useLayout, useSetting, useUserPreference } from '@rocket.chat/ui-contexts'; -import React from 'react'; +import React, { memo } from 'react'; import SidebarRoomList from './RoomList'; import SidebarFooter from './footer'; @@ -12,7 +12,7 @@ import StatusDisabledSection from './sections/StatusDisabledSection'; const Sidebar = () => { const sidebarViewMode = useUserPreference('sidebarViewMode'); const sidebarHideAvatar = !useUserPreference('sidebarDisplayAvatar'); - const { isMobile, sidebar } = useLayout(); + const { sidebar } = useLayout(); const [bannerDismissed, setBannerDismissed] = useSessionStorage('presence_cap_notifier', false); const presenceDisabled = useSetting('Presence_broadcast_disabled'); @@ -20,100 +20,29 @@ const Sidebar = () => { background-color: ${Palette.surface['surface-tint']}; `; - const sideBarStyle = css` - position: relative; - z-index: 2; - display: flex; - flex-direction: column; - height: 100%; - user-select: none; - transition: transform 0.3s; - - &.opened { - box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px; - transform: translate3d(0px, 0px, 0px); - } - - @media (max-width: 767px) { - position: absolute; - user-select: none; - transform: translate3d(-100%, 0, 0); - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - touch-action: pan-y; - -webkit-user-drag: none; - will-change: transform; - - .rtl & { - transform: translate3d(200%, 0, 0); - - &.opened { - box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px; - transform: translate3d(0px, 0px, 0px); - } - } - } - - @media (min-width: 768px) and (max-width: 1599px) { - width: var(--sidebar-width); - min-width: var(--sidebar-width); - } - @media (min-width: 1600px) and (max-width: 1919px) { - width: var(--sidebar-md-width); - min-width: var(--sidebar-md-width); - } - @media (min-width: 1920px) { - width: var(--sidebar-lg-width); - min-width: var(--sidebar-lg-width); - } - `; - - const sidebarWrapStyle = css` - position: absolute; - z-index: 1; - top: 0; - left: 0; - height: 100%; - user-select: none; - transition: opacity 0.3s; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - touch-action: pan-y; - -webkit-user-drag: none; - - &.opened { - width: 100%; - background-color: rgb(0, 0, 0); - opacity: 0.8; - } - `; - return ( <> - - - - {presenceDisabled && !bannerDismissed && setBannerDismissed(true)} />} - - - + + + {presenceDisabled && !bannerDismissed && setBannerDismissed(true)} />} + + - {isMobile && ( - sidebar.toggle()}> - )} ); }; -export default Sidebar; +export default memo(Sidebar); diff --git a/apps/meteor/client/sidebar/SidebarRegion.tsx b/apps/meteor/client/sidebar/SidebarRegion.tsx new file mode 100644 index 000000000000..b0bf900be6a3 --- /dev/null +++ b/apps/meteor/client/sidebar/SidebarRegion.tsx @@ -0,0 +1,100 @@ +import { css } from '@rocket.chat/css-in-js'; +import { Box } from '@rocket.chat/fuselage'; +import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; +import { useLayout } from '@rocket.chat/ui-contexts'; +import React, { lazy, memo } from 'react'; + +import Sidebar from './Sidebar'; + +const Navbar = lazy(() => import('../navbar/Navbar')); + +const SidebarRegion = () => { + const { isMobile, sidebar } = useLayout(); + + const sideBarStyle = css` + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + height: 100%; + user-select: none; + transition: transform 0.3s; + + &.opened { + box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px; + transform: translate3d(0px, 0px, 0px); + } + + @media (max-width: 767px) { + position: absolute; + user-select: none; + transform: translate3d(-100%, 0, 0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + touch-action: pan-y; + -webkit-user-drag: none; + will-change: transform; + + .rtl & { + transform: translate3d(200%, 0, 0); + + &.opened { + box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px; + transform: translate3d(0px, 0px, 0px); + } + } + } + + @media (min-width: 768px) and (max-width: 1599px) { + width: var(--sidebar-width); + min-width: var(--sidebar-width); + } + @media (min-width: 1600px) and (max-width: 1919px) { + width: var(--sidebar-md-width); + min-width: var(--sidebar-md-width); + } + @media (min-width: 1920px) { + width: var(--sidebar-lg-width); + min-width: var(--sidebar-lg-width); + } + `; + + const sidebarWrapStyle = css` + position: absolute; + z-index: 1; + top: 0; + left: 0; + height: 100%; + user-select: none; + transition: opacity 0.3s; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + touch-action: pan-y; + -webkit-user-drag: none; + + &.opened { + width: 100%; + background-color: rgb(0, 0, 0); + opacity: 0.8; + } + `; + + return ( + <> + + + + + + <> + + + + + + {isMobile && ( + sidebar.toggle()}> + )} + + ); +}; + +export default memo(SidebarRegion); diff --git a/apps/meteor/client/sidebar/index.ts b/apps/meteor/client/sidebar/index.ts index e842a8591f87..55cd4f79dbf8 100644 --- a/apps/meteor/client/sidebar/index.ts +++ b/apps/meteor/client/sidebar/index.ts @@ -1 +1 @@ -export { default } from './Sidebar'; +export { default } from './SidebarRegion'; diff --git a/apps/meteor/client/views/modal/ModalRegion.tsx b/apps/meteor/client/views/modal/ModalRegion.tsx index 83ef9accefe0..b014a5be4f7c 100644 --- a/apps/meteor/client/views/modal/ModalRegion.tsx +++ b/apps/meteor/client/views/modal/ModalRegion.tsx @@ -1,11 +1,12 @@ import { useModal, useCurrentModal } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; -import React, { useCallback } from 'react'; -import { FocusScope } from 'react-aria'; +import React, { lazy, useCallback } from 'react'; import ModalBackdrop from '../../components/modal/ModalBackdrop'; import ModalPortal from '../../components/modal/ModalPortal'; +const FocusScope = lazy(() => import('react-aria').then((module) => ({ default: module.FocusScope }))); + const ModalRegion = (): ReactElement | null => { const currentModal = useCurrentModal(); const { setModal } = useModal(); diff --git a/apps/meteor/client/views/room/Header/Header.tsx b/apps/meteor/client/views/room/Header/Header.tsx index 20dc7a5ada98..cb8dabce3d48 100644 --- a/apps/meteor/client/views/room/Header/Header.tsx +++ b/apps/meteor/client/views/room/Header/Header.tsx @@ -3,13 +3,14 @@ import { isVoipRoom } from '@rocket.chat/core-typings'; import { HeaderToolbox } from '@rocket.chat/ui-client'; import { useLayout } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; -import React, { memo, useMemo } from 'react'; +import React, { lazy, memo, useMemo } from 'react'; import BurgerMenu from '../../../components/BurgerMenu'; -import DirectRoomHeader from './DirectRoomHeader'; -import OmnichannelRoomHeader from './Omnichannel/OmnichannelRoomHeader'; -import VoipRoomHeader from './Omnichannel/VoipRoomHeader'; -import RoomHeader from './RoomHeader'; + +const DirectRoomHeader = lazy(() => import('./DirectRoomHeader')); +const OmnichannelRoomHeader = lazy(() => import('./Omnichannel/OmnichannelRoomHeader')); +const VoipRoomHeader = lazy(() => import('./Omnichannel/VoipRoomHeader')); +const RoomHeader = lazy(() => import('./RoomHeader')); type HeaderProps = { room: T; diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx index 901ced6e7305..5a5ea0998c67 100644 --- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx +++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx @@ -1,12 +1,10 @@ import { Box } from '@rocket.chat/fuselage'; -import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import { useLayout, useSetting, useCurrentModal, useRoute, useCurrentRoutePath } from '@rocket.chat/ui-contexts'; import { PaletteStyleTag } from '@rocket.chat/ui-theming/src/PaletteStyleTag'; import { SidebarPaletteStyleTag } from '@rocket.chat/ui-theming/src/SidebarPaletteStyleTag'; import type { ReactElement, ReactNode } from 'react'; import React, { useEffect, useRef } from 'react'; -import Navbar from '../../../navbar'; import Sidebar from '../../../sidebar'; const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement => { @@ -50,22 +48,10 @@ const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement > - {!removeSidenav ? ( - <> - - - - - - <> - - - - - ) : null} -
+ {!removeSidenav && } +
{children} -
+ ); };