navigation skeleton done

OasisDEX · May 29, 2024 · bf528ae · bf528ae
1 parent 3e7007a
commit bf528ae
Show file tree

Hide file tree

Showing 20 changed files with 343 additions and 143 deletions.
diff --git a/apps/rays-dashboard/components/layout/Navigation/NavigationWrapper.tsx b/apps/rays-dashboard/components/layout/Navigation/NavigationWrapper.tsx
@@ -1,28 +1,55 @@
 'use client'
 
 import { FC } from 'react'
-import { Navigation, NavigationMenuPanelType } from '@summerfi/app-ui'
+import { Button, LoadingSpinner, Navigation, NavigationMenuPanelType, Text } from '@summerfi/app-ui'
 import { usePathname } from 'next/navigation'
 
 interface NavigationWrapperProps {
   panels?: NavigationMenuPanelType[]
+  connectedWalletAddress?: string
 }
+const NavigationModuleBridge = () => <LoadingSpinner />
+const NavigationModuleSwap = () => <LoadingSpinner />
 
-export const NavigationWrapper: FC<NavigationWrapperProps> = ({ panels }) => {
+export const NavigationWrapper: FC<NavigationWrapperProps> = ({
+  panels,
+  connectedWalletAddress,
+}) => {
   const currentPath = usePathname()
 
   return (
     <Navigation
       currentPath={currentPath}
       logo="img/branding/logo-dark.svg"
       logoSmall="img/branding/dot-dark.svg"
-      links={[
-        {
-          label: 'Portfolio',
-          link: '/#',
-        },
-      ]}
+      links={
+        connectedWalletAddress
+          ? [
+              {
+                label: 'Portfolio',
+                link: `/portfolio/${connectedWalletAddress}`,
+              },
+            ]
+          : undefined
+      }
       panels={panels}
+      navigationModules={{
+        NavigationModuleBridge,
+        NavigationModuleSwap,
+      }}
+      walletConnectionComponent={
+        <Button variant="secondarySmall" style={{ backgroundColor: 'var(--color-neutral-10)' }}>
+          <Text
+            variant="p4"
+            style={{
+              marginRight: 'var(--space-xl)',
+              marginLeft: 'var(--space-xl)',
+            }}
+          >
+            loaded wallet :)
+          </Text>
+        </Button>
+      }
     />
   )
 }
diff --git a/packages/app-ui/src/components/layout/Navigation/Navigation.module.scss b/packages/app-ui/src/components/layout/Navigation/Navigation.module.scss
@@ -7,6 +7,7 @@
   display: grid;
   align-items: center;
   grid-template-columns: auto auto;
+  justify-items: flex-end;
   z-index: 3;
   max-width: 1408px;
   margin: var(--space-l) auto var(--space-xxl);

diff --git a/packages/app-ui/src/components/layout/Navigation/Navigation.tsx b/packages/app-ui/src/components/layout/Navigation/Navigation.tsx
@@ -3,19 +3,21 @@ import { FC } from 'react'
 import {
   NavigationMenuPanelLinkType,
   NavigationMenuPanelType,
+  WithNavigationModules,
 } from '@/components/layout/Navigation/Navigation.types'
 import { NavigationActions } from '@/components/layout/Navigation/NavigationActions'
 import { NavigationBranding } from '@/components/layout/Navigation/NavigationBranding'
 import { NavigationMenu } from '@/components/layout/Navigation/NavigationMenu'
 
 import navigationStyles from '@/components/layout/Navigation/Navigation.module.scss'
 
-interface NavigationProps {
+interface NavigationProps extends WithNavigationModules {
   currentPath: string
   logo: string
   logoSmall: string
   links?: NavigationMenuPanelLinkType[]
   panels?: NavigationMenuPanelType[]
+  walletConnectionComponent?: React.ReactNode
 }
 
 export const Navigation: FC<NavigationProps> = ({
@@ -24,13 +26,20 @@ export const Navigation: FC<NavigationProps> = ({
   links,
   panels,
   currentPath,
+  walletConnectionComponent,
+  navigationModules,
 }) => {
   return (
     <div className={navigationStyles.wrapper}>
       <header className={navigationStyles.container}>
         <NavigationBranding logo={logo} logoSmall={logoSmall} />
-        <NavigationMenu links={links} panels={panels} currentPath={currentPath} />
-        <NavigationActions />
+        <NavigationMenu
+          links={links}
+          panels={panels}
+          currentPath={currentPath}
+          navigationModules={navigationModules}
+        />
+        <NavigationActions walletConnectionComponent={walletConnectionComponent} />
       </header>
     </div>
   )

diff --git a/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts b/packages/app-ui/src/components/layout/Navigation/Navigation.types.ts
@@ -112,3 +112,10 @@ export interface NavigationProps {
   panels?: NavigationMenuPanelType[]
   pill?: NavigationBrandingPill
 }
+
+export interface WithNavigationModules {
+  navigationModules?: {
+    NavigationModuleSwap: () => React.JSX.Element
+    NavigationModuleBridge: () => React.JSX.Element
+  }
+}
diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss
@@ -0,0 +1,9 @@
+button.walletButtonMock {
+  min-height: auto;
+  line-height: 22px;
+  height: 40px;
+  min-width: 40px;
+  width: auto;
+  box-shadow: var(--shadow-depth-1);
+  background-color: var(--color-neutral-10);
+}
diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss.d.ts b/packages/app-ui/src/components/layout/Navigation/NavigationActions.module.scss.d.ts
@@ -0,0 +1,9 @@
+export type Styles = {
+  walletButtonMock: string
+}
+
+export type ClassNames = keyof Styles
+
+declare const styles: Styles
+
+export default styles
diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationActions.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationActions.tsx
@@ -1,5 +1,32 @@
-interface NavigationActionsProps {}
+import classNames from 'classNames'
 
-export const NavigationActions = () => {
-  return <div>NavigationActions</div>
+import { Button } from '@/components/atoms/Button/Button'
+import { LoadingSpinner } from '@/components/molecules/Loader/Loader'
+
+import navigationActionStyles from '@/components/layout/Navigation/NavigationActions.module.scss'
+
+interface NavigationActionsProps {
+  walletConnectionComponent?: React.ReactNode
+}
+
+export const NavigationActions = ({ walletConnectionComponent }: NavigationActionsProps) => {
+  return (
+    walletConnectionComponent ?? (
+      <div>
+        <Button
+          variant="secondarySmall"
+          className={classNames(navigationActionStyles.walletButtonMock)}
+        >
+          <LoadingSpinner
+            size={24}
+            color="var(--color-interactive-50)"
+            style={{
+              marginRight: 'var(--space-xxl)',
+              marginLeft: 'var(--space-xxl)',
+            }}
+          />
+        </Button>
+      </div>
+    )
+  )
 }
diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.module.scss
@@ -12,15 +12,15 @@
   list-style: none;
   justify-content: center;
   padding: 0;
-  column-gap: var(--space-m + --space-xl);
+  column-gap: calc(var(--space-m) + var(--space-xl));
   @include media('>s') {
     column-gap: unset;
   }
   @include media('>l') {
     column-gap: var(--space-xl);
   }
-  @include media('>xl') {
-    column-gap: var(--space-m + --space-xl);
+  @include media('>=xl') {
+    column-gap: calc(var(--space-m) + var(--space-xl));
   }
 }
 

diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenu.tsx
@@ -2,117 +2,30 @@
 
 /* eslint-disable no-magic-numbers */
 import { useState } from 'react'
-import classNames from 'classNames'
-import Link from 'next/link'
 
-import { Text } from '@/components/atoms/Text/Text'
 import {
-  NavigationMenuPanelLinkProps,
   NavigationMenuPanelLinkType,
-  NavigationMenuPanelProps,
   NavigationMenuPanelType,
+  WithNavigationModules,
 } from '@/components/layout/Navigation/Navigation.types'
 import { NavigationMenuDropdown } from '@/components/layout/Navigation/NavigationMenuDropdown'
+import { NavigationMenuLink } from '@/components/layout/Navigation/NavigationMenuLink'
+import { NavigationMenuPanel } from '@/components/layout/Navigation/NavigationMenuPanel'
 
 import navigationMenuStyles from '@/components/layout/Navigation/NavigationMenu.module.scss'
 
-interface NavigationMenuProps {
+interface NavigationMenuProps extends WithNavigationModules {
   currentPath: string
   links?: NavigationMenuPanelLinkType[]
   panels?: NavigationMenuPanelType[]
 }
 
-function NavigationMenuLink({
-  label,
-  link,
-  onClick,
-  onMouseEnter,
+export const NavigationMenu = ({
+  links,
+  panels,
   currentPath,
-}: NavigationMenuPanelLinkProps) {
-  return (
-    <li className={navigationMenuStyles.navigationMenuLink} onMouseEnter={onMouseEnter}>
-      {link && (
-        <Link
-          href={link}
-          className={classNames(navigationMenuStyles.navigationMenuLinkElement, {
-            [navigationMenuStyles.navigationMenuLinkElementActive]: currentPath === link,
-          })}
-        >
-          <Text as="span" variant="p3semi">
-            {label}
-          </Text>
-        </Link>
-      )}
-      {onClick && (
-        <Text
-          as="span"
-          variant="p3semi"
-          onClick={onClick}
-          className={navigationMenuStyles.navigationMenuLinkElementOnClick}
-        >
-          {label}
-        </Text>
-      )}
-    </li>
-  )
-}
-
-function NavigationMenuPanelLabel({
-  currentPanel,
-  label,
-  isPanelOpen,
-}: Pick<NavigationMenuPanelProps, 'currentPanel' | 'label' | 'isPanelOpen'>) {
-  return (
-    <Text
-      as="span"
-      variant="p3semi"
-      className={classNames(navigationMenuStyles.navigationMenuPanelLabel, {
-        [navigationMenuStyles.navigationMenuPanelLabelActive]:
-          isPanelOpen && currentPanel === label,
-      })}
-    >
-      {label}
-    </Text>
-  )
-}
-
-function NavigationMenuPanel({
-  currentPanel,
-  label,
-  url,
-  isPanelOpen,
-  onMouseEnter,
-}: NavigationMenuPanelProps) {
-  return (
-    <li
-      className={navigationMenuStyles.navigationMenuPanel}
-      onMouseEnter={(e) => {
-        const target = e.target as HTMLDivElement
-        const halfOffsetWidth = target.offsetWidth / 2
-
-        onMouseEnter(target.offsetLeft + halfOffsetWidth)
-      }}
-    >
-      {url ? (
-        <Link href={url}>
-          <NavigationMenuPanelLabel
-            currentPanel={currentPanel}
-            label={label}
-            isPanelOpen={isPanelOpen}
-          />
-        </Link>
-      ) : (
-        <NavigationMenuPanelLabel
-          currentPanel={currentPanel}
-          label={label}
-          isPanelOpen={isPanelOpen}
-        />
-      )}
-    </li>
-  )
-}
-
-export const NavigationMenu = ({ links, panels, currentPath }: NavigationMenuProps) => {
+  navigationModules,
+}: NavigationMenuProps) => {
   const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false)
   const [isPanelSwitched, setIsPanelSwitched] = useState<boolean>(false)
   const [currentPanel, setCurrentPanel] = useState<string>(panels?.[0].label ?? '')
@@ -158,6 +71,7 @@ export const NavigationMenu = ({ links, panels, currentPath }: NavigationMenuPro
           isPanelOpen={isPanelOpen}
           isPanelSwitched={isPanelSwitched}
           panels={panels}
+          navigationModules={navigationModules}
         />
       )}
     </div>

diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdown.tsx
@@ -2,12 +2,15 @@
 import { useEffect, useRef, useState } from 'react'
 import classNames from 'classNames'
 
-import { NavigationMenuPanelType } from '@/components/layout/Navigation/Navigation.types'
+import {
+  NavigationMenuPanelType,
+  WithNavigationModules,
+} from '@/components/layout/Navigation/Navigation.types'
 import { NavigationMenuDropdownContent } from '@/components/layout/Navigation/NavigationMenuDropdownContent'
 
 import navigationMenuDropdownStyles from './NavigationMenuDropdown.module.scss'
 
-export interface NavigationMenuDropdownProps {
+export interface NavigationMenuDropdownProps extends WithNavigationModules {
   arrowPosition: number
   currentPanel: string
   isPanelOpen: boolean
@@ -60,6 +63,7 @@ export const NavigationMenuDropdown = ({
   isPanelOpen,
   isPanelSwitched,
   panels,
+  navigationModules,
 }: NavigationMenuDropdownProps) => {
   const ref = useRef<HTMLDivElement>(null)
   const [isListSwitched, setIsListSwitched] = useState<boolean>(false)
@@ -124,6 +128,7 @@ export const NavigationMenuDropdown = ({
                   currentPanel={currentPanel}
                   isPanelActive={isPanelOpen && currentPanel === label}
                   isPanelOpen={isPanelOpen}
+                  navigationModules={navigationModules}
                   label={label}
                   onChange={(_height) => {
                     if (ref.current) setHeight(Math.max(_height, ref.current.offsetHeight))

diff --git a/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss b/packages/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss
@@ -46,4 +46,10 @@
     flex-direction: column;
     width: 100%;
     transition: opacity 250ms, transform 250ms;
+    pointer-events: none;
+    opacity: 0;
+    &Active {
+      opacity: 1;
+      pointer-events: auto;
+    }
 }
diff --git a/...es/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts b/...es/app-ui/src/components/layout/Navigation/NavigationMenuDropdownContent.module.scss.d.ts
@@ -3,6 +3,7 @@ export type Styles = {
   navigationMenuDropdownContentFirstColumnLi: string
   navigationMenuDropdownContentSecondColumn: string
   navigationMenuDropdownContentSecondColumnLi: string
+  navigationMenuDropdownContentSecondColumnLiActive: string
 }
 
 export type ClassNames = keyof Styles