-
タグ
-
- {CATEGORIES.flatMap (cat => cat in tags ? (
- tags[cat].map (tag => (
- -
-
-
))) : [])}
-
-
関聯
- {posts.length > 0 && (
-
{
- ev.preventDefault ()
- void ((async () => {
- try
- {
- const { data } = await axios.get (`${ API_BASE_URL }/posts/random`,
- { params: { tags: tagsQuery.split (' ').filter (e => e !== '').join (' '),
- match: (anyFlg ? 'any' : 'all') } })
- navigate (`/posts/${ (data as Post).id }`)
- }
- catch
- {
- ;
- }
- }) ())
- }}>
- ランダム
- )}
+
+
+ {TagBlock}
+
+
+ {tagsVsbl && (
+
+ {TagBlock}
+ )}
+
+
{
ev.preventDefault ()
- setTagsVsbl (!(tagsVsbl))
+ setTagsVsbl (v => !(v))
}}>
{tagsVsbl ? '▲▲▲ タグ一覧を閉じる ▲▲▲' : '▼▼▼ タグ一覧を表示 ▼▼▼'}
diff --git a/frontend/src/components/TopNav.tsx b/frontend/src/components/TopNav.tsx
index 104f40e..9762a3d 100644
--- a/frontend/src/components/TopNav.tsx
+++ b/frontend/src/components/TopNav.tsx
@@ -1,6 +1,7 @@
import axios from 'axios'
import toCamel from 'camelcase-keys'
-import { Fragment, useState, useEffect } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import Separator from '@/components/MenuSeparator'
@@ -19,6 +20,28 @@ type Props = { user: User | null }
export default (({ user }: Props) => {
const location = useLocation ()
+ const dirRef = useRef<(-1) | 1> (1)
+ const itemsRef = useRef<(HTMLAnchorElement | null)[]> ([])
+ const navRef = useRef
(null)
+
+ const measure = () => {
+ const nav = navRef.current
+ const el = itemsRef.current[activeIdx]
+ if (!(nav) || !(el) || activeIdx < 0)
+ return
+
+ const navRect = nav.getBoundingClientRect ()
+ const elRect = el.getBoundingClientRect ()
+
+ setHl ({ left: elRect.left - navRect.left,
+ width: elRect.width,
+ visible: true })
+ }
+
+ const [hl, setHl] = useState<{ left: number; width: number; visible: boolean }> ({
+ left: 0,
+ width: 0,
+ visible: false })
const [menuOpen, setMenuOpen] = useState (false)
const [openItemIdx, setOpenItemIdx] = useState (-1)
const [postCount, setPostCount] = useState (null)
@@ -30,6 +53,7 @@ export default (({ user }: Props) => {
{ name: '広場', to: '/posts', subMenu: [
{ name: '一覧', to: '/posts' },
{ name: '投稿追加', to: '/posts/new' },
+ { name: '耕作履歴', to: '/posts/changes' },
{ name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
{ name: 'タグ', to: '/tags', subMenu: [
{ name: 'タグ一覧', to: '/tags', visible: false },
@@ -52,6 +76,32 @@ export default (({ user }: Props) => {
{ name: 'お前', to: `/users/${ user?.id }`, visible: false },
{ name: '設定', to: '/users/settings', visible: Boolean (user) }] }]
+ const activeIdx = menu.findIndex (item => location.pathname.startsWith (item.base || item.to))
+
+ const prevActiveIdxRef = useRef (activeIdx)
+
+ if (activeIdx !== prevActiveIdxRef.current)
+ {
+ dirRef.current = activeIdx > prevActiveIdxRef.current ? 1 : -1
+ prevActiveIdxRef.current = activeIdx
+ }
+
+ const dir = dirRef.current
+
+ useLayoutEffect (() => {
+ if (activeIdx < 0)
+ return
+
+ const raf = requestAnimationFrame (measure)
+ const onResize = () => requestAnimationFrame (measure)
+
+ addEventListener ('resize', onResize)
+ return () => {
+ cancelAnimationFrame (raf)
+ removeEventListener ('resize', onResize)
+ }
+ }, [activeIdx])
+
useEffect (() => {
const unsubscribe = WikiIdBus.subscribe (setWikiId)
return () => unsubscribe ()
@@ -97,16 +147,26 @@ export default (({ user }: Props) => {
ぼざクリ タグ広場
- {menu.map ((item, i) => (
-
- {item.name}
-
- ))}
+
+
+
+ {menu.map ((item, i) => (
+
{
+ itemsRef.current[i] = el
+ }}
+ className={cn ('relative z-10 flex h-full items-center px-5',
+ (i === openItemIdx) && 'font-bold')}>
+ {item.name}
+ ))}
+