View all rankings in details.

components/layout/MenuLayout.js

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
+import Menu from 'components/common/Menu';
 import styles from './MenuLayout.module.css';
 
 export default function MenuLayout({
@@ -9,26 +10,19 @@ export default function MenuLayout({
   className,
   menuClassName,
   contentClassName,
+  optionClassName,
   children,
 }) {
-  function handleMenuSelect(option) {
-    onMenuSelect(option);
-  }
-
   return (
     <div className={classNames(styles.container, className)}>
-      <div className={classNames(styles.menu, menuClassName)}>
-        {menu.map(option =>
-          option ? (
-            <div
-              className={classNames(styles.option, { [styles.active]: option === selectedOption })}
-              onClick={() => handleMenuSelect(option)}
-            >
-              {option}
-            </div>
-          ) : null,
-        )}
-      </div>
+      <Menu
+        options={menu}
+        selectedOption={selectedOption}
+        className={classNames(styles.menu, menuClassName)}
+        selectedClassName={styles.selected}
+        optionClassName={classNames(styles.option, optionClassName)}
+        onSelect={onMenuSelect}
+      />
       <div className={classNames(styles.content, contentClassName)}>{children}</div>
     </div>
   );

components/layout/MenuLayout.module.css

@@ -3,6 +3,10 @@
   flex: 1;
 }
 
+.container .menu {
+  border: 0;
+}
+
 .menu {
   display: flex;
   flex-direction: column;
@@ -18,6 +22,7 @@
 }
 
 .option {
+  font-size: var(--font-size-normal);
   padding: 8px 16px;
   cursor: pointer;
   min-width: 160px;
@@ -29,6 +34,6 @@
   background: var(--gray75);
 }
 
-.active {
+.selected {
   font-weight: 600;
 }