fix styles and add tests

deploy/tools/envs-validator/schema.ts

@@ -532,6 +532,11 @@ const schema = yup
     NEXT_PUBLIC_NETWORK_LOGO_DARK: yup.string().test(urlTest),
     NEXT_PUBLIC_NETWORK_ICON: yup.string().test(urlTest),
     NEXT_PUBLIC_NETWORK_ICON_DARK: yup.string().test(urlTest),
+    NEXT_PUBLIC_MENU_LIGHTNING_LABELS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string()),
 
     //     c. footer
     NEXT_PUBLIC_FOOTER_LINKS: yup

deploy/tools/envs-validator/test/.env.base

@@ -26,6 +26,7 @@ NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.blocks
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://example.com
 NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
 NEXT_PUBLIC_FEATURED_NETWORKS=https://example.com
+NEXT_PUBLIC_MENU_LIGHTNING_LABELS=['/accounts','/apps']
 NEXT_PUBLIC_FOOTER_LINKS=https://example.com
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=false

playwright/fixtures/mockEnvs.ts

@@ -63,4 +63,7 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
   noNftMarketplaces: [
     [ 'NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES', '' ],
   ],
+  menuLightningLabels: [
+    [ 'NEXT_PUBLIC_MENU_LIGHTNING_LABELS', '["/blocks", "/apps"]' ],
+  ],
 };

ui/snippets/navigation/LightningLabel.tsx

-import { useColorModeValue } from '@chakra-ui/react';
+import { useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
 import React from 'react';
 
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import IconSvg from 'ui/shared/IconSvg';
 
 const LightningLabel = ({ bgColor, isCollapsed }: { bgColor?: string; isCollapsed?: boolean }) => {
+  const isLgScreen = useBreakpointValue({ base: false, lg: true, xl: false });
   const themeBgColor = useColorModeValue('white', 'black');
   const defaultTransitionProps = getDefaultTransitionProps({ transitionProperty: 'color' });
 
+  const isExpanded = isCollapsed === false;
+
   const color = React.useMemo(() => {
-    if (isCollapsed) {
+    if (isCollapsed || (!isExpanded && isLgScreen)) {
       return (bgColor && bgColor !== 'transparent') ? bgColor : themeBgColor;
     }
     return 'transparent';
-  }, [ bgColor, themeBgColor, isCollapsed ]);
+  }, [ bgColor, themeBgColor, isCollapsed, isExpanded, isLgScreen ]);
 
   return (
     <IconSvg
       className="lightning-label"
       name="lightning_sidebar"
       boxSize={ 4 }
-      ml={ isCollapsed ? 0 : 1 }
-      position={ isCollapsed ? 'absolute' : 'relative' }
-      top={ isCollapsed ? '10px' : '0' }
-      right={ isCollapsed ? '15px' : '0' }
+      ml={{ base: 1, lg: isExpanded ? 1 : 0, xl: isCollapsed ? 0 : 1 }}
+      position={{ lg: isExpanded ? 'relative' : 'absolute', xl: isCollapsed ? 'absolute' : 'relative' }}
+      top={{ lg: isExpanded ? '0' : '10px', xl: isCollapsed ? '10px' : '0' }}
+      right={{ lg: isExpanded ? '0' : '15px', xl: isCollapsed ? '15px' : '0' }}
       color={ color }
       { ...defaultTransitionProps }
     />

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -6,6 +6,7 @@ import config from 'configs/app';
 import * as cookies from 'lib/cookies';
 import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
 import { contextWithAuth } from 'playwright/fixtures/auth';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import { test, expect } from 'playwright/lib';
 import * as configs from 'playwright/utils/configs';
 
@@ -217,3 +218,36 @@ test.describe('hover xl screen', () => {
     await expect(component).toHaveScreenshot();
   });
 });
+
+test.describe('with lightning labels', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ render, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.menuLightningLabels);
+
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+  });
+
+  test('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with submenu', async({ page }) => {
+    await page.locator('a[aria-label="Blockchain link group"]').hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: configs.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});