#23 バグの修正およびリファクタリング等

frontend/src/components/ErrorScreen.tsx

@@ -31,7 +31,7 @@ export default ({ status }: Props) => {
   style.innerHTML = `
       @font-face
       {
-	font-family: 'MyFont';
+	font-family: 'Nikumaru';
 	src: url(${ nikumaru }) format('opentype');
       }`
   document.head.appendChild (style)
@@ -42,15 +42,15 @@ export default ({ status }: Props) => {
 	  <meta name="robots" content="noindex" />
 	  <title>{title} | {SITE_TITLE}</title>
 	</Helmet>
-	<div className="text-6xl font-bold text-transparent whitespace-nowrap
+	<div className="text-2xl sm:text-4xl md:text-6xl font-bold text-transparent
 			bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
 			bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
-			space-y-6 text-center flex flex-col justify-center items-center"
+			space-y-2 sm:space-y-4 md:space-y-6 text-center flex flex-col justify-center items-center"
-	     style={{ fontFamily: 'MyFont' }}>
+	     style={{ fontFamily: 'Nikumaru' }}>
 	  <p>{status}</p>
-	  <div className="flex space-x-4">
+	  <div className="flex flex-row space-x-1 sm:space-x-2 md:space-x-4">
 	    <p style={{ writingMode: 'vertical-rl' }}>{leftMsg}</p>
-	    <img src={errorImg} alt="逃げたギター" />
+	    <img className="max-w-[70vw]" src={errorImg} alt="逃げたギター" />
 	    <p style={{ writingMode: 'vertical-rl' }}>{rightMsg}</p>
 	  </div>
 	  <p className="mr-[-.5em]">{message}</p>

frontend/src/components/TopNav.tsx

@@ -1,9 +1,10 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import { useState, useEffect } from 'react'
-import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 import Separator from '@/components/MenuSeparator'
+import TopNavUser from '@/components/TopNavUser'
 import { API_BASE_URL } from '@/config'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { cn } from '@/lib/utils'
@@ -15,7 +16,6 @@ type Props = { user: User | null }
 
 export default ({ user }: Props) => {
   const location = useLocation ()
-  const navigate = useNavigate ()
 
   const [menuOpen, setMenuOpen] = useState (false)
   const [openItemIdx, setOpenItemIdx] = useState (-1)
@@ -57,6 +57,7 @@ export default ({ user }: Props) => {
   }, [])
 
   useEffect (() => {
+    setMenuOpen (false)
     setOpenItemIdx (menu.findIndex (item => (
 	location.pathname.startsWith (item.base || item.to))))
   }, [location])
@@ -107,14 +108,7 @@ export default ({ user }: Props) => {
 	    ))}
 	  </div>
 
-	  {user && (
+	  <TopNavUser user={user} />
-	      <div className="hidden md:block ml-auto pr-4">
-		<Link to="/users/settings"
-		      className="font-bold text-red-600 hover:text-red-400
-				 dark:text-yellow-400 dark:hover:text-yellow-200">
-		  {user.name || '名もなきニジラー'}
-		</Link>
-	      </div>)}
 
 	  <a href="#"
 	     className="md:hidden ml-auto pr-4
@@ -145,22 +139,20 @@ export default ({ user }: Props) => {
 	  <Separator />
 	  {menu.map ((item, i) => (
 	      <>
-		<a key={i}
+		<Link key={i}
-		   href="#"
+		      to={i === openItemIdx ? item.to : '#'}
-		   className={cn ('w-full min-h-[40px] flex items-center pl-8',
+		      className={cn ('w-full min-h-[40px] flex items-center pl-8',
-				  i === openItemIdx && 'font-bold bg-yellow-50 dark:bg-red-950')}
+				     ((i === openItemIdx)
-		   onClick={ev => {
+				      && 'font-bold bg-yellow-50 dark:bg-red-950'))}
-		     ev.preventDefault ()
+		      onClick={ev => {
-		     if (i === openItemIdx)
+			if (i !== openItemIdx)
-		       {
+			  {
-			 setMenuOpen (false)
+			    ev.preventDefault ()
-			 navigate (item.to)
+			    setOpenItemIdx (i)
-		       }
+			  }
-		     else
+		      }}>
-		       setOpenItemIdx (i)
-		   }}>
 		  {item.name}
-		</a>
+		</Link>
 		{i === openItemIdx && (
 		    item.subMenu
 		    .filter (subItem => subItem.visible ?? true)
@@ -172,16 +164,7 @@ export default ({ user }: Props) => {
 			  {subItem.name}
 			</Link>)))}
 	      </>))}
-	  {user && (
+	  <TopNavUser user={user} sp />
-	      <>
-		<Separator />
-		<Link to="/users/settings"
-		      className="w-full min-h-[40px] flex items-center pl-8
-				 font-bold text-red-600 hover:text-red-400
-				 dark:text-yellow-400 dark:hover:text-yellow-200">
-		  {user.name || '名もなきニジラー'}
-		</Link>
-	      </>)}
 	  <Separator />
 	</div>
       </>)

frontend/src/components/TopNavUser.tsx

@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom'
+
+import Separator from '@/components/MenuSeparator'
+import { cn } from '@/lib/utils'
+
+import type { User } from '@/types'
+
+type Props = { user:  User | null,
+	       sp?:   boolean }
+
+
+export default ({ user, sp }: Props) => {
+  if (!(user))
+    return
+
+  const className = cn ((sp
+			 ? 'md:hidden w-full min-h-[40px] flex items-center pl-8'
+			 : 'hidden md:block ml-auto pr-4'),
+		        'font-bold text-red-600 hover:text-red-400',
+		        'dark:text-yellow-400 dark:hover:text-yellow-200')
+
+  return (
+      <>
+	{sp && <Separator />}
+	<Link to="/users/settings"
+	      className={className}>
+	  {user.name || '名もなきニジラー'}
+	</Link>
+      </>)
+}