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

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 && (
-	      <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>)}
+	  <TopNavUser user={user} />
 
 	  <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}
-		   href="#"
-		   className={cn ('w-full min-h-[40px] flex items-center pl-8',
-				  i === openItemIdx && 'font-bold bg-yellow-50 dark:bg-red-950')}
-		   onClick={ev => {
-		     ev.preventDefault ()
-		     if (i === openItemIdx)
-		       {
-			 setMenuOpen (false)
-			 navigate (item.to)
-		       }
-		     else
-		       setOpenItemIdx (i)
-		   }}>
+		<Link key={i}
+		      to={i === openItemIdx ? item.to : '#'}
+		      className={cn ('w-full min-h-[40px] flex items-center pl-8',
+				     ((i === openItemIdx)
+				      && 'font-bold bg-yellow-50 dark:bg-red-950'))}
+		      onClick={ev => {
+			if (i !== openItemIdx)
+			  {
+			    ev.preventDefault ()
+			    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 && (
-	      <>
-		<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>
-	      </>)}
+	  <TopNavUser user={user} sp />
 	  <Separator />
 	</div>
       </>)