style(suite): Container query in Sidebar

trezor · Jul 11, 2024 · 293f311 · 293f311
1 parent 510ba01
commit 293f311
Show file tree

Hide file tree

Showing 14 changed files with 237 additions and 123 deletions.
diff --git a/packages/components/src/components/ResizableBox/ResizableBox.stories.tsx b/packages/components/src/components/ResizableBox/ResizableBox.stories.tsx
@@ -38,6 +38,8 @@ export const ResizableBox: StoryObj<ResizableBoxProps> = {
         height: 100,
         minHeight: 50,
         maxHeight: 300,
+        disabledWidthIntervals: [[51, 100]],
+        disabledHeightIntervals: undefined,
         updateWidthOnWindowResize: false,
         updateHeightOnWindowResize: false,
     },

diff --git a/packages/components/src/components/ResizableBox/ResizableBox.tsx b/packages/components/src/components/ResizableBox/ResizableBox.tsx
@@ -19,6 +19,8 @@ export type ResizableBoxProps = {
     updateWidthOnWindowResize?: boolean;
     updateHeightOnWindowResize?: boolean;
     zIndex?: ZIndexValues;
+    disabledWidthIntervals?: Array<Array<number>>;
+    disabledHeightIntervals?: Array<Array<number>>;
 };
 
 type ResizerHandlersProps = {

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx
@@ -10,6 +10,7 @@ import { borders, spacingsPx } from '@trezor/theme';
 import { focusStyleTransition, getFocusShadowStyle } from '@trezor/components/src/utils/utils';
 import { SidebarDeviceStatus } from './SidebarDeviceStatus';
 import { ViewOnlyTooltip } from 'src/views/view-only/ViewOnlyTooltip';
+import { ExpandedSidebarOnly } from '../Sidebar/ExpandedSidebarOnly';
 
 const CaretContainer = styled.div`
     background: transparent;
@@ -111,11 +112,13 @@ export const DeviceSelector = () => {
                 >
                     <SidebarDeviceStatus />
 
-                    {selectedDevice && selectedDevice.state && (
-                        <CaretContainer>
-                            <Icon size={20} icon="CARET_CIRCLE_DOWN" />
-                        </CaretContainer>
-                    )}
+                    <ExpandedSidebarOnly>
+                        {selectedDevice && selectedDevice.state && (
+                            <CaretContainer>
+                                <Icon size={20} icon="CARET_CIRCLE_DOWN" />
+                            </CaretContainer>
+                        )}
+                    </ExpandedSidebarOnly>
                 </InnerContainer>
             </ViewOnlyTooltip>
         </Wrapper>

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceStatus.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceStatus.tsx
@@ -7,6 +7,7 @@ import { TrezorDevice } from 'src/types/suite';
 import { spacingsPx } from '@trezor/theme';
 import { RotateDeviceImage } from '@trezor/components';
 import { DeviceStatusText } from 'src/views/suite/SwitchDevice/DeviceItem/DeviceStatusText';
+import { ExpandedSidebarOnly } from '../Sidebar/ExpandedSidebarOnly';
 
 type DeviceStatusProps = {
     deviceModel: DeviceModelInternal;
@@ -53,15 +54,17 @@ export const DeviceStatus = ({
                 />
             </DeviceWrapper>
 
-            {device && (
-                <DeviceDetail label={device.label}>
-                    <DeviceStatusText
-                        onRefreshClick={handleRefreshClick}
-                        device={device}
-                        forceConnectionInfo={forceConnectionInfo}
-                    />
-                </DeviceDetail>
-            )}
+            <ExpandedSidebarOnly>
+                {device && (
+                    <DeviceDetail label={device.label}>
+                        <DeviceStatusText
+                            onRefreshClick={handleRefreshClick}
+                            device={device}
+                            forceConnectionInfo={forceConnectionInfo}
+                        />
+                    </DeviceDetail>
+                )}
+            </ExpandedSidebarOnly>
         </Container>
     );
 };
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/CollapsedSidebarOnly.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/CollapsedSidebarOnly.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+import { isExpandedSidebar } from './consts';
+
+const Container = styled.div`
+    @container ${isExpandedSidebar} {
+        display: none;
+    }
+`;
+
+type Props = {
+    children: React.ReactNode;
+};
+
+export const CollapsedSidebarOnly = ({ children }: Props) => {
+    return <Container>{children}</Container>;
+};
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/ExpandedSidebarOnly.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/ExpandedSidebarOnly.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+import { isCollapsedSidebar } from './consts';
+
+const Container = styled.div`
+    @container ${isCollapsedSidebar} {
+        display: none;
+    }
+`;
+
+type Props = {
+    children: React.ReactNode;
+};
+
+export const ExpandedSidebarOnly = ({ children }: Props) => {
+    return <Container>{children}</Container>;
+};
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/HelperIcons.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/HelperIcons.tsx
@@ -4,6 +4,7 @@ import { borders, spacingsPx } from '@trezor/theme';
 import { useDispatch, useSelector, useTranslation } from 'src/hooks/suite';
 import { goto } from 'src/actions/suite/routerActions';
 import { SettingsAnchor } from 'src/constants/suite/anchors';
+import { ExpandedSidebarOnly } from './ExpandedSidebarOnly';
 
 const Container = styled.div`
     display: flex;
@@ -68,24 +69,26 @@ export const HelperIcons = () => {
 
     return (
         <Container>
-            {showExperimental && (
-                <ExperimentalIcon
-                    onClick={handleEapClick}
-                    $isEapEnabled={isEapEnabled}
-                    $isExperimental={isExperimental}
-                >
-                    <Tooltip cursor="pointer" content={experimentalTooltip}>
-                        <Icon icon="EXPERIMENTAL" size={16} color={theme.iconOnSecondary} />
-                    </Tooltip>
-                </ExperimentalIcon>
-            )}
-            {showDebugMode && (
-                <DebugModeIcon>
-                    <Tooltip content="Debug mode active">
-                        <Icon icon="FLAG" size={16} color={theme.iconOnSecondary} />
-                    </Tooltip>
-                </DebugModeIcon>
-            )}
+            <ExpandedSidebarOnly>
+                {showExperimental && (
+                    <ExperimentalIcon
+                        onClick={handleEapClick}
+                        $isEapEnabled={isEapEnabled}
+                        $isExperimental={isExperimental}
+                    >
+                        <Tooltip cursor="pointer" content={experimentalTooltip}>
+                            <Icon icon="EXPERIMENTAL" size={16} color={theme.iconOnSecondary} />
+                        </Tooltip>
+                    </ExperimentalIcon>
+                )}
+                {showDebugMode && (
+                    <DebugModeIcon>
+                        <Tooltip content="Debug mode active">
+                            <Icon icon="FLAG" size={16} color={theme.iconOnSecondary} />
+                        </Tooltip>
+                    </DebugModeIcon>
+                )}
+            </ExpandedSidebarOnly>
         </Container>
     );
 };
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/NavigationItem.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/NavigationItem.tsx
@@ -10,7 +10,9 @@ import { useDispatch, useSelector } from 'src/hooks/suite';
 import { goto } from 'src/actions/suite/routerActions';
 import { MouseEvent } from 'react';
 import { selectRouteName } from 'src/reducers/suite/routerReducer';
-import { useElevation } from '@trezor/components';
+import { Tooltip, useElevation } from '@trezor/components';
+import { ExpandedSidebarOnly } from './ExpandedSidebarOnly';
+import { CollapsedSidebarOnly } from './CollapsedSidebarOnly';
 
 const StyledIcon = styled(Icon)`
     pointer-events: none;
@@ -104,7 +106,8 @@ export const NavigationItem = ({
 
     const isActiveRoute = routes?.some(route => route === activeRoute);
 
-    return (
+    const Title = () => <Translation id={nameId} values={values} />;
+    const NavItem = () => (
         <Container
             $isActive={isActive || isActiveRoute}
             onClick={handleClick}
@@ -114,8 +117,23 @@ export const NavigationItem = ({
             $elevation={elevation}
         >
             <StyledIcon name={icon} size={iconSize} color="iconSubdued" />
-            <Translation id={nameId} values={values} />
+            <ExpandedSidebarOnly>
+                <Title />
+            </ExpandedSidebarOnly>
             {itemsCount && <Count>{itemsCount}</Count>}
         </Container>
     );
+
+    return (
+        <>
+            <ExpandedSidebarOnly>
+                <NavItem />
+            </ExpandedSidebarOnly>
+            <CollapsedSidebarOnly>
+                <Tooltip content={<Title />} placement="right" hasArrow>
+                    <NavItem />
+                </Tooltip>
+            </CollapsedSidebarOnly>
+        </>
+    );
 };
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions.tsx
@@ -13,6 +13,7 @@ import { ActionButton } from './ActionButton';
 import { NavBackends } from './NavBackends';
 import { HelperIcons } from './HelperIcons';
 import { useEnabledBackends } from '../utils';
+import { ExpandedSidebarOnly } from './ExpandedSidebarOnly';
 
 const Container = styled.div`
     display: flex;
@@ -88,7 +89,9 @@ export const QuickActions = () => {
                 {!isCustomBackendIconVisible && !isTorIconVisible ? (
                     <DescreetContainer onClick={handleDiscreetModeClick}>
                         <Icon size={16} icon={isDiscreetModeActive ? 'HIDE' : 'SHOW'} />
-                        <Label>{translationString(translationLabel)} </Label>
+                        <ExpandedSidebarOnly>
+                            <Label>{translationString(translationLabel)} </Label>
+                        </ExpandedSidebarOnly>
                     </DescreetContainer>
                 ) : (
                     <>

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Sidebar.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Sidebar.tsx
@@ -10,6 +10,7 @@ import { Elevation, mapElevationToBackground, mapElevationToBorder, zIndices } f
 
 const Container = styled.nav<{ $elevation: Elevation }>`
     display: flex;
+    container-type: inline-size;
     flex-direction: column;
     flex: 0 0 auto;
     height: 100%;
@@ -29,8 +30,8 @@ export const Sidebar = () => {
             <ResizableBox
                 directions={['right']}
                 width={SIDEBAR_WIDTH_NUMERIC}
-                minWidth={230}
-                maxWidth={400}
+                minWidth={84}
+                maxWidth={600}
                 zIndex={zIndices.draggableComponent}
                 updateHeightOnWindowResize
             >

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/consts.ts b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/consts.ts
@@ -0,0 +1,4 @@
+export const SIDEBAR_COLLAPSED_WIDTH = 200;
+
+export const isCollapsedSidebar = `(max-width: ${SIDEBAR_COLLAPSED_WIDTH}px)`;
+export const isExpandedSidebar = `(min-width: ${SIDEBAR_COLLAPSED_WIDTH + 1}px)`;