refactor(extension): change hover event on side navigation column

input-output-hk · Jun 2, 2023 · 9653972 · 9653972
1 parent 28daa66
commit 9653972
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 44 deletions.
diff --git a/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.module.scss b/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.module.scss
@@ -37,21 +37,24 @@
 }
 
 .expandablePill {
+  position: absolute;
+  left: 60px;
+  top: 40px;
   width: 10px;
   height: 10px;
   border-radius: 100px;
   padding: 0;
-  transition: all 0.25s ease-in-out;
-  z-index: 100;
+  z-index: 150;
   cursor: pointer;
-  pointer-events: auto;
+  transition: all 0.25s ease-in-out;
 
   .offlinePillText,
   .networkPillText {
     display: none;
   }
 
   &:hover {
+    top: 30px;
     margin-left: 12px;
     border-radius: size_unit(2);
     padding: 8px 12px;

diff --git a/...xtension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.module.scss b/...xtension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.module.scss
@@ -2,12 +2,6 @@
 
 $navigation-col-width: 215px;
 
-@mixin concealable-menu-label($display) {
-  .concealableMenuLabel {
-    display: $display !important;
-  }
-}
-
 .navigation {
   position: sticky;
   top: 0;
@@ -20,17 +14,19 @@ $navigation-col-width: 215px;
   justify-self: center;
   padding: 0 24px;
   background-color: var(--bg-color-body);
-  z-index: 100;
-  @include concealable-menu-label(none);
+  pointer-events: none;
 
   &:hover {
     box-shadow: var(--bg-color-body) 18px 0px 32px 12px;
-    @include concealable-menu-label(block);
+    z-index: 100;
+    &.shadowNone {
+      box-shadow: none;
+    }
   }
 
   @media (min-width: $breakpoint-xsmall) {
+    pointer-events: auto;
     width: $navigation-col-width;
-    @include concealable-menu-label(block);
     &:hover {
       box-shadow: none;
     }
@@ -64,9 +60,5 @@ $navigation-col-width: 215px;
   height: 40px;
   width: 40px;
   cursor: pointer;
-}
-
-.networkPillContainer {
-  position: absolute;
-  left: 35px;
+  pointer-events: auto;
 }
diff --git a/...rowser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.tsx b/...rowser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import classnames from 'classnames';
 import { useHistory } from 'react-router';
 import { walletRoutePaths } from '@routes';
 import { SideMenu } from '../SideMenu';
@@ -22,11 +23,19 @@ const logoExtended: Record<string, string> = {
 export const LeftSidePanel = ({ theme }: VerticalNavigationBarProps): React.ReactElement => {
   const history = useHistory();
   const isNarrowWindow = useIsSmallerScreenWidthThan(BREAKPOINT_XSMALL);
+  const [shouldHaveShadowNone, setShouldHaveShadowNone] = useState(false);
 
   const handleLogoRedirection = () => history.push(walletRoutePaths.assets);
+  const handleLogoMouseEnter = () => setShouldHaveShadowNone(true);
+  const handleLogoMouseLeave = () => setShouldHaveShadowNone(false);
 
   const logo = isNarrowWindow ? (
-    <LaceLogoMark className={styles.shortenedLogo} onClick={handleLogoRedirection} />
+    <LaceLogoMark
+      onMouseOver={handleLogoMouseEnter}
+      onMouseLeave={handleLogoMouseLeave}
+      className={styles.shortenedLogo}
+      onClick={handleLogoRedirection}
+    />
   ) : (
     <img
       className={styles.logo}
@@ -38,20 +47,17 @@ export const LeftSidePanel = ({ theme }: VerticalNavigationBarProps): React.Reac
   );
 
   return (
-    <nav id="nav" className={styles.navigation}>
-      <div className={styles.stickyMenuInner}>
-        <div className={styles.logoContainer}>
-          {logo}
-          {isNarrowWindow ? (
-            <div className={styles.networkPillContainer}>
-              <NetworkPill isExpandable />
-            </div>
-          ) : (
-            <NetworkPill />
-          )}
+    <>
+      {isNarrowWindow && <NetworkPill isExpandable />}
+      <nav id="nav" className={classnames(styles.navigation, { [styles.shadowNone]: shouldHaveShadowNone })}>
+        <div className={styles.stickyMenuInner}>
+          <div className={styles.logoContainer}>
+            {logo}
+            {!isNarrowWindow && <NetworkPill />}
+          </div>
+          <SideMenu />
         </div>
-        <SideMenu menuItemLabelClassName={styles.concealableMenuLabel} />
-      </div>
-    </nav>
+      </nav>
+    </>
   );
 };
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenu.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenu.tsx
@@ -12,13 +12,9 @@ import { sideMenuConfig } from './side-menu-config';
 import { SideMenuContent } from './SideMenuContent';
 import { walletRoutePaths as routes } from '@routes/wallet-paths';
 
-export interface SideMenuProps {
-  menuItemLabelClassName?: string;
-}
-
 const isPathAvailable = (path: string) => Object.values(routes).includes(path);
 
-export const SideMenu = ({ menuItemLabelClassName }: SideMenuProps): React.ReactElement => {
+export const SideMenu = (): React.ReactElement => {
   const {
     push,
     location: { pathname },
@@ -81,7 +77,6 @@ export const SideMenu = ({ menuItemLabelClassName }: SideMenuProps): React.React
       onClick={handleRedirection}
       onMouseEnter={onMouseEnterItem}
       onMouseLeave={onMouseLeaveItem}
-      menuItemLabelClassName={menuItemLabelClassName}
     />
   );
 };
diff --git a/...r-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.module.scss b/...r-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.module.scss
@@ -1,9 +1,23 @@
 @import '../../../../../../../packages/common/src/ui/styles/theme.scss';
 
+@mixin concealable-menu-label($display) {
+  .concealableMenuLabel {
+    display: $display !important;
+  }
+}
+
 .menuContainer {
+  pointer-events: auto;
   padding-left: 12px;
+  @include concealable-menu-label(none);
+
+  &:hover {
+    @include concealable-menu-label(block);
+  }
+
   @media (min-width: $breakpoint-xsmall) {
     padding-left: 0;
+    @include concealable-menu-label(block);
   }
 }
 

diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.tsx
@@ -15,7 +15,6 @@ export interface SideMenuContentProps {
   onClick: MenuProps['onClick'];
   onMouseEnter: (item: MenuItemList) => void;
   onMouseLeave: () => void;
-  menuItemLabelClassName?: string;
   // required for desktop-specific styling
   menuItemClassName?: string;
 }
@@ -39,8 +38,7 @@ export const SideMenuContent = ({
   onClick,
   onMouseEnter,
   onMouseLeave,
-  menuItemClassName,
-  menuItemLabelClassName
+  menuItemClassName
 }: SideMenuContentProps): React.ReactElement => {
   const { t } = useTranslate();
 
@@ -63,7 +61,7 @@ export const SideMenuContent = ({
           {React.createElement(getIcon(menuItem, activeItemId, hoveredItemId), {
             className: classnames(styles.icon, menuItem.iconClassName)
           })}
-          <SideMenuLabel className={menuItemLabelClassName}>{t(menuItem.label)}</SideMenuLabel>
+          <SideMenuLabel className={styles.concealableMenuLabel}>{t(menuItem.label)}</SideMenuLabel>
         </SideMenuItem>
       ))}
     </Menu>