chore(suite): extract LoggedOutSidebar

trezor · Feb 27, 2025 · 529ea57 · 529ea57
1 parent f219543
commit 529ea57
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 63 deletions.
diff --git a/packages/suite/src/components/suite/layouts/LoggedOutLayout.tsx b/packages/suite/src/components/suite/layouts/LoggedOutLayout.tsx
@@ -10,6 +10,7 @@ import { LayoutContext, LayoutContextPayload } from 'src/support/suite/LayoutCon
 import { ModalContextProvider } from 'src/support/suite/ModalContext';
 
 import { Metadata } from '../Metadata';
+import { LoggedOutSidebar } from './LoggedOutSidebar';
 import {
     AppWrapper,
     Body,
@@ -18,7 +19,6 @@ import {
     PageWrapper,
     Wrapper,
 } from './SuiteLayout/SuiteLayout';
-import { LoggedOutSidebar } from './WelcomeLayout/WelcomeLayout';
 import { ModalSwitcher } from '../modals/ModalSwitcher/ModalSwitcher';
 
 interface LoggedOutLayout {

diff --git a/packages/suite/src/components/suite/layouts/LoggedOutSidebar.tsx b/packages/suite/src/components/suite/layouts/LoggedOutSidebar.tsx
@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+import { Route } from '@suite-common/suite-types';
+import { Column, ElevationUp, useElevation } from '@trezor/components';
+import { Elevation, mapElevationToBackground, mapElevationToBorder } from '@trezor/theme';
+
+import { SIDEBAR_MIN_WIDTH } from './SuiteLayout/Sidebar/Sidebar';
+import { useSelector } from '../../../hooks/suite';
+import { selectIsInitialRun } from '../../../reducers/suite/suiteReducer';
+import { TrafficLightOffset } from '../TrafficLightOffset';
+import { Nav, SETTINGS_ROUTES } from './SuiteLayout/Sidebar/Navigation';
+import { NavItem } from './SuiteLayout/Sidebar/NavigationItem';
+import { QuickActions } from './SuiteLayout/Sidebar/QuickActions/QuickActions';
+
+const SidebarWrapper = styled.div<{ $elevation: Elevation }>`
+    background-color: ${mapElevationToBackground};
+    height: 100%;
+`;
+
+const SidebarNavColumn = styled.div<{ $elevation: Elevation; $minWidth: number }>`
+    border-right: solid 1px ${mapElevationToBorder};
+    min-width: ${({ $minWidth }) => $minWidth}px;
+    height: 100%;
+`;
+
+export const LoggedOutSidebar = () => {
+    const { elevation } = useElevation();
+
+    const isInitialRun = useSelector(selectIsInitialRun);
+    const startRoute: Route['name'] = isInitialRun ? 'suite-start' : 'suite-index';
+
+    return (
+        <SidebarWrapper $elevation={elevation}>
+            <ElevationUp>
+                <SidebarNavColumn $elevation={elevation} $minWidth={SIDEBAR_MIN_WIDTH}>
+                    <TrafficLightOffset>
+                        <Column justifyContent="space-between" height="100%">
+                            <Nav $isSidebarCollapsed>
+                                <NavItem
+                                    nameId="TR_START"
+                                    icon="trezorLogo"
+                                    goToRoute={startRoute}
+                                    routes={[startRoute]}
+                                    data-testid="@suite/menu/suite-start"
+                                />
+                                <NavItem
+                                    nameId="TR_SETTINGS"
+                                    icon="gearSix"
+                                    goToRoute="settings-index"
+                                    routes={SETTINGS_ROUTES}
+                                    data-testid="@suite/menu/settings"
+                                />
+                            </Nav>
+                            <QuickActions hideUpdateStatusBar isSidebarCollapsed />
+                        </Column>
+                    </TrafficLightOffset>
+                </SidebarNavColumn>
+            </ElevationUp>
+        </SidebarWrapper>
+    );
+};
diff --git a/packages/suite/src/components/suite/layouts/WelcomeLayout/WelcomeLayout.tsx b/packages/suite/src/components/suite/layouts/WelcomeLayout/WelcomeLayout.tsx
@@ -3,7 +3,6 @@ import { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import { selectBannerMessage } from '@suite-common/message-system';
-import { Route } from '@suite-common/suite-types';
 import {
     Column,
     ElevationDown,
@@ -12,31 +11,15 @@ import {
     useElevation,
     variables,
 } from '@trezor/components';
-import {
-    Elevation,
-    mapElevationToBackground,
-    mapElevationToBorder,
-    spacings,
-    spacingsPx,
-} from '@trezor/theme';
+import { Elevation, spacings, spacingsPx } from '@trezor/theme';
 
 import { GuideButton, GuideRouter } from 'src/components/guide';
 // importing directly, otherwise unit tests fail, seems to be a styled-components issue
 import { MessageSystemBanner } from 'src/components/suite/banners';
 import { MAX_ONBOARDING_WIDTH } from 'src/constants/suite/layout';
 import { useSelector } from 'src/hooks/suite';
 
-import { selectIsInitialRun } from '../../../../reducers/suite/suiteReducer';
-import { TrafficLightOffset } from '../../TrafficLightOffset';
-import { Nav, SETTINGS_ROUTES } from '../SuiteLayout/Sidebar/Navigation';
-import { NavItem } from '../SuiteLayout/Sidebar/NavigationItem';
-import { QuickActions } from '../SuiteLayout/Sidebar/QuickActions/QuickActions';
-import { SIDEBAR_MIN_WIDTH } from '../SuiteLayout/Sidebar/Sidebar';
-
-const WelcomeWrapper = styled.div<{ $elevation: Elevation }>`
-    background-color: ${mapElevationToBackground};
-    height: 100%;
-`;
+import { LoggedOutSidebar } from '../LoggedOutSidebar';
 
 const Content = styled.div<{ $elevation: Elevation }>`
     display: flex;
@@ -67,49 +50,6 @@ interface WelcomeLayoutProps {
     children: ReactNode;
 }
 
-const WelcomeNavColumn = styled.div<{ $elevation: Elevation; $minWidth: number }>`
-    border-right: solid 1px ${mapElevationToBorder};
-    min-width: ${({ $minWidth }) => $minWidth}px;
-    height: 100%;
-`;
-
-export const LoggedOutSidebar = () => {
-    const { elevation } = useElevation();
-
-    const isInitialRun = useSelector(selectIsInitialRun);
-    const startRoute: Route['name'] = isInitialRun ? 'suite-start' : 'suite-index';
-
-    return (
-        <WelcomeWrapper $elevation={elevation}>
-            <ElevationUp>
-                <WelcomeNavColumn $elevation={elevation} $minWidth={SIDEBAR_MIN_WIDTH}>
-                    <TrafficLightOffset>
-                        <Column justifyContent="space-between" height="100%">
-                            <Nav $isSidebarCollapsed>
-                                <NavItem
-                                    nameId="TR_START"
-                                    icon="trezorLogo"
-                                    goToRoute={startRoute}
-                                    routes={[startRoute]}
-                                    data-testid="@suite/menu/suite-start"
-                                />
-                                <NavItem
-                                    nameId="TR_SETTINGS"
-                                    icon="gearSix"
-                                    goToRoute="settings-index"
-                                    routes={SETTINGS_ROUTES}
-                                    data-testid="@suite/menu/settings"
-                                />
-                            </Nav>
-                            <QuickActions hideUpdateStatusBar isSidebarCollapsed />
-                        </Column>
-                    </TrafficLightOffset>
-                </WelcomeNavColumn>
-            </ElevationUp>
-        </WelcomeWrapper>
-    );
-};
-
 const Right = ({ children }: { children: ReactNode }) => {
     const { elevation } = useElevation();