#95

frontend/src/components/common/SectionTitle.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
+import { cn } from '@/lib/utils'
 
-type Props = { children: React.ReactNode }
+import type { ComponentPropsWithoutRef, FC } from 'react'
+
+type Props = ComponentPropsWithoutRef<'h2'>
 
 
-export default ({ children }: Props) => (
+export default (({ children, className, ...rest }: Props) => (
-    <h2 className="text-xl my-4">
+    <h2 {...rest} className={cn ('text-xl my-4', className)}>
       {children}
-    </h2>)
+    </h2>)) satisfies FC<Props>

frontend/src/pages/MorePage.tsx

@@ -16,19 +16,21 @@ export default (() => {
       { tag: null, wikiId: null, user: { } as User, pathName: location.pathname })
 
   return (
-      <MainArea>
+      <MainArea className="md:flex">
 	<Helmet>
 	  <title>{`メニュー | ${ SITE_TITLE }`}</title>
 	</Helmet>
 
-	{menu.map ((item, i) => (
+	{[...Array (Math.ceil (menu.length / 4)).keys ()].map (i => (
-	    <section key={i}>
+	    <div key={i} className="flex-1 mx-16">
-	      <SectionTitle>{item.name}</SectionTitle>
+	      {menu.slice (4 * i, 4 * (i + 1)).map ((item, j) => (
+		  <section key={j}>
+		    <SectionTitle className="font-bold">{item.name}</SectionTitle>
 		    <ul>
 		      {item.subMenu
 		       .filter (subItem => (subItem.visible ?? true))
-		 .map ((subItem, j) => ('name' in subItem && (
+		       .map ((subItem, k) => ('name' in subItem && (
-		    <li key={j}>
+			  <li key={k}>
 			    <PrefetchLink
 				to={subItem.to}
 				target={subItem.to.slice (0, 2) === '//'
@@ -39,5 +41,6 @@ export default (() => {
 			  </li>)))}
 		    </ul>
 		  </section>))}
+	    </div>))}
       </MainArea>)
 }) satisfies FC