frontend/src/components/TagSidebar.tsx

@@ -58,23 +58,8 @@ export default (({ posts }: Props) => {
     setTags (tagsTmp)
   }, [posts])
 
-  return (
-      <SidebarComponent>
-	<TagSearch/>
-
-	<AnimatePresence initial={false}>
-	  {tagsVsbl && (
-	      <motion.div
-		  key="sptags"
-		  className="md:block mt-4"
-		  variants={{ hidden:   { clipPath: 'inset(0 0 100% 0)',
-					  height:   0 },
-			      visible:  { clipPath: 'inset(0 0 0% 0)',
-					  height:   'auto'} }}
-		  initial="hidden"
-		  animate="visible"
-		  exit="hidden"
-		  transition={{ duration: .2, ease: 'easeOut' }}>
+  const TagBlock = (
+      <>
 	<SectionTitle>タグ</SectionTitle>
 	<ul>
 	  {CATEGORIES.flatMap (cat => cat in tags ? (
@@ -104,6 +89,30 @@ export default (({ posts }: Props) => {
 	       }}>
 	      ランダム
 	    </a>)}
+      </>)
+
+  return (
+      <SidebarComponent>
+	<TagSearch/>
+
+	<div className="hidden md:block mt-4">
+	  {TagBlock}
+	</div>
+
+	<AnimatePresence initial={false}>
+	  {tagsVsbl && (
+	      <motion.div
+		  key="sptags"
+		  className="md:hidden mt-4"
+		  variants={{ hidden:   { clipPath: 'inset(0 0 100% 0)',
+					  height:   0 },
+			      visible:  { clipPath: 'inset(0 0 0% 0)',
+					  height:   'auto'} }}
+		  initial="hidden"
+		  animate="visible"
+		  exit="hidden"
+		  transition={{ duration: .2, ease: 'easeOut' }}>
+		{TagBlock}
 	      </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>