#23 タグ一覧のスマホでの表示位置調整

frontend/src/components/ErrorScreen.tsx

@@ -42,7 +42,7 @@ export default ({ status }: Props) => {
 	  <meta name="robots" content="noindex" />
 	  <title>{title} | {SITE_TITLE}</title>
 	</Helmet>
-	<div className="text-2xl sm:text-4xl md:text-6xl font-bold text-transparent
+	<div className="text-6xl font-bold text-transparent
 			bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
 			bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
 			space-y-2 sm:space-y-4 md:space-y-6 text-center flex flex-col justify-center items-center"

frontend/src/components/TagSearch.tsx

@@ -85,7 +85,7 @@ const TagSearch: React.FC = () => {
   }, [location.search])
 
   return (
-      <div className="relative w-full mb-4">
+      <div className="relative w-full">
         <input type="text"
                placeholder="タグ検索..."
                value={search}

frontend/src/components/TagSidebar.tsx

@@ -8,10 +8,11 @@ import SectionTitle from '@/components/common/SectionTitle'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { API_BASE_URL } from '@/config'
 import { CATEGORIES } from '@/consts'
+import { cn } from '@/lib/utils'
 
 import type { Post, Tag } from '@/types'
 
-type TagByCategory = { [key: string]: Tag[] }
+type TagByCategory = Record<string, Tag[]>
 
 type Props = { posts: Post[] }
 
@@ -19,6 +20,7 @@ type Props = { posts: Post[] }
 export default ({ posts }: Props) => {
   const navigate = useNavigate ()
 
+  const [tagsVsbl, setTagsVsbl] = useState (false)
   const [tags, setTags] = useState<TagByCategory> ({ })
 
   const location = useLocation ()
@@ -57,6 +59,7 @@ export default ({ posts }: Props) => {
   return (
       <SidebarComponent>
 	<TagSearch />
+	<div className={cn (!(tagsVsbl) && 'hidden', 'md:block mt-4')}>
 	  <SectionTitle>タグ</SectionTitle>
 	  <ul>
 	    {CATEGORIES.flatMap (cat => cat in tags ? (
@@ -86,5 +89,14 @@ export default ({ posts }: Props) => {
 		 }}>
 		ランダム
 	      </a>)}
+	</div>
+	<a href="#"
+	   className="md:hidden block my-2 text-center text-sm text-gray-500"
+	   onClick={ev => {
+	     ev.preventDefault ()
+	     setTagsVsbl (!(tagsVsbl))
+	   }}>
+	  {tagsVsbl ? '▲▲▲ タグ一覧を閉じる ▲▲▲' : '▼▼▼ タグ一覧を表示 ▼▼▼'}
+	</a>
       </SidebarComponent>)
 }

frontend/src/components/TopNav.tsx

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
-import { useState, useEffect } from 'react'
+import { Fragment, useState, useEffect } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
 import Separator from '@/components/MenuSeparator'
@@ -138,9 +138,8 @@ export default ({ user }: Props) => {
 			    'bg-yellow-200 dark:bg-red-975 items-start')}>
 	  <Separator />
 	  {menu.map ((item, i) => (
-	      <>
+	      <Fragment key={i}>
-		<Link key={i}
+		<Link to={i === openItemIdx ? item.to : '#'}
-		      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'))}
@@ -163,7 +162,7 @@ export default ({ user }: Props) => {
 					 bg-yellow-50 dark:bg-red-950">
 			  {subItem.name}
 			</Link>)))}
-	      </>))}
+	      </Fragment>))}
 	  <TopNavUser user={user} sp />
 	  <Separator />
 	</div>

frontend/src/pages/posts/PostListPage.tsx

@@ -85,9 +85,9 @@ export default () => {
 	     : `${ SITE_TITLE }　〜 ぼざろクリーチャーシリーズ綜合リンク集サイト`}
 	  </title>
 	</Helmet>
-	<div className="hidden md:block">
+
 	<TagSidebar posts={posts.slice (0, 20)} />
-	</div>
+
 	<MainArea>
 	  <TabGroup>
 	    <Tab name="広場">
@@ -120,8 +120,5 @@ export default () => {
 		</Tab>)}
 	  </TabGroup>
 	</MainArea>
-	<div className="md:hidden">
-	  <TagSidebar posts={posts.slice (0, 20)} />
-	</div>
       </div>)
 }