@@ -57,5 +57,5 @@ export const NetworkPill = ({ isExpandablePill }: NetworkPillProp): ReactElement
);
}
return <>>;
- }, [isOnline, isBackendFailing, environmentName, t, isExpandablePill]);
+ }, [isOnline, isBackendFailing, environmentName, t, isExpandable]);
};
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
index 7e247abb41..9bf62494dd 100644
--- 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
@@ -1,6 +1,5 @@
@import '../../../../../../../packages/common/src/ui/styles/theme.scss';
@import '../../../../../../../packages/common/src/ui/styles/abstracts/mixins';
-@import '../../../../../../../packages/common/src/ui/styles/abstracts/mixins';
$col-width-small: 60px;
$col-width-medium: 70px;
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx
index ff71dec293..0eb450c080 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx
@@ -10,7 +10,7 @@ import { BrowserViewSections, ChangeThemeData, Message, MessageTypes } from '@li
import { useDrawer } from '../../stores';
import { DrawerContent, DrawerUIContainer } from '../Drawer';
import { useNetworkError } from '@hooks/useNetworkError';
-import { VerticalNavigationBar } from '../VerticalNavigationBar';
+import { LeftSidePanel } from '../LeftSidePanel';
import styles from './Layout.module.scss';
interface LayoutProps {
@@ -63,7 +63,7 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout
id="main"
className={classnames(styles.layoutGridContainer, isFullWidth && styles.fullWidth, isFlexible && styles.flexible)}
>
-
+
{children}
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.module.scss
similarity index 74%
rename from apps/browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.module.scss
rename to apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.module.scss
index 3d2508b1cb..9b1f85af51 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.module.scss
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.module.scss
@@ -3,14 +3,8 @@
$navigation-col-width: 215px;
@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;
- }
- }
+ .concealableMenuLabel {
+ display: $display !important;
}
}
@@ -43,11 +37,15 @@ $navigation-col-width: 215px;
}
}
+.navigationShadow {
+ box-shadow: var(--bg-color-body) 18px 0px 32px 12px;
+}
+
.stickyMenuInner {
position: sticky;
display: flex;
flex-direction: column;
- gap: size_unit(6.5);
+ gap: 52px;
top: 0;
}
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.tsx
similarity index 53%
rename from apps/browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.tsx
rename to apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.tsx
index a0a691a6bd..a9139a274e 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/VerticalNavigationBar.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/LeftSidePanel.tsx
@@ -1,14 +1,14 @@
import React from 'react';
import { useHistory } from 'react-router';
import { walletRoutePaths } from '@routes';
-import { NetworkPill } from '../../../../components/NetworkPill';
import { SideMenu } from '../SideMenu';
import { useIsSmallerScreenWidthThan } from '@hooks/useIsSmallerScreenWidthThan';
import { BREAKPOINT_XSMALL } from '@src/styles/constants';
-import laceLogo from '../../../../assets/branding/lace-logo.svg';
-import laceLogoDarkMode from '../../../../assets/branding/lace-logo-dark-mode.svg';
-import LaceLogoMark from '../../../../assets/branding/lace-logo-mark.component.svg';
-import styles from './VerticalNavigationBar.module.scss';
+import { NetworkPill } from '@components/NetworkPill';
+import laceLogo from '@assets/branding/lace-logo.svg';
+import laceLogoDarkMode from '@assets/branding/lace-logo-dark-mode.svg';
+import LaceLogoMark from '@assets/branding/lace-logo-mark.component.svg';
+import styles from './LeftSidePanel.module.scss';
export interface VerticalNavigationBarProps {
theme: string;
@@ -19,19 +19,21 @@ const logoExtended: Record
= {
light: laceLogo
};
-export const VerticalNavigationBar = ({ theme }: VerticalNavigationBarProps): React.ReactElement => {
+export const LeftSidePanel = ({ theme }: VerticalNavigationBarProps): React.ReactElement => {
const history = useHistory();
- const isSmallerVersion = useIsSmallerScreenWidthThan(BREAKPOINT_XSMALL);
+ const isNarrowWindow = useIsSmallerScreenWidthThan(BREAKPOINT_XSMALL);
- const logo = isSmallerVersion ? (
- history.push(walletRoutePaths.assets)} />
+ const handleLogoRedirection = () => history.push(walletRoutePaths.assets);
+
+ const logo = isNarrowWindow ? (
+
) : (
history.push(walletRoutePaths.assets)}
+ onClick={handleLogoRedirection}
/>
);
@@ -40,15 +42,15 @@ export const VerticalNavigationBar = ({ theme }: VerticalNavigationBarProps): Re
{logo}
- {isSmallerVersion ? (
+ {isNarrowWindow ? (
-
+
) : (
)}
-
+
);
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/index.ts b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/index.ts
new file mode 100644
index 0000000000..9507c9cf79
--- /dev/null
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/LeftSidePanel/index.ts
@@ -0,0 +1 @@
+export * from './LeftSidePanel';
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
index 4c912dae39..11bf6ee80c 100644
--- 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,9 +12,13 @@ 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 = (): React.ReactElement => {
+export const SideMenu = ({ menuItemLabelClassName }: SideMenuProps): React.ReactElement => {
const {
push,
location: { pathname },
@@ -77,6 +81,7 @@ export const SideMenu = (): React.ReactElement => {
onClick={handleRedirection}
onMouseEnter={onMouseEnterItem}
onMouseLeave={onMouseLeaveItem}
+ menuItemLabelClassName={menuItemLabelClassName}
/>
);
};
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.module.scss
index e4777a300b..cf648ad1a0 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.module.scss
+++ b/apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/SideMenuContent.module.scss
@@ -1,5 +1,12 @@
@import '../../../../../../../packages/common/src/ui/styles/theme.scss';
+.menuContainer {
+ padding-left: 12px;
+ @media (min-width: $breakpoint-xsmall) {
+ padding-left: 0;
+ }
+}
+
:global {
ul.ant-menu-inline {
border: none !important;
@@ -19,10 +26,3 @@
font-size: var(--body, 16px) !important;
}
}
-
-.menuContainer {
- padding-left: 12px;
- @media (min-width: $breakpoint-xsmall) {
- padding-left: 0;
- }
-}
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
index 5592555749..b8a56cb072 100644
--- 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,6 +15,7 @@ export interface SideMenuContentProps {
onClick: MenuProps['onClick'];
onMouseEnter: (item: MenuItemList) => void;
onMouseLeave: () => void;
+ menuItemLabelClassName?: string;
// required for desktop-specific styling
menuItemClassName?: string;
}
@@ -38,7 +39,8 @@ export const SideMenuContent = ({
onClick,
onMouseEnter,
onMouseLeave,
- menuItemClassName
+ menuItemClassName,
+ menuItemLabelClassName
}: SideMenuContentProps): React.ReactElement => {
const { t } = useTranslate();
@@ -61,7 +63,7 @@ export const SideMenuContent = ({
{React.createElement(getIcon(menuItem, activeItemId, hoveredItemId), {
className: classnames(styles.icon, menuItem.iconClassName)
})}
- {t(menuItem.label)}
+ {t(menuItem.label)}
))}
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/index.ts b/apps/browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/index.ts
deleted file mode 100644
index ce765e09ab..0000000000
--- a/apps/browser-extension-wallet/src/views/browser-view/components/VerticalNavigationBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './VerticalNavigationBar';