Merge pull request #1393 from blockscout/fe-1375

hide expand/collapse button in navigation

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -110,6 +110,7 @@ test.describe('with tooltips', () => {
       { hooksConfig },
     );
 
+    await component.locator('header').hover();
     await page.locator('svg[aria-label="Expand/Collapse menu"]').click();
     await page.locator('a[aria-label="Tokens link"]').hover();
 
@@ -212,3 +213,37 @@ base.describe('cookie set to true', () => {
     expect(await networkMenu.isVisible()).toBe(false);
   });
 });
+
+test('hover +@dark-mode', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await component.locator('header').hover();
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('hover xl screen', () => {
+  test.use({ viewport: configs.viewport.xl });
+
+  test('+@dark-mode', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Flex w="100%" minH="100vh" alignItems="stretch">
+          <NavigationDesktop/>
+          <Box bgColor="lightpink" w="100%"/>
+        </Flex>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await component.locator('header').hover();
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/snippets/navigation/NavigationDesktop.tsx

@@ -59,6 +59,11 @@ const NavigationDesktop = () => {
       py={ 12 }
       width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
       { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
+      sx={{
+        '&:hover #expand-icon': {
+          display: 'block',
+        },
+      }}
     >
       { config.chain.isTestnet && <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" position="absolute" pl={ 3 } top="34px"/> }
       <Box
@@ -113,6 +118,8 @@ const NavigationDesktop = () => {
         cursor="pointer"
         onClick={ handleTogglerClick }
         aria-label="Expand/Collapse menu"
+        id="expand-icon"
+        display="none"
       />
     </Flex>
   );