refactor(extension): left side panel components

input-output-hk · Jun 2, 2023 · 4e636ba · 4e636ba
1 parent 4bf3b95
commit 4e636ba
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 60 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
@@ -41,23 +41,27 @@
   height: 10px;
   border-radius: 100px;
   padding: 0;
-  transition: all .25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+  z-index: 100;
   cursor: pointer;
+  pointer-events: auto;
+
+  .offlinePillText,
+  .networkPillText {
+    display: none;
+  }
 
   &:hover {
     margin-left: size_unit(1.5);
     border-radius: size_unit(2);
     padding: size_unit(1) size_unit(1.5);
     width: auto;
     height: auto;
-    transition: all .25s ease-in-out;
-  }
-}
+    transition: all 0.25s ease-in-out;
 
-.expandablePill > div.offlinePillText, .expandablePill > span  {
-  display: none;
-}
-.expandablePill:hover > div.offlinePillText, .expandablePill:hover > span  {
-  display: flex;
+    .offlinePillText,
+    .networkPillText {
+      display: flex;
+    }
+  }
 }
-
diff --git a/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.tsx b/apps/browser-extension-wallet/src/components/NetworkPill/NetworkPill.tsx
@@ -22,7 +22,7 @@ export const NetworkPill = ({ isExpandablePill }: NetworkPillProp): ReactElement
           className={classnames(styles.networkPill, { [styles.expandablePill]: isExpandablePill })}
           data-testid="network-pill"
         >
-          <span>{environmentName}</span>
+          <span className={classnames({ [styles.networkPillText]: isExpandablePill })}>{environmentName}</span>
         </div>
       );
     }

diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss
@@ -20,7 +20,7 @@ $content-cols-gutter: 7;
 $aside-cols-gutter: 3;
 
 $navigation-col-width: 215px;
-$navigation-col-width-small: 96px;
+$navigation-col-width-collapsed: 96px;
 $row-height: 64px;
 $main-gap: 49px;
 
@@ -68,7 +68,7 @@ $main-gap: 49px;
     'nav main';
   justify-content: center;
   margin-right: size_unit(4);
-  grid-template-columns: $navigation-col-width-small 1fr;
+  grid-template-columns: $navigation-col-width-collapsed 1fr;
   grid-template-rows: $row-height 1fr;
   height: 100%;
 
@@ -98,7 +98,7 @@ $main-gap: 49px;
     justify-content: start;
   }
 
-  @media (min-width: 1024px) {
+  @media (min-width: $breakpoint-xsmall) {
     grid-template-columns: $navigation-col-width 1fr;
     margin: 0 size_unit(4) 0 size_unit(5);
   }

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
@@ -14,7 +14,7 @@ import { walletRoutePaths as routes } from '@routes/wallet-paths';
 
 const isPathAvailable = (path: string) => Object.values(routes).includes(path);
 
-export const SideMenu = ({ isFullWidthMenu = true }: { isFullWidthMenu?: boolean }): React.ReactElement => {
+export const SideMenu = (): React.ReactElement => {
   const {
     push,
     location: { pathname },
@@ -77,7 +77,6 @@ export const SideMenu = ({ isFullWidthMenu = true }: { isFullWidthMenu?: boolean
       onClick={handleRedirection}
       onMouseEnter={onMouseEnterItem}
       onMouseLeave={onMouseLeaveItem}
-      withLabel={isFullWidthMenu}
     />
   );
 };
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
@@ -20,12 +20,9 @@
   }
 }
 
-.center {
-  padding: 0 !important;
-  justify-content: center !important;
-  overflow: hidden;
+.menuContainer {
+  padding-left: 12px;
+  @media (min-width: $breakpoint-xsmall) {
+    padding-left: 0;
+  }
 }
-
-.center > span {
-  flex: none !important;
-}
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;
-  withLabel?: boolean;
   // required for desktop-specific styling
   menuItemClassName?: string;
 }
@@ -39,25 +38,30 @@ export const SideMenuContent = ({
   onClick,
   onMouseEnter,
   onMouseLeave,
-  menuItemClassName,
-  withLabel = true
+  menuItemClassName
 }: SideMenuContentProps): React.ReactElement => {
   const { t } = useTranslate();
 
   return (
-    <Menu data-testid="side-menu" selectedKeys={[activeItemId]} onClick={onClick} mode="inline">
+    <Menu
+      className={styles.menuContainer}
+      data-testid="side-menu"
+      selectedKeys={[activeItemId]}
+      onClick={onClick}
+      mode="inline"
+    >
       {menuItems.map((menuItem) => (
         <SideMenuItem
           onMouseEnter={() => onMouseEnter(menuItem.id)}
           onMouseLeave={onMouseLeave}
           data-testid={menuItem.testId}
           key={menuItem.path}
-          className={classnames(styles.menuItem, menuItemClassName, { [styles.center]: !withLabel })}
+          className={classnames(styles.menuItem, menuItemClassName)}
         >
           {React.createElement(getIcon(menuItem, activeItemId, hoveredItemId), {
             className: classnames(styles.icon, menuItem.iconClassName)
           })}
-          {withLabel && <SideMenuLabel>{t(menuItem.label)}</SideMenuLabel>}
+          <SideMenuLabel>{t(menuItem.label)}</SideMenuLabel>
         </SideMenuItem>
       ))}
     </Menu>

diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuLabel.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuLabel.tsx
@@ -8,5 +8,6 @@ interface SideMenuLabelProps {
 }
 
 export const SideMenuLabel: FC<SideMenuLabelProps> = ({ children, className }) => (
-  <p className={classnames(styles.text, className)}>{children}</p>
+  // to be able to target this element inside the VerticalNavigationBar.module.scss the concealable-menu-label class needs to be added
+  <p className={classnames(styles.text, className, 'concealable-menu-label')}>{children}</p>
 );
diff --git a/...src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.module.scss b/...src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.module.scss
@@ -1,8 +1,18 @@
 @import '../../../../../../../packages/common/src/ui/styles/theme.scss';
 
 $navigation-col-width: 215px;
-$navigation-col-width-small: 64px;
-$grid-gap-large: 65px;
+
+@mixin concealable-menu-label($display) {
+  // without the global there is no way to target SideMenuLabel inside this module
+  // this is done in the scope of this file, so the entire navigation container handles the hover behaviour and hides and shows the side menu labels on hover
+  :global {
+    .ant-menu-title-content {
+      .concealable-menu-label {
+        display: $display !important;
+      }
+    }
+  }
+}
 
 .navigation {
   position: sticky;
@@ -14,17 +24,23 @@ $grid-gap-large: 65px;
   gap: 52px;
   align-items: center;
   justify-self: center;
-  padding: 0 28px;
+  padding: 0 24px;
   background-color: var(--bg-color-body);
+  z-index: 100;
+  @include concealable-menu-label(none);
 
-  @media (min-width: 1024px) {
-    width: $navigation-col-width;
+  &:hover {
+    box-shadow: var(--bg-color-body) 18px 0px 32px 12px;
+    @include concealable-menu-label(block);
   }
-}
 
-.navigationShadow {
-  z-index: 100;
-  box-shadow: var(--bg-color-body) 18px 0px 32px 12px;
+  @media (min-width: $breakpoint-xsmall) {
+    width: $navigation-col-width;
+    @include concealable-menu-label(block);
+    &:hover {
+      box-shadow: none;
+    }
+  }
 }
 
 .stickyMenuInner {
@@ -52,11 +68,7 @@ $grid-gap-large: 65px;
   cursor: pointer;
 }
 
-.networkPillContainer{
+.networkPillContainer {
   position: absolute;
   left: 35px;
 }
-
-.smallMenuContainer:hover {
-  padding-left: 12px;
-}
diff --git a/...-wallet/src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.tsx b/...-wallet/src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.tsx
@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import classnames from 'classnames';
+import React from 'react';
 import { useHistory } from 'react-router';
 import { walletRoutePaths } from '@routes';
 import { NetworkPill } from '../../../../components/NetworkPill';
@@ -23,7 +22,6 @@ const logoExtended: Record<string, string> = {
 export const VerticalNavigationBar = ({ theme }: VerticalNavigationBarProps): React.ReactElement => {
   const history = useHistory();
   const isSmallerVersion = useIsSmallerScreenWidthThan(BREAKPOINT_XSMALL);
-  const [isFullWidthMenu, setIsFullWidthMenu] = useState(false);
 
   const logo = isSmallerVersion ? (
     <LaceLogoMark className={styles.shortenedLogo} onClick={() => history.push(walletRoutePaths.assets)} />
@@ -38,7 +36,7 @@ export const VerticalNavigationBar = ({ theme }: VerticalNavigationBarProps): Re
   );
 
   return (
-    <nav id="nav" className={classnames(styles.navigation, { [styles.navigationShadow]: isFullWidthMenu })}>
+    <nav id="nav" className={styles.navigation}>
       <div className={styles.stickyMenuInner}>
         <div className={styles.logoContainer}>
           {logo}
@@ -50,17 +48,7 @@ export const VerticalNavigationBar = ({ theme }: VerticalNavigationBarProps): Re
             <NetworkPill />
           )}
         </div>
-        {isSmallerVersion ? (
-          <div
-            onMouseEnter={() => setIsFullWidthMenu(true)}
-            onMouseLeave={() => setIsFullWidthMenu(false)}
-            className={styles.smallMenuContainer}
-          >
-            <SideMenu isFullWidthMenu={isFullWidthMenu} />
-          </div>
-        ) : (
-          <SideMenu />
-        )}
+        <SideMenu />
       </div>
     </nav>
   );