diff --git a/components/brave_wallet_ui/assets/svg-icons/wallet_logo_dark.svg b/components/brave_wallet_ui/assets/svg-icons/wallet_logo_dark.svg
new file mode 100644
index 000000000000..59395c843f13
--- /dev/null
+++ b/components/brave_wallet_ui/assets/svg-icons/wallet_logo_dark.svg
@@ -0,0 +1 @@
+
diff --git a/components/brave_wallet_ui/assets/svg-icons/wallet_logo_light.svg b/components/brave_wallet_ui/assets/svg-icons/wallet_logo_light.svg
new file mode 100644
index 000000000000..672170a8c04e
--- /dev/null
+++ b/components/brave_wallet_ui/assets/svg-icons/wallet_logo_light.svg
@@ -0,0 +1 @@
+
diff --git a/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.style.ts b/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.style.ts
index dde2ca2cdfcc..678f135d5ef2 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.style.ts
+++ b/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.style.ts
@@ -5,41 +5,30 @@
import styled from 'styled-components'
import * as leo from '@brave/leo/tokens/css/variables'
+import Navigation from '@brave/leo/react/navigation'
+
+// Assets
+import WalletLogoLight from '../../../assets/svg-icons/wallet_logo_light.svg'
+import WalletLogoDark from '../../../assets/svg-icons/wallet_logo_dark.svg'
+
+// Shared Styles
import {
layoutSmallWidth,
- layoutTopPosition,
- maxCardWidth,
- navWidth,
- navSpace
+ navWidth
} from '../wallet-page-wrapper/wallet-page-wrapper.style'
-export const Wrapper = styled.div<{
- isPanel: boolean
-}>`
+export const Wrapper = styled.div`
display: flex;
- align-items: center;
- justify-content: center;
+ align-items: flex-start;
+ justify-content: flex-start;
flex-direction: column;
- background-color: ${leo.color.container.background};
- border-radius: 16px;
position: absolute;
- top: ${layoutTopPosition}px;
- /*
- (100vw / 2) - (${navWidth}px / 2) makes the nav perfectly centered
- horizontally in the browser window.
-
- - (${maxCardWidth}px / 2) - (${navSpace}px / 2) is to then adjust the
- nav to the left to be centered with the layout card body.
- */
- left: calc(
- (100vw / 2) - (${navWidth}px / 2) - (${maxCardWidth}px / 2) -
- (${navSpace}px / 2)
- );
- overflow: visible;
+ background-color: ${leo.color.container.background};
+ top: 0px;
+ bottom: 0px;
+ left: 0px;
z-index: 10;
width: ${navWidth}px;
- padding: 12px 0px;
- box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.07);
@media screen and (max-width: ${layoutSmallWidth}px) {
flex-direction: row;
top: unset;
@@ -48,9 +37,10 @@ export const Wrapper = styled.div<{
bottom: 0px;
border: none;
padding: 8px 0px;
- border-radius: 0px;
box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.04);
width: unset;
+ align-items: center;
+ justify-content: center;
}
`
@@ -88,3 +78,17 @@ export const PanelOptionsWrapper = styled.div`
display: flex;
}
`
+
+export const WalletLogo = styled.div`
+ height: 28px;
+ width: 87.65px;
+ background-image: url(${WalletLogoLight});
+ background-size: cover;
+ @media (prefers-color-scheme: dark) {
+ background-image: url(${WalletLogoDark});
+ }
+`
+
+export const LeoNavigation = styled(Navigation)`
+ width: 100%;
+`
diff --git a/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.tsx b/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.tsx
index 80312ecda4b0..dc4a4b39abd9 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-nav/wallet-nav.tsx
@@ -4,12 +4,12 @@
// You can obtain one at https://mozilla.org/MPL/2.0/.
import * as React from 'react'
+import { useLocation, useHistory } from 'react-router-dom'
+import NavigationMenu from '@brave/leo/react/navigationMenu'
+import NavigationItem from '@brave/leo/react/navigationItem'
-// Selectors
-import { UISelectors } from '../../../common/selectors'
-
-// Hooks
-import { useSafeUISelector } from '../../../common/hooks/use-safe-selector'
+// Utils
+import { getLocale } from '../../../../common/locale'
// Options
import {
@@ -26,15 +26,19 @@ import {
Wrapper,
Section,
PageOptionsWrapper,
- PanelOptionsWrapper
+ PanelOptionsWrapper,
+ LeoNavigation,
+ WalletLogo
} from './wallet-nav.style'
+import { Row, VerticalDivider } from '../../shared/style'
export const WalletNav = () => {
- // redux
- const isPanel = useSafeUISelector(UISelectors.isPanel)
+ // routing
+ const history = useHistory()
+ const { pathname: walletLocation } = useLocation()
return (
-
+
{PanelNavOptions.map((option) => (
@@ -47,22 +51,40 @@ export const WalletNav = () => {
-
- {NavOptions.map((option) => (
-
- ))}
-
-
- {BuySendSwapDepositOptions.map((option) => (
-
- ))}
-
+
+
+
+
+
+ {NavOptions.map((option) => (
+ history.push(option.route)}
+ >
+ {getLocale(option.name)}
+
+ ))}
+
+
+
+ {BuySendSwapDepositOptions.map((option) => (
+ history.push(option.route)}
+ >
+ {getLocale(option.name)}
+
+ ))}
+
+
)
diff --git a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts
index 0f3419acd7ca..811e9eed2d15 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts
+++ b/components/brave_wallet_ui/components/desktop/wallet-page-wrapper/wallet-page-wrapper.style.ts
@@ -22,8 +22,7 @@ export const layoutSmallWidth = 1100
export const layoutPanelWidth = 660
export const layoutTopPosition = 68
// navSpace and navWidth need to be defined here to prevent circular imports.
-export const navSpace = 24
-export const navWidth = 240
+export const navWidth = 250
export const Wrapper = styled.div<{
noPadding?: boolean
@@ -65,11 +64,11 @@ export const LayoutCardWrapper = styled.div<{
*/
--left-padding-without-nav: calc((100vw / 2) - (${maxCardWidth}px / 2));
/*
- + (${navWidth}px / 2) + (${navSpace}px / 2) is to then adjust the card body
+ + (${navWidth}px / 2) is to then adjust the card body
to the right to be centered with the nav.
*/
--left-padding-with-nav: calc(
- var(--left-padding-without-nav) + (${navWidth}px / 2) + (${navSpace}px / 2)
+ var(--left-padding-without-nav) + (${navWidth}px / 2)
);
display: flex;
flex-direction: column;
diff --git a/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts
index bc4af1ba9b6f..cf3905aab102 100644
--- a/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts
+++ b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts
@@ -8,8 +8,8 @@ import * as leo from '@brave/leo/tokens/css/variables'
import Icon from '@brave/leo/react/icon'
// Assets
-import BraveLogoLight from '../../send/assets/brave-logo-light.svg'
-import BraveLogoDark from '../../send/assets/brave-logo-dark.svg'
+import BraveLogoLight from '../../../../assets/svg-icons/wallet_logo_light.svg'
+import BraveLogoDark from '../../../../assets/svg-icons/wallet_logo_dark.svg'
// Shared Styles
import { StyledDiv, StyledButton } from '../../send/shared.styles'