chore: delete client/navbar and rename client/NavBarV2 to `client…

…/navbar`

apps/meteor/client/navbar/Navbar.tsx

@@ -1,22 +1,87 @@
-import React from 'react';
+import { useToolbar } from '@react-aria/toolbar';
+import { NavBar as NavBarComponent, NavBarSection, NavBarGroup, NavBarDivider } from '@rocket.chat/fuselage';
+import { usePermission, useTranslation, useUser } from '@rocket.chat/ui-contexts';
+import { useVoipState } from '@rocket.chat/ui-voip';
+import React, { useRef } from 'react';
 
-import { Navbar as NavbarComponent } from '../components/Navbar';
-import NavbarAdministrationAction from './actions/NavbarAdministrationAction';
-import NavbarAuditAction from './actions/NavbarAuditAction';
-import NavbarHomeAction from './actions/NavbarHomeAction';
-import NavbarMarketplaceAction from './actions/NavbarMarketplaceAction';
-import NavbarUserAction from './actions/NavbarUserAction';
+import { useIsCallEnabled, useIsCallReady } from '../contexts/CallContext';
+import { useOmnichannelEnabled } from '../hooks/omnichannel/useOmnichannelEnabled';
+import { useOmnichannelShowQueueLink } from '../hooks/omnichannel/useOmnichannelShowQueueLink';
+import { useHasLicenseModule } from '../hooks/useHasLicenseModule';
+import {
+	NavBarItemOmniChannelCallDialPad,
+	NavBarItemOmnichannelContact,
+	NavBarItemOmnichannelLivechatToggle,
+	NavBarItemOmnichannelQueue,
+	NavBarItemOmnichannelCallToggle,
+} from './NavBarOmnichannelToolbar';
+import { NavBarItemMarketPlaceMenu, NavBarItemAuditMenu, NavBarItemDirectoryPage, NavBarItemHomePage } from './NavBarPagesToolbar';
+import { NavBarItemLoginPage, NavBarItemAdministrationMenu, UserMenu } from './NavBarSettingsToolbar';
+import { NavBarItemVoipDialer } from './NavBarVoipToolbar';
+
+const NavBar = () => {
+	const t = useTranslation();
+	const user = useUser();
+
+	const hasAuditLicense = useHasLicenseModule('auditing') === true;
+
+	const showOmnichannel = useOmnichannelEnabled();
+	const hasManageAppsPermission = usePermission('manage-apps');
+	const hasAccessMarketplacePermission = usePermission('access-marketplace');
+	const showMarketplace = hasAccessMarketplacePermission || hasManageAppsPermission;
+
+	const showOmnichannelQueueLink = useOmnichannelShowQueueLink();
+	const isCallEnabled = useIsCallEnabled();
+	const isCallReady = useIsCallReady();
+	const { isEnabled: showVoip } = useVoipState();
+
+	const pagesToolbarRef = useRef(null);
+	const { toolbarProps: pagesToolbarProps } = useToolbar({ 'aria-label': t('Pages') }, pagesToolbarRef);
+
+	const omnichannelToolbarRef = useRef(null);
+	const { toolbarProps: omnichannelToolbarProps } = useToolbar({ 'aria-label': t('Omnichannel') }, omnichannelToolbarRef);
+
+	const voipToolbarRef = useRef(null);
+	const { toolbarProps: voipToolbarProps } = useToolbar({ 'aria-label': t('Voice_Call') }, voipToolbarRef);
 
-const Navbar = () => {
 	return (
-		<NavbarComponent>
-			<NavbarUserAction />
-			<NavbarHomeAction />
-			<NavbarMarketplaceAction />
-			<NavbarAuditAction />
-			<NavbarAdministrationAction />
-		</NavbarComponent>
+		<NavBarComponent aria-label='header'>
+			<NavBarSection>
+				<NavBarGroup role='toolbar' ref={pagesToolbarRef} {...pagesToolbarProps}>
+					<NavBarItemHomePage title={t('Home')} />
+					<NavBarItemDirectoryPage title={t('Directory')} />
+					{showMarketplace && <NavBarItemMarketPlaceMenu />}
+					{hasAuditLicense && <NavBarItemAuditMenu />}
+				</NavBarGroup>
+				{showOmnichannel && (
+					<>
+						<NavBarDivider />
+						<NavBarGroup role='toolbar' ref={omnichannelToolbarRef} {...omnichannelToolbarProps}>
+							{showOmnichannelQueueLink && <NavBarItemOmnichannelQueue title={t('Queue')} />}
+							{isCallReady && <NavBarItemOmniChannelCallDialPad />}
+							<NavBarItemOmnichannelContact title={t('Contacts')} />
+							{isCallEnabled && <NavBarItemOmnichannelCallToggle />}
+							<NavBarItemOmnichannelLivechatToggle />
+						</NavBarGroup>
+					</>
+				)}
+				{showVoip && (
+					<>
+						<NavBarDivider />
+						<NavBarGroup role='toolbar' ref={voipToolbarRef} {...voipToolbarProps}>
+							<NavBarItemVoipDialer primary={isCallEnabled} />
+						</NavBarGroup>
+					</>
+				)}
+			</NavBarSection>
+			<NavBarSection>
+				<NavBarGroup aria-label={t('Workspace_and_user_settings')}>
+					<NavBarItemAdministrationMenu />
+					{user ? <UserMenu user={user} /> : <NavBarItemLoginPage />}
+				</NavBarGroup>
+			</NavBarSection>
+		</NavBarComponent>
 	);
 };
 
-export default Navbar;
+export default NavBar;

apps/meteor/client/navbar/actions/NavbarAdministrationAction.tsx

@@ -3,13 +3,13 @@ import { useTranslation, useRouter } from '@rocket.chat/ui-contexts';
 import type { AllHTMLAttributes } from 'react';
 import React from 'react';
 
+import { useAdministrationMenu } from '../NavBarSettingsToolbar/hooks/useAdministrationMenu';
 import { NavbarAction } from '../../components/Navbar';
-import { useAdministrationItems } from '../../sidebar/header/actions/hooks/useAdministrationItems';
 
 const NavbarAdministrationAction = (props: AllHTMLAttributes<HTMLLIElement>) => {
 	const t = useTranslation();
 
-	const administrationItems = useAdministrationItems();
+	const administrationItems = useAdministrationMenu();
 
 	const handleAction = useHandleMenuAction(administrationItems);
 
@@ -23,7 +23,7 @@ const NavbarAdministrationAction = (props: AllHTMLAttributes<HTMLLIElement>) =>
 				title={t('Administration')}
 				icon='cog'
 				onAction={handleAction}
-				items={administrationItems}
+				sections={administrationItems}
 				placement='right-start'
 			/>
 		</NavbarAction>

apps/meteor/client/navbar/index.ts

@@ -1 +1 @@
-export { default } from './Navbar';
+export { default } from './NavBar';

apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx

@@ -4,7 +4,7 @@ import { useLayout, useSetting, useCurrentModal, useCurrentRoutePath, useRouter
 import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useRef } from 'react';
 
-import NavBar from '../../../NavBarV2';
+import NavBar from '../../../navbar';
 import Sidebar from '../../../sidebar';
 import AccessibilityShortcut from './AccessibilityShortcut';
 import { MainLayoutStyleTags } from './MainLayoutStyleTags';