Add prefix

Author: owjs3901

apps/landing/src/app/(detail)/docs/LeftMenu.tsx

@@ -1,66 +1,65 @@
 import { VStack } from '@devup-ui/react'
 
-import { URL_PREFIX } from '../../../constants'
 import { MenuItem } from './MenuItem'
 
 export function LeftMenu() {
   return (
     <VStack gap="6px">
-      <MenuItem to={URL_PREFIX + '/docs/overview'}>Overview</MenuItem>
-      <MenuItem to={URL_PREFIX + '/docs/installation'}>Installation</MenuItem>
-      <MenuItem to={URL_PREFIX + '/docs/features'}>Features</MenuItem>
+      <MenuItem to="/docs/overview">Overview</MenuItem>
+      <MenuItem to="/docs/installation">Installation</MenuItem>
+      <MenuItem to="/docs/features">Features</MenuItem>
       <MenuItem
         subMenu={[
           {
-            to: URL_PREFIX + '/docs/api/box',
+            to: '/docs/api/box',
             children: 'Box',
           },
           {
-            to: URL_PREFIX + '/docs/api/button',
+            to: '/docs/api/button',
             children: 'Button',
           },
           {
-            to: URL_PREFIX + '/docs/api/input',
+            to: '/docs/api/input',
             children: 'Input',
           },
           {
-            to: URL_PREFIX + '/docs/api/text',
+            to: '/docs/api/text',
             children: 'Text',
           },
           {
-            to: URL_PREFIX + '/docs/api/image',
+            to: '/docs/api/image',
             children: 'Image',
           },
           {
-            to: URL_PREFIX + '/docs/api/flex',
+            to: '/docs/api/flex',
             children: 'Flex',
           },
           {
-            to: URL_PREFIX + '/docs/api/v-stack',
+            to: '/docs/api/v-stack',
             children: 'VStack',
           },
           {
-            to: URL_PREFIX + '/docs/api/center',
+            to: '/docs/api/center',
             children: 'Center',
           },
           {
-            to: URL_PREFIX + '/docs/api/grid',
+            to: '/docs/api/grid',
             children: 'Grid',
           },
           {
-            to: URL_PREFIX + '/docs/api/css',
+            to: '/docs/api/css',
             children: 'css',
           },
           {
-            to: URL_PREFIX + '/docs/api/style-props',
+            to: '/docs/api/style-props',
             children: 'Style Props',
           },
           {
-            to: URL_PREFIX + '/docs/api/selector',
+            to: '/docs/api/selector',
             children: 'Selector',
           },
           {
-            to: URL_PREFIX + '/docs/api/group-selector',
+            to: '/docs/api/group-selector',
             children: 'Group Selector',
           },
         ]}
@@ -70,23 +69,23 @@ export function LeftMenu() {
       <MenuItem
         subMenu={[
           {
-            to: URL_PREFIX + '/docs/devup/devup-json',
+            to: '/docs/devup/devup-json',
             children: 'What is devup?',
           },
           {
-            to: URL_PREFIX + '/docs/devup/colors',
+            to: '/docs/devup/colors',
             children: 'Colors',
           },
           {
-            to: URL_PREFIX + '/docs/devup/typography',
+            to: '/docs/devup/typography',
             children: 'Typography',
           },
           {
-            to: URL_PREFIX + '/docs/devup/breakpoints',
+            to: '/docs/devup/breakpoints',
             children: 'Breakpoints',
           },
           {
-            to: URL_PREFIX + '/docs/devup/figma-plugin',
+            to: '/docs/devup/figma-plugin',
             children: 'Figma Plugin',
           },
         ]}

apps/landing/src/app/(detail)/docs/MenuItem.tsx

@@ -3,6 +3,7 @@ import { Box, css, Flex, Text } from '@devup-ui/react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
+import { URL_PREFIX } from '../../../constants'
 import { OpenMenuItem } from './OpenMenuItem'
 
 export interface MenuItemProps {
@@ -18,8 +19,12 @@ export function MenuItem(props: MenuItemProps) {
   const { children, to, subMenu } = props
   const path = usePathname()
   const selected = to
-    ? path.startsWith(to)
-    : !!subMenu?.some((item) => (item.to ? path.startsWith(item.to) : false))
+    ? path.startsWith(to) || path.startsWith(URL_PREFIX + to)
+    : !!subMenu?.some((item) =>
+        item.to
+          ? path.startsWith(URL_PREFIX + item.to) || path.startsWith(item.to)
+          : false,
+      )
 
   if (subMenu) return <OpenMenuItem {...props} subMenu={subMenu} />
   const inner = (

apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx

@@ -14,7 +14,9 @@ export function OpenMenuItem({
   Required<Pick<MenuItemProps, 'subMenu'>>) {
   const path = usePathname()
   const selected = subMenu.some((item) =>
-    item.to ? path.startsWith(item.to) : false,
+    item.to
+      ? path.startsWith(URL_PREFIX + item.to) || path.startsWith(item.to)
+      : false,
   )
   const [open, handleOpen] = useReducer((state) => !state, selected)
   return (