#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,34 +59,44 @@ export default ({ posts }: Props) => {
   return (
       <SidebarComponent>
 	<TagSearch />
-	<SectionTitle>タグ</SectionTitle>
-	<ul>
-	  {CATEGORIES.flatMap (cat => cat in tags ? (
-	      tags[cat].map (tag => (
-		  <li key={tag.id} className="mb-1">
-		    <TagLink tag={tag} />
-		  </li>))) : [])}
-	</ul>
-	<SectionTitle>関聯</SectionTitle>
-	{posts.length > 0 && (
-	    <a href="#"
-	       onClick={ev => {
-		 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
-		   {
-		     ;
-		   }
-		 }) ())
-	       }}>
-	      ランダム
-	    </a>)}
+	<div className={cn (!(tagsVsbl) && 'hidden', 'md:block mt-4')}>
+	  <SectionTitle>タグ</SectionTitle>
+	  <ul>
+	    {CATEGORIES.flatMap (cat => cat in tags ? (
+		tags[cat].map (tag => (
+		    <li key={tag.id} className="mb-1">
+		      <TagLink tag={tag} />
+		    </li>))) : [])}
+	  </ul>
+	  <SectionTitle>関聯</SectionTitle>
+	  {posts.length > 0 && (
+	      <a href="#"
+		 onClick={ev => {
+		   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
+		     {
+		       ;
+		     }
+		   }) ())
+		 }}>
+		ランダム
+	      </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/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>
+
+	<TagSidebar posts={posts.slice (0, 20)} />
+
 	<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>)
 }