Change the navigation menu in the header

dapp/src/components/Header/Navigation/Navigation.tsx

@@ -1,20 +1,29 @@
 import React from "react"
 import { Box, BoxProps, HStack, List } from "@chakra-ui/react"
-import { NavigationItemType } from "#/types/navigation"
-import NavigationItem from "./NavigationItem"
+import { EXTERNAL_HREF } from "#/constants"
+import { routerPath } from "#/router/path"
+import { isString } from "#/utils"
+import NavigationItem, { NavigationItemProps } from "./NavigationItem"
 
-type NavigationProps = BoxProps & {
-  items: NavigationItemType[]
-}
-
-function Navigation(props: NavigationProps) {
-  const { items, ...restProps } = props
+const NAVIGATION_ITEMS: NavigationItemProps[] = [
+  { children: "Home", to: EXTERNAL_HREF.WEBSITE, isExternal: true },
+  { children: "Stake", to: routerPath.home },
+  { children: "Docs", to: EXTERNAL_HREF.DOCS, isExternal: true },
+  { children: "FAQ", to: EXTERNAL_HREF.FAQ, isExternal: true },
+  { children: "Blog", to: EXTERNAL_HREF.BLOG, isExternal: true },
+  { children: "Discord", to: EXTERNAL_HREF.DISCORD, isExternal: true },
+  { children: "X", to: EXTERNAL_HREF.X, isExternal: true },
+]
 
+function Navigation(props: BoxProps) {
   return (
-    <Box as="nav" {...restProps}>
+    <Box as="nav" {...props}>
       <HStack as={List} spacing={5} ml={12}>
-        {items.map((item) => (
-          <NavigationItem key={item.href} {...item} />
+        {NAVIGATION_ITEMS.map((item) => (
+          <NavigationItem
+            key={isString(item.to) ? item.to : item.to.pathname}
+            {...item}
+          />
         ))}
       </HStack>
     </Box>

dapp/src/components/Header/Navigation/NavigationItem.tsx

@@ -1,49 +1,41 @@
 import React from "react"
-import {
-  Box,
-  ListItem,
-  ListItemProps,
-  useMultiStyleConfig,
-} from "@chakra-ui/react"
-import { motion } from "framer-motion"
-import { NavigationItemType } from "#/types/navigation"
+import { ListItem, useMultiStyleConfig } from "@chakra-ui/react"
 import { To, useSearchParams } from "react-router-dom"
 import { useModal } from "#/hooks"
-import { NavLink } from "../../shared/NavLink"
+import { isString } from "#/utils"
+import { NavLink, NavLinkProps } from "../../shared/NavLink"
 
-type NavigationItemProps = ListItemProps & NavigationItemType
+export type NavigationItemProps = NavLinkProps
 
 function NavigationItem(props: NavigationItemProps) {
-  const { label, href, ...restProps } = props
-  const styles = useMultiStyleConfig("Link", { variant: "navigation" })
+  const { children, to: defaultTo, isExternal, ...restProps } = props
+  const styles = useMultiStyleConfig("Link", {
+    variant: "navigation",
+    size: "md",
+  })
   const [searchParams] = useSearchParams()
   const { isOpenGlobalErrorModal } = useModal()
   const isDisabled = isOpenGlobalErrorModal
 
-  const to: To = {
-    pathname: href,
-    search: searchParams.toString(),
-  }
+  const to: To = isExternal
+    ? defaultTo
+    : {
+        pathname: isString(defaultTo) ? defaultTo : defaultTo.pathname,
+        search: searchParams.toString(),
+      }
 
   return (
-    <ListItem pos="relative" {...restProps}>
+    <ListItem>
       <NavLink
         to={to}
         sx={styles.container}
         pointerEvents={isDisabled ? "none" : "auto"}
+        {...(isExternal && {
+          target: "_blank",
+        })}
+        {...restProps}
       >
-        {({ isActive }) => (
-          <>
-            {label}
-            {isActive && (
-              <Box
-                as={motion.span}
-                layoutId="active-route-indicator"
-                sx={styles.indicator}
-              />
-            )}
-          </>
-        )}
+        {children}
       </NavLink>
     </ListItem>
   )

dapp/src/components/Header/index.tsx

@@ -1,17 +1,11 @@
 import React from "react"
 import { AcreLogo } from "#/assets/icons"
-import { routerPath } from "#/router/path"
 import { Flex, HStack, Icon, Link } from "@chakra-ui/react"
-import { NavigationItemType } from "#/types"
 import { EXTERNAL_HREF } from "#/constants"
 import { useMobileMode } from "#/hooks"
 import ConnectWallet from "./ConnectWallet"
 import { Navigation } from "./Navigation"
 
-const NAVIGATION_ITEMS: NavigationItemType[] = [
-  { label: "Dashboard", href: routerPath.home },
-]
-
 export default function Header() {
   const isMobileMode = useMobileMode()
 
@@ -23,7 +17,7 @@ export default function Header() {
 
       {!isMobileMode && (
         <>
-          <Navigation items={NAVIGATION_ITEMS} />
+          <Navigation />
           <Flex ml="auto">
             <ConnectWallet />
           </Flex>

dapp/src/components/shared/NavLink.tsx

@@ -8,7 +8,7 @@ import {
   NavLinkProps as RouterNavLinkProps,
 } from "react-router-dom"
 
-type NavLinkProps = Omit<ChakraLinkProps, "as" | "href" | "children"> &
+export type NavLinkProps = Omit<ChakraLinkProps, "as" | "href" | "children"> &
   Pick<RouterNavLinkProps, "to" | "children">
 
 export function NavLink(props: NavLinkProps) {

dapp/src/theme/Link.ts

@@ -5,41 +5,46 @@ const multiStyleConfig = createMultiStyleConfigHelpers(PARTS)
 
 const containerBaseStyle = defineStyle({
   fontWeight: "semibold",
-  fontSize: "sm",
-  lineHeight: "sm",
 
   _hover: {
     textDecoration: "none",
   },
 })
 
 const navigationContainerStyles = defineStyle({
-  display: "block",
-  fontSize: "md",
-  lineHeight: "md",
-  fontWeight: "bold",
-  marginBottom: 2,
-  color: "grey.500",
-  _activeLink: { color: "grey.700" },
+  fontWeight: "medium",
+  color: "grey.700",
+  _activeLink: { color: "brand.400" },
 })
 
-const navigationIndicatorStyles = defineStyle({
-  pos: "absolute",
-  bottom: 0.5,
-  left: 0,
-  w: "full",
-  h: 0.5,
-  bg: "brand.400",
+const sizeSm = multiStyleConfig.definePartsStyle({
+  container: {
+    fontSize: "sm",
+    lineHeight: "sm",
+  },
 })
 
+const sizeMd = multiStyleConfig.definePartsStyle({
+  container: {
+    fontSize: "md",
+    lineHeight: "md",
+  },
+})
+
+const sizes = {
+  sm: sizeSm,
+  md: sizeMd,
+}
+
 export const linkTheme = multiStyleConfig.defineMultiStyleConfig({
   baseStyle: {
     container: containerBaseStyle,
+    size: "sm",
   },
   variants: {
     navigation: {
       container: navigationContainerStyles,
-      indicator: navigationIndicatorStyles,
     },
   },
+  sizes,
 })

dapp/src/types/index.ts

@@ -9,7 +9,6 @@ export * from "./time"
 export * from "./core"
 export * from "./fee"
 export * from "./modal"
-export * from "./navigation"
 export * from "./form"
 export * from "./eip1193"
 export * from "./error"