fix(suite): Delete container query (#16816)

trezor · Feb 7, 2025 · d6d363b · d6d363b
1 parent 2e71d93
commit d6d363b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx
@@ -6,18 +6,16 @@ import { spacingsPx } from '@trezor/theme';
 
 import { NavigationItem, NavigationItemProps } from './NavigationItem';
 import { NotificationDropdown } from './NotificationDropdown';
-import { isCollapsedSidebar } from './consts';
+import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
 
-const Nav = styled.nav`
+const Nav = styled.nav<{ $isSidebarCollapsed: boolean }>`
     display: flex;
     flex-direction: column;
     gap: ${spacingsPx.xxs};
     margin: ${spacingsPx.xs};
     align-items: stretch;
 
-    @container ${isCollapsedSidebar} {
-        align-items: center;
-    }
+    ${({ $isSidebarCollapsed }) => $isSidebarCollapsed && `align-items: center;`}
 `;
 
 const navItems: Array<NavigationItemProps & { CustomComponent?: FC<NavigationItemProps> }> = [
@@ -41,12 +39,16 @@ const navItems: Array<NavigationItemProps & { CustomComponent?: FC<NavigationIte
     },
 ];
 
-export const Navigation = () => (
-    <Nav>
-        {navItems.map(item => {
-            const Component = item.CustomComponent ? item.CustomComponent : NavigationItem;
+export const Navigation = () => {
+    const { isSidebarCollapsed } = useResponsiveContext();
 
-            return <Component key={item.nameId} {...item} />;
-        })}
-    </Nav>
-);
+    return (
+        <Nav $isSidebarCollapsed={isSidebarCollapsed}>
+            {navItems.map(item => {
+                const Component = item.CustomComponent ? item.CustomComponent : NavigationItem;
+
+                return <Component key={item.nameId} {...item} />;
+            })}
+        </Nav>
+    );
+};
diff --git a/...ages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx b/...ages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx
@@ -6,20 +6,18 @@ import { CustomBackend } from './CustomBackend';
 import { DebugAndExperimental } from './DebugAndExperimental';
 import { HideBalances } from './HideBalances';
 import { Tor } from './Tor';
-import { isCollapsedSidebar } from '../consts';
 import { UpdateStatusActionBarIcon } from './Update/UpdateStatusActionBarIcon';
+import { useResponsiveContext } from '../../../../../../support/suite/ResponsiveContext';
 
-const ActionsContainer = styled.div`
+const ActionsContainer = styled.div<{ $isSidebarCollapsed: boolean }>`
     display: flex;
     gap: ${spacingsPx.xs};
 
     border-top: 1px solid ${({ theme }) => theme.borderElevation1};
     padding: 0 ${spacingsPx.xs};
     align-items: stretch;
 
-    @container ${isCollapsedSidebar} {
-        flex-direction: column;
-    }
+    ${({ $isSidebarCollapsed }) => $isSidebarCollapsed && `flex-direction: column;`}
 
     > * {
         flex: 1;
@@ -30,12 +28,18 @@ type QuickActionsProps = {
     showUpdateBannerNotification: boolean;
 };
 
-export const QuickActions = ({ showUpdateBannerNotification }: QuickActionsProps) => (
-    <ActionsContainer>
-        <UpdateStatusActionBarIcon showUpdateBannerNotification={showUpdateBannerNotification} />
-        <DebugAndExperimental />
-        <CustomBackend />
-        <Tor />
-        <HideBalances />
-    </ActionsContainer>
-);
+export const QuickActions = ({ showUpdateBannerNotification }: QuickActionsProps) => {
+    const { isSidebarCollapsed } = useResponsiveContext();
+
+    return (
+        <ActionsContainer $isSidebarCollapsed={isSidebarCollapsed}>
+            <UpdateStatusActionBarIcon
+                showUpdateBannerNotification={showUpdateBannerNotification}
+            />
+            <DebugAndExperimental />
+            <CustomBackend />
+            <Tor />
+            <HideBalances />
+        </ActionsContainer>
+    );
+};
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/consts.ts b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/consts.ts
@@ -1,4 +1 @@
 export const SIDEBAR_COLLAPSED_WIDTH = 200;
-
-export const isCollapsedSidebar = `(max-width: ${SIDEBAR_COLLAPSED_WIDTH}px)`;
-export const isExpandedSidebar = `(min-width: ${SIDEBAR_COLLAPSED_WIDTH}px)`;