#23

frontend/src/components/TopNav.tsx

@@ -17,7 +17,6 @@ const Menu = { None:  'None',
 	       User:  'User',
 	       Tag:   'Tag',
 	       Wiki:  'Wiki' } as const
-
 type Menu = typeof Menu[keyof typeof Menu]
 
 
@@ -38,9 +37,9 @@ export default ({ user }: Props) => {
   const MyLink = ({ to, title, base }: { to:    string
 					 title: string
 					 base?: string }) => (
-      <Link to={to} className={cn ('hover:text-orange-500 h-full flex items-center',
+      <Link to={to} className={cn ('h-full flex items-center',
 				   (location.pathname.startsWith (base ?? to)
-				    ? 'bg-gray-700 px-4 font-bold'
+				    ? 'bg-yellow-200 dark:bg-red-950 px-4 font-bold'
 				    : 'px-2'))}>
 	{title}
       </Link>)
@@ -121,11 +120,9 @@ export default ({ user }: Props) => {
       try
       {
 	const pageRes = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`)
-	const pageData: any = pageRes.data
-	const wikiPage = toCamel (pageData, { deep: true }) as WikiPage
+	const wikiPage = toCamel (pageRes.data as any, { deep: true }) as WikiPage
 
 	const tagRes = await axios.get (`${ API_BASE_URL }/tags/name/${ wikiPage.title }`)
-	const tagData: any = tagRes.data
 	const tag = toCamel (tagData, { deep: true }) as Tag
 
 	setPostCount (tag.postCount)
@@ -139,25 +136,32 @@ export default ({ user }: Props) => {
 
   return (
       <>
-	<nav className="bg-gray-800 text-white px-3 flex justify-between items-center w-full min-h-[48px]">
+	<nav className="px-3 flex justify-between items-center w-full min-h-[48px]
+			bg-yellow-50 dark:bg-red-975">
 	  <div className="flex items-center gap-2 h-full">
-	    <Link to="/" className="mx-4 text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
+	    <Link to="/" className="mx-4 text-xl font-bold
+				    text-pink-600 hover:text-pink-400
+				    dark:text-pink-300 dark:hover:text-pink-100">
+	      ぼざクリ タグ広場
+	    </Link>
 	    <MyLink to="/posts" title="広場" />
 	    <MyLink to="/tags" title="タグ" />
 	    <MyLink to="/wiki/ヘルプ:ホーム" base="/wiki" title="Wiki" />
 	    <MyLink to="/users/settings" base="/users" title="ニジラー" />
 	  </div>
-	  <div className="ml-auto pr-4">
-	    {user && (
-		<Button onClick={() => navigate ('/users/settings')}
-			className="bg-gray-600">
+	  {user &&
+	      <div className="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 || '名もなきニジラー'}
-		</Button>)}
-	  </div>
+		</Link>
+	      </div>}
 	</nav>
 	{(() => {
-	  const className = 'bg-gray-700 text-white px-3 flex items-center w-full min-h-[40px]'
-	  const subClass = 'hover:text-orange-500 h-full flex items-center px-3'
+	  const className = cn ('bg-yellow-200 dark:bg-red-950',
+				'text-white px-3 flex items-center w-full min-h-[40px]')
+	  const subClass = 'h-full flex items-center px-3'
 	  // const inputBox = 'flex items-center px-3 mx-2'
 	  const Separator = () => <span className="flex items-center px-2">|</span>
 	  switch (selectedMenu)