chore: Navbar lvl1 arrangements (#29816)

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',

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,108 +12,37 @@ 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<boolean>('Presence_broadcast_disabled');
 
  const sideBarBackground = css`
  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 (
  <>
- <Box id='sidebar-region' className={['rcx-sidebar', !sidebar.isCollapsed && isMobile && 'opened', sideBarStyle].filter(Boolean)}>
- <Box
- display='flex'
- flexDirection='column'
- height='100%'
- is='nav'
- className={[
- 'rcx-sidebar--main',
- `rcx-sidebar rcx-sidebar--${sidebarViewMode}`,
- sidebarHideAvatar && 'rcx-sidebar--hide-avatar',
- sideBarBackground,
- ].filter(Boolean)}
- role='navigation'
- data-qa-opened={sidebar.isCollapsed ? 'false' : 'true'}
- >
- <SidebarHeader />
- {presenceDisabled && !bannerDismissed && <StatusDisabledSection onDismiss={() => setBannerDismissed(true)} />}
- <SidebarRoomList />
- <SidebarFooter />
- </Box>
+ <Box
+ display='flex'
+ flexDirection='column'
+ height='100%'
+ is='nav'
+ className={[
+ 'rcx-sidebar--main',
+ `rcx-sidebar rcx-sidebar--${sidebarViewMode}`,
+ sidebarHideAvatar && 'rcx-sidebar--hide-avatar',
+ sideBarBackground,
+ ].filter(Boolean)}
+ role='navigation'
+ data-qa-opened={sidebar.isCollapsed ? 'false' : 'true'}
+ >
+ <SidebarHeader />
+ {presenceDisabled && !bannerDismissed && <StatusDisabledSection onDismiss={() => setBannerDismissed(true)} />}
+ <SidebarRoomList />
+ <SidebarFooter />
  </Box>
- {isMobile && (
- <Box className={[sidebarWrapStyle, !sidebar.isCollapsed && 'opened'].filter(Boolean)} onClick={() => sidebar.toggle()}></Box>
- )}
  </>
  );
 };
 
-export default Sidebar;
+export default memo(Sidebar);

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 (
+ <>
+ <FeaturePreview feature='navigationBar'>
+ <FeaturePreviewOn>
+ <Navbar />
+ </FeaturePreviewOn>
+ <FeaturePreviewOff>
+ <></>
+ </FeaturePreviewOff>
+ </FeaturePreview>
+ <Box id='sidebar-region' className={['rcx-sidebar', !sidebar.isCollapsed && isMobile && 'opened', sideBarStyle].filter(Boolean)}>
+ <Sidebar />
+ </Box>
+ {isMobile && (
+ <Box className={[sidebarWrapStyle, !sidebar.isCollapsed && 'opened'].filter(Boolean)} onClick={() => sidebar.toggle()}></Box>
+ )}
+ </>
+ );
+};
+
+export default memo(SidebarRegion);

apps/meteor/client/sidebar/index.ts

@@ -1 +1 @@
-export { default } from './Sidebar';
+export { default } from './SidebarRegion';

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();

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<T> = {
  room: T;

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
  >
  <PaletteStyleTag />
  <SidebarPaletteStyleTag />
- {!removeSidenav ? (
- <>
- <FeaturePreview feature='navigationBar'>
- <FeaturePreviewOn>
- <Navbar />
- </FeaturePreviewOn>
- <FeaturePreviewOff>
- <></>
- </FeaturePreviewOff>
- </FeaturePreview>
- <Sidebar />
- </>
- ) : null}
- <div className={['rc-old', 'main-content', readReceiptsEnabled ? 'read-receipts-enabled' : undefined].filter(Boolean).join(' ')}>
+ {!removeSidenav && <Sidebar />}
+ <main className={['rc-old', 'main-content', readReceiptsEnabled ? 'read-receipts-enabled' : undefined].filter(Boolean).join(' ')}>
  {children}
- </div>
+ </main>
  </Box>
  );
 };