feat: #176 のバグ対応（#179） (#180)

#179 完了

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #180

frontend/src/components/TagSidebar.tsx

@@ -58,15 +58,52 @@ export default (({ posts }: Props) => {
     setTags (tagsTmp)
   }, [posts])
 
+  const TagBlock = (
+      <>
+	<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>)}
+      </>)
+
   return (
       <SidebarComponent>
 	<TagSearch/>
 
+	<div className="hidden md:block mt-4">
+	  {TagBlock}
+	</div>
+
 	<AnimatePresence initial={false}>
 	  {tagsVsbl && (
 	      <motion.div
 		  key="sptags"
-		  className="md:block mt-4"
+		  className="md:hidden mt-4"
 		  variants={{ hidden:   { clipPath: 'inset(0 0 100% 0)',
 					  height:   0 },
 			      visible:  { clipPath: 'inset(0 0 0% 0)',
@@ -75,35 +112,7 @@ export default (({ posts }: Props) => {
 		  animate="visible"
 		  exit="hidden"
 		  transition={{ duration: .2, ease: 'easeOut' }}>
-		<SectionTitle>タグ</SectionTitle>
+		{TagBlock}
-		<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>)}
 	      </motion.div>)}
 	</AnimatePresence>
 
@@ -113,7 +122,7 @@ export default (({ posts }: Props) => {
 		      dark:text-gray-300 dark:hover:text-gray-100"
 	   onClick={ev => {
 	     ev.preventDefault ()
-	     setTagsVsbl (!(tagsVsbl))
+	     setTagsVsbl (v => !(v))
 	   }}>
 	  {tagsVsbl ? '▲▲▲ タグ一覧を閉じる ▲▲▲' : '▼▼▼ タグ一覧を表示 ▼▼▼'}
 	</a>