#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) => (
-    <h2 className="text-xl my-4">
+
+export default (({ children, className, ...rest }: Props) => (
+    <h2 {...rest} className={cn ('text-xl my-4', className)}>
       {children}
-    </h2>)
+    </h2>)) satisfies FC<Props>

frontend/src/pages/MorePage.tsx

@@ -16,28 +16,31 @@ 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) => (
-	    <section key={i}>
-	      <SectionTitle>{item.name}</SectionTitle>
-	      <ul>
-		{item.subMenu
-		 .filter (subItem => (subItem.visible ?? true))
-		 .map ((subItem, j) => ('name' in subItem && (
-		    <li key={j}>
-		      <PrefetchLink
-			  to={subItem.to}
-			  target={subItem.to.slice (0, 2) === '//'
-				  ? '_blank'
-				  : undefined}>
-			{subItem.name}
-		      </PrefetchLink>
-		    </li>)))}
-	      </ul>
-	    </section>))}
+	{[...Array (Math.ceil (menu.length / 4)).keys ()].map (i => (
+	    <div key={i} className="flex-1 mx-16">
+	      {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, k) => ('name' in subItem && (
+			  <li key={k}>
+			    <PrefetchLink
+				to={subItem.to}
+				target={subItem.to.slice (0, 2) === '//'
+					? '_blank'
+					: undefined}>
+			      {subItem.name}
+			    </PrefetchLink>
+			  </li>)))}
+		    </ul>
+		  </section>))}
+	    </div>))}
       </MainArea>)
 }) satisfies FC