miteruzo/btrc-hub
1
0
Fork 0
Code Issues 69 Pull Requests 1 Releases Wiki Activity

#19 トップバーと新規作成ちょっとだけ

Browse Source
This commit is contained in:
みてるぞ
2025-06-10 01:23:24 +09:00
parent 39dce3a39f
commit 5b8a560024
10 changed files with 327 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/TopNav.tsx
+30 -8
View File
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react"
import { Link, useLocation } from 'react-router-dom'
import React, { useState, useEffect } from 'react'
import { Link, useLocation, useParams } from 'react-router-dom'
import SettingsDialogue from './SettingsDialogue'
import { Button } from './ui/button'
import clsx from 'clsx'
@@ -25,9 +25,12 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
const [settingsVisible, setSettingsVisible] = useState (false)
const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
const MyLink = ({ to, title, menu }: { to: string; title: string; menu?: Menu }) => (
const MyLink = ({ to, title, menu, base }: { to: string
title: string
menu?: Menu
base?: string }) => (
<Link to={to} className={clsx ('hover:text-orange-500 h-full flex items-center',
(location.pathname.startsWith (to)
(location.pathname.startsWith (base ?? to)
? 'bg-gray-700 px-4 font-bold'
: 'px-2'))}>
{title}
@@ -50,11 +53,11 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
<>
<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>
<Link to="/posts" className="mx-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" />
<MyLink to="/wiki/ヘルプ:ホーム" base="/wiki" title="Wiki" />
</div>
<div className="ml-auto pr-4">
<Button onClick={() => setSettingsVisible (true)}>{user?.name || '名もなきニジラー'}</Button>
@@ -66,14 +69,33 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
</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'
const subClass = 'hover:text-orange-500 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)
{
case Menu.Post:
return (
<div className={className}>
<Link to="/posts" className={subClass}>一覧</Link>
<Link to="/posts/new" className={subClass}>投稿</Link>
<Link to="/posts/new" className={subClass}>投稿追加</Link>
</div>)
case Menu.Wiki:
return (
<div className={className}>
<input className={inputBox}
placeholder="Wiki 検索" />
<Link to="/wiki" className={subClass}>検索</Link>
<Link to="/wiki/new" className={subClass}>新規</Link>
<Link to="/wiki/changes" className={subClass}>全体履歴</Link>
<Link to="/wiki/ヘルプ:Wiki" className={subClass}>ヘルプ</Link>
{/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) &&
<>
<Separator />
<Link to={`/posts?tags=${ location.pathname.split ('/')[2] }`} className={subClass}>投稿</Link>
<Link to={`/wiki/${ location.pathname.split ('/')[2] }/history`} className={subClass}>履歴</Link>
<Link to={`/wiki/${ location.pathname.split ('/')[2] }/edit`} className={subClass}>編輯</Link>
</>}
</div>)
}
}) ()}