menu refactoring

src/components/Menu/MenuItem.tsx

@@ -0,0 +1,31 @@
+import cx from 'classnames'
+import { useRouter } from 'next/router'
+import { ActiveLink } from './ActiveLink'
+
+export type MenuItemProps = {
+    href: string
+    layout: 'desktop' | 'mobile'
+}
+
+export const MenuItem: React.FC<MenuItemProps> = props => {
+    const router = useRouter()
+    const current = router.asPath === props.href
+    const href = current ? null : props.href
+
+    return (
+        <li
+            className={cx('menuItem', props.layout, {
+                selected: current,
+            })}
+        >
+            <ActiveLink
+                href={href}
+                activeStyle={{
+                    fontWeight: 'bold'
+                }}
+            >
+                {props.children}
+            </ActiveLink>
+        </li>
+    )
+}

src/components/Menu/index.tsx

@@ -1,30 +1,22 @@
 import './styles.css'
 
 import cx from 'classnames'
-import { ActiveLink } from './ActiveLink'
+import { MenuItem } from './MenuItem'
 
-export interface IMenuProps {
+export type MenuProps = {
     layout: 'desktop' | 'mobile'
     items: any[]
 }
 
-export const Menu: React.FC<IMenuProps> = props => (
-    <div className={cx('menu', props.layout)}>
+export const Menu: React.FC<MenuProps> = props => (
+    <menu className={cx('menu', props.layout)}>
         {props.items.map((item, index) => (
-            <li key={index}
-                className={cx('menuItem', props.layout, {
-                    selected: item.highlighted
-                })}
+            <MenuItem key={index}
+                href={item.url}
+                layout={props.layout}
             >
-                <ActiveLink
-                    href={!item.active ? item.url : null}
-                    activeStyle={{
-                        fontWeight: 'bold',
-                    }}
-                >
-                    {item.text}
-                </ActiveLink>
-            </li>
+                {item.text}
+            </MenuItem>
         ))}
-    </div>
+    </menu>
 )