[Web] Update dashboard view to use sidenav (#51237)

* update dashboard view to use sidenav * delete old nav * CR * CR
gravitational · Jan 21, 2025 · d66ca4f · d66ca4f
1 parent c7c5273
commit d66ca4f
Show file tree

Hide file tree

Showing 30 changed files with 548 additions and 2,999 deletions.
diff --git a/web/packages/teleport/src/Main/Main.tsx b/web/packages/teleport/src/Main/Main.tsx
@@ -42,16 +42,13 @@ import { Redirect, Route, Switch } from 'teleport/components/Router';
 import cfg from 'teleport/config';
 import { FeaturesContextProvider, useFeatures } from 'teleport/FeaturesContext';
 import { Navigation } from 'teleport/Navigation';
-import { Navigation as SideNavigation } from 'teleport/Navigation/SideNavigation/Navigation';
 import {
   ClusterAlert,
   LINK_DESTINATION_LABEL,
   LINK_TEXT_LABEL,
 } from 'teleport/services/alerts/alerts';
 import { storageService } from 'teleport/services/storageService';
-import { TopBar } from 'teleport/TopBar';
-import { TopBarProps } from 'teleport/TopBar/TopBar';
-import { TopBar as TopBarSideNav } from 'teleport/TopBar/TopBarSideNav';
+import { TopBar, TopBarProps } from 'teleport/TopBar';
 import type { LockedFeatures, TeleportFeature } from 'teleport/types';
 import { useUser } from 'teleport/User/UserContext';
 import useTeleport from 'teleport/useTeleport';
@@ -78,13 +75,6 @@ export function Main(props: MainProps) {
 
   const { preferences } = useUser();
 
-  const isTopBarView = storageService.getIsTopBarView();
-  const TopBarComponent =
-    //TODO(rudream): Add sidenav dashboard view.
-    isTopBarView || cfg.isDashboard ? TopBar : TopBarSideNav;
-  const NavigationComponent =
-    isTopBarView || cfg.isDashboard ? Navigation : SideNavigation;
-
   useEffect(() => {
     if (ctx.storeUser.state) {
       setAttempt({ status: 'success' });
@@ -195,7 +185,7 @@ export function Main(props: MainProps) {
 
   return (
     <FeaturesContextProvider value={features}>
-      <TopBarComponent
+      <TopBar
         CustomLogo={
           props.topBarProps?.showPoweredByLogo
             ? props.topBarProps.CustomLogo
@@ -204,7 +194,7 @@ export function Main(props: MainProps) {
       />
       <Wrapper>
         <MainContainer>
-          <NavigationComponent />
+          <Navigation />
           <ContentWrapper>
             <ContentMinWidth>
               <BannerList

diff --git a/...avigation/SideNavigation/CategoryIcon.tsx → .../teleport/src/Navigation/CategoryIcon.tsx b/...avigation/SideNavigation/CategoryIcon.tsx → .../teleport/src/Navigation/CategoryIcon.tsx