Skip to content

Commit 419461f

Browse files
jvaclavikjvaclavik
committed
feat(suite): Delete mobile menu
1 parent 8ddf478 commit 419461f

File tree

9 files changed

+65
-299
lines changed

9 files changed

+65
-299
lines changed

‎packages/components/src/components/ResizableBox/ResizableBox.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,18 @@ export const ResizableBox = ({
237237

238238
const resizeCooldown = createCooldown(150);
239239

240+
useEffect(() => {
241+
if (width) {
242+
setNewWidth(width);
243+
}
244+
}, [width]);
245+
246+
useEffect(() => {
247+
if (height) {
248+
setNewHeight(height);
249+
}
250+
}, [height]);
251+
240252
const resize = useCallback(
241253
(e: MouseEvent) => {
242254
e.preventDefault();

‎packages/suite/src/components/suite/layouts/SuiteLayout/MobileMenu/MobileMenu.tsx

-92
Original file line numberDiff line numberDiff line change
@@ -1,92 +0,0 @@
1-
import { useState } from 'react';
2-
3-
import styled, { useTheme } from 'styled-components';
4-
5-
import { Icon, variables } from '@trezor/components';
6-
import { zIndices } from '@trezor/theme';
7-
8-
import { MobileMenuActions } from './MobileMenuActions';
9-
import { MobileNavigation } from './MobileNavigation';
10-
import { TrafficLightOffset } from '../../../TrafficLightOffset';
11-
import { DeviceSelector } from '../DeviceSelector/DeviceSelector';
12-
13-
const BackgroundContainer = styled.div`
14-
background: ${({ theme }) => theme.backgroundSurfaceElevation1};
15-
`;
16-
17-
const Wrapper = styled.div`
18-
display: flex;
19-
width: 100%;
20-
height: 64px;
21-
flex: 0;
22-
z-index: ${zIndices.navigationBar};
23-
padding: 6px 8px;
24-
align-items: center;
25-
26-
border-bottom: 1px solid ${({ theme }) => theme.borderElevation2};
27-
28-
${variables.SCREEN_QUERY.ABOVE_LAPTOP} {
29-
padding: 10px 16px;
30-
}
31-
`;
32-
33-
const HamburgerWrapper = styled.div`
34-
display: flex;
35-
padding-right: 12px;
36-
flex: 1;
37-
justify-content: flex-end;
38-
`;
39-
40-
const MobileNavigationWrapper = styled.div`
41-
position: relative;
42-
height: 100vh;
43-
z-index: ${zIndices.navigationBar};
44-
`;
45-
46-
const ExpandedMobileNavigation = styled.div`
47-
display: flex;
48-
position: absolute;
49-
flex-direction: column;
50-
background: ${({ theme }) => theme.backgroundSurfaceElevation1};
51-
width: 100%;
52-
height: 100%;
53-
`;
54-
55-
export const MobileMenu = () => {
56-
const [opened, setOpened] = useState(false);
57-
58-
const theme = useTheme();
59-
60-
const closeMobileNavigation = () => {
61-
setOpened(false);
62-
};
63-
64-
return (
65-
<>
66-
<BackgroundContainer>
67-
<TrafficLightOffset>
68-
<Wrapper>
69-
<DeviceSelector />
70-
<HamburgerWrapper>
71-
<Icon
72-
onClick={() => setOpened(!opened)}
73-
name={opened ? 'close' : 'menu'}
74-
size={24}
75-
color={theme.legacy.TYPE_DARK_GREY}
76-
/>
77-
</HamburgerWrapper>
78-
</Wrapper>
79-
</TrafficLightOffset>
80-
</BackgroundContainer>
81-
82-
{opened && (
83-
<MobileNavigationWrapper>
84-
<ExpandedMobileNavigation>
85-
<MobileNavigation closeMobileNavigation={closeMobileNavigation} />
86-
<MobileMenuActions closeMobileNavigation={closeMobileNavigation} />
87-
</ExpandedMobileNavigation>
88-
</MobileNavigationWrapper>
89-
)}
90-
</>
91-
);
92-
};

‎packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/Update/UpdateNotificationBanner.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
mapSuiteUpdateToClick,
1414
} from './updateQuickActionTypes';
1515
import { useDiscovery, useDispatch } from '../../../../../../../hooks/suite';
16+
import { useResponsiveContext } from '../../../../../../../support/suite/ResponsiveContext';
1617
import { Translation, TranslationKey } from '../../../../../Translation';
1718

1819
type ContainerProps = { $elevation: Elevation };
@@ -80,6 +81,7 @@ export const UpdateNotificationBanner = ({
8081
const { getDiscoveryStatus } = useDiscovery();
8182
const discoveryStatus = getDiscoveryStatus();
8283
const discoveryInProgress = discoveryStatus && discoveryStatus.status === 'loading';
84+
const { isSidebarCollapsed } = useResponsiveContext();
8385

8486
const translationHeader =
8587
updateStatusSuite !== 'up-to-date' // Update suite first, because it will contain the newest firmware
@@ -91,7 +93,12 @@ export const UpdateNotificationBanner = ({
9193
updateStatusSuite !== 'up-to-date' ? updateStatusSuite : updateStatusDevice
9294
];
9395

94-
if (translationHeader === null || translationCallToAction === null || discoveryInProgress) {
96+
if (
97+
translationHeader === null ||
98+
translationCallToAction === null ||
99+
discoveryInProgress ||
100+
isSidebarCollapsed
101+
) {
95102
return null;
96103
}
97104

‎packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Sidebar.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { TrafficLightOffset } from '../../../TrafficLightOffset';
1414
import { DeviceSelector } from '../DeviceSelector/DeviceSelector';
1515
import { UpdateNotificationBanner } from './QuickActions/Update/UpdateNotificationBanner';
1616
import { useUpdateStatus } from './QuickActions/Update/useUpdateStatus';
17+
import { SIDEBAR_MAX_WIDTH } from './consts';
1718
import { setSidebarWidth as setSidebarWidthInRedux } from '../../../../../actions/suite/suiteActions';
1819
import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
1920

@@ -37,9 +38,13 @@ const Content = styled.div`
3738
flex-direction: column;
3839
`;
3940

41+
type SidebarProps = {
42+
isMobileLayout: boolean;
43+
};
44+
4045
export const SIDEBAR_MIN_WIDTH = 84;
4146

42-
export const Sidebar = () => {
47+
export const Sidebar = ({ isMobileLayout }: SidebarProps) => {
4348
const [closedNotificationDevice, setClosedNotificationDevice] = useState(false);
4449
const [closedNotificationSuite, setClosedNotificationSuite] = useState(false);
4550
const { isSidebarCollapsed, setSidebarWidth, sidebarWidth } = useResponsiveContext();
@@ -78,12 +83,13 @@ export const Sidebar = () => {
7883
directions={['right']}
7984
width={sidebarWidth}
8085
minWidth={SIDEBAR_MIN_WIDTH}
81-
maxWidth={600}
86+
maxWidth={SIDEBAR_MAX_WIDTH}
8287
zIndex={zIndices.draggableComponent}
8388
updateHeightOnWindowResize
8489
onWidthResizeEnd={handleSidebarWidthChanged}
8590
onWidthResizeMove={handleSidebarWidthUpdate}
8691
disabledWidthInterval={[84, 240]}
92+
isLocked={isMobileLayout}
8793
>
8894
<Container $elevation={elevation}>
8995
<ElevationUp>

‎packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/consts.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
export const SIDEBAR_MIN_WIDTH = 84;
2+
export const SIDEBAR_MAX_WIDTH = 600;
13
export const SIDEBAR_COLLAPSED_WIDTH = 200;

‎packages/suite/src/components/suite/layouts/SuiteLayout/SuiteLayout.tsx

+7-17
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,10 @@ import { GuideButton, GuideRouter } from 'src/components/guide';
1515
import { Metadata } from 'src/components/suite';
1616
import { SuiteBanners } from 'src/components/suite/banners';
1717
import { DiscoveryProgress } from 'src/components/wallet';
18-
import { MobileAccountsMenu } from 'src/components/wallet/WalletLayout/AccountsMenu/MobileAccountsMenu';
1918
import { HORIZONTAL_LAYOUT_PADDINGS, MAX_CONTENT_WIDTH } from 'src/constants/suite/layout';
2019
import { useLayoutSize, useSelector } from 'src/hooks/suite';
2120
import { useClearAnchorHighlightOnClick } from 'src/hooks/suite/useClearAnchorHighlightOnClick';
2221
import { useResetScrollOnUrl } from 'src/hooks/suite/useResetScrollOnUrl';
23-
import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
2422
import { LayoutContext, LayoutContextPayload } from 'src/support/suite/LayoutContext';
2523
import { ModalContextProvider } from 'src/support/suite/ModalContext';
2624
import {
@@ -29,7 +27,6 @@ import {
2927
} from 'src/support/suite/ResponsiveContext';
3028

3129
import { CoinjoinBars } from './CoinjoinBars/CoinjoinBars';
32-
import { MobileMenu } from './MobileMenu/MobileMenu';
3330
import { Sidebar } from './Sidebar/Sidebar';
3431
import { useAppShortcuts } from './useAppShortcuts';
3532
import { ModalSwitcher } from '../../modals/ModalSwitcher/ModalSwitcher';
@@ -142,7 +139,6 @@ interface SuiteLayoutProps {
142139
}
143140

144141
export const SuiteLayout = ({ children }: SuiteLayoutProps) => {
145-
const selectedAccount = useSelector(selectSelectedAccount);
146142
const sidebarWidthFromRedux = useSelector(state => state.suite.settings.sidebarWidth);
147143

148144
const [{ title, layoutHeader }, setLayoutPayload] = useState<LayoutContextPayload>({});
@@ -152,15 +148,16 @@ export const SuiteLayout = ({ children }: SuiteLayoutProps) => {
152148
const { scrollRef } = useResetScrollOnUrl();
153149
useClearAnchorHighlightOnClick(wrapperRef);
154150

155-
const isAccountPage = !!selectedAccount;
156-
157151
useAppShortcuts();
158152

159153
return (
160154
<ElevationContext baseElevation={-1}>
161155
<Wrapper ref={wrapperRef} data-testid="@suite-layout">
162156
<PageWrapper>
163-
<ResponsiveContextProvider sidebarWidthFromRedux={sidebarWidthFromRedux}>
157+
<ResponsiveContextProvider
158+
sidebarWidthFromRedux={sidebarWidthFromRedux}
159+
isMobileLayout={isMobileLayout}
160+
>
164161
<NewModal.Provider>
165162
<ModalContextProvider>
166163
<Metadata title={title} />
@@ -169,18 +166,14 @@ export const SuiteLayout = ({ children }: SuiteLayoutProps) => {
169166

170167
{isMobileLayout && <CoinjoinBars />}
171168

172-
{isMobileLayout && <MobileMenu />}
173-
174169
<DiscoveryProgress />
175170

176171
<LayoutContext.Provider value={setLayoutPayload}>
177172
<Body data-testid="@suite-layout/body">
178173
<Columns>
179-
{!isMobileLayout && (
180-
<ElevationDown>
181-
<Sidebar />
182-
</ElevationDown>
183-
)}
174+
<ElevationDown>
175+
<Sidebar isMobileLayout={isMobileLayout} />
176+
</ElevationDown>
184177
<MainContent>
185178
{!isMobileLayout && <CoinjoinBars />}
186179
<SuiteBanners />
@@ -190,9 +183,6 @@ export const SuiteLayout = ({ children }: SuiteLayoutProps) => {
190183
id={SCROLL_WRAPPER_ID}
191184
>
192185
<ElevationUp>
193-
{isMobileLayout && isAccountPage && (
194-
<MobileAccountsMenu />
195-
)}
196186
{layoutHeader}
197187

198188
<ContentWrapper>{children}</ContentWrapper>

0 commit comments

Comments
 (0)