feat(wallet): Use Leo Side Nav in Wallet

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%;
+`

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 (
-    <Wrapper isPanel={isPanel}>
+    <Wrapper>
       <PanelOptionsWrapper>
         <Section>
           {PanelNavOptions.map((option) => (
@@ -47,22 +51,40 @@ export const WalletNav = () => {
       </PanelOptionsWrapper>
 
       <PageOptionsWrapper>
-        <Section showBorder={true}>
-          {NavOptions.map((option) => (
-            <WalletNavButton
-              option={option}
-              key={option.id}
-            />
-          ))}
-        </Section>
-        <Section>
-          {BuySendSwapDepositOptions.map((option) => (
-            <WalletNavButton
-              option={option}
-              key={option.id}
-            />
-          ))}
-        </Section>
+        <LeoNavigation>
+          <Row
+            justifyContent='flex-start'
+            padding='32px 0px 16px 24px'
+            slot='header'
+          >
+            <WalletLogo />
+          </Row>
+          <NavigationMenu>
+            {NavOptions.map((option) => (
+              <NavigationItem
+                key={option.id}
+                icon={option.icon}
+                isCurrent={walletLocation.includes(option.route)}
+                onClick={() => history.push(option.route)}
+              >
+                {getLocale(option.name)}
+              </NavigationItem>
+            ))}
+            <Row>
+              <VerticalDivider />
+            </Row>
+            {BuySendSwapDepositOptions.map((option) => (
+              <NavigationItem
+                key={option.id}
+                icon={option.icon}
+                isCurrent={walletLocation.includes(option.route)}
+                onClick={() => history.push(option.route)}
+              >
+                {getLocale(option.name)}
+              </NavigationItem>
+            ))}
+          </NavigationMenu>
+        </LeoNavigation>
       </PageOptionsWrapper>
     </Wrapper>
   )

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;

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'