#14 ぼちぼち

frontend/src/components/TopNav.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react"
-import { Link } from 'react-router-dom'
+import React, { useState, useEffect } from "react"
+import { Link, useLocation } from 'react-router-dom'
 import SettingsDialogue from './SettingsDialogue'
 import { Button } from './ui/button'
+import clsx from 'clsx'
 
 type User = { id:               number
               name:             string | null
@@ -11,27 +12,72 @@ type User = { id:               number
 type Props = { user:    User
                setUser: (user: User) => void }
 
+const enum Menu { None,
+                  Post,
+                  Deerjikist,
+                  Tag,
+                  Wiki }
+
 
 const TopNav: React.FC = ({ user, setUser }: Props) => {
+  const location = useLocation ()
+
   const [settingsVisible, setSettingsVisible] = useState (false)
+  const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
+
+  const MyLink = ({ to, title, menu }: { to: string; title: string; menu?: Menu }) => (
+      <Link to={to} className={clsx ('hover:text-orange-500 h-full flex items-center',
+                                     (location.pathname.startsWith (to)
+                                      ? 'bg-gray-700 px-4 font-bold'
+                                      : 'px-2'))}>
+        {title}
+      </Link>)
+
+  useEffect (() => {
+    if (location.pathname.startsWith ('/posts'))
+      setSelectedMenu (Menu.Post)
+    else if (location.pathname.startsWith ('/deerjikists'))
+      setSelectedMenu (Menu.Deerjikist)
+    else if (location.pathname.startsWith ('/tags'))
+      setSelectedMenu (Menu.Tag)
+    else if (location.pathname.startsWith ('/wiki'))
+      setSelectedMenu (Menu.Wiki)
+    else
+      setSelectedMenu (Menu.None)
+  }, [location])
 
   return (
-      <nav className="bg-gray-800 text-white p-3 flex justify-between items-center w-full">
-        <div className="flex items-center gap-4">
-          <Link to="/" className="text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
-          <Link to="/posts" className="hover:text-orange-500">広場</Link>
-          <Link to="/deerjikists" className="hover:text-orange-500">ニジラー</Link>
-          <Link to="/tags" className="hover:text-orange-500">タグ</Link>
-          <Link to="/wiki" className="hover:text-orange-500">Wiki</Link>
-        </div>
-        <div className="ml-auto pr-4">
-          <Button onClick={() => setSettingsVisible (true)}>{user?.name || '名もなきニジラー'}</Button>
-          <SettingsDialogue visible={settingsVisible}
-                            onVisibleChange={setSettingsVisible}
-                            user={user}
-                            setUser={setUser} />
-        </div>
-      </nav>)
+      <>
+        <nav className="bg-gray-800 text-white px-3 flex justify-between items-center w-full min-h-[48px]">
+          <div className="flex items-center gap-2 h-full">
+            <Link to="/posts" className="mr-4 text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
+            <MyLink to="/posts" title="広場" />
+            <MyLink to="/deerjikists" title="ニジラー" />
+            <MyLink to="/tags" title="タグ" />
+            <MyLink to="/wiki" title="Wiki" />
+          </div>
+          <div className="ml-auto pr-4">
+            <Button onClick={() => setSettingsVisible (true)}>{user?.name || '名もなきニジラー'}</Button>
+            <SettingsDialogue visible={settingsVisible}
+                              onVisibleChange={setSettingsVisible}
+                              user={user}
+                              setUser={setUser} />
+          </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-4'
+          switch (selectedMenu)
+          {
+          case Menu.Post:
+            return (
+                <div className={className}>
+                  <Link to="/posts" className={subClass}>一覧</Link>
+                  <Link to="/posts/new" className={subClass}>投稿</Link>
+                </div>)
+          }
+        }) ()}
+      </>)
 }