feat: アニメーションの一部実装（#176） (#178)

#176 完了

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

frontend/src/components/TopNav.tsx

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
+import { AnimatePresence, motion } from 'framer-motion'
 import { Fragment, useState, useEffect } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
@@ -136,37 +137,50 @@ export default (({ user }: Props) => {
 	      </Link>))}
 	</div>
 
-	<div className={cn (menuOpen ? 'flex flex-col md:hidden' : 'hidden',
-			    'bg-yellow-200 dark:bg-red-975 items-start')}>
-	  <Separator/>
-	  {menu.map ((item, i) => (
-	      <Fragment key={i}>
-		<Link 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'))}
-		      onClick={ev => {
-			if (i !== openItemIdx)
-			  {
-			    ev.preventDefault ()
-			    setOpenItemIdx (i)
-			  }
-		      }}>
-		  {item.name}
-		</Link>
-		{i === openItemIdx && (
-		    item.subMenu
-		    .filter (subItem => subItem.visible ?? true)
-		    .map ((subItem, j) => 'component' in subItem ? subItem.component : (
-			<Link key={j}
-			      to={subItem.to}
-			      className="w-full min-h-[36px] flex items-center pl-12
-					 bg-yellow-50 dark:bg-red-950">
-			  {subItem.name}
-			</Link>)))}
-	      </Fragment>))}
-	  <TopNavUser user={user} sp/>
-	  <Separator/>
-	</div>
+	<AnimatePresence initial={false}>
+	  {menuOpen && (
+	      <motion.div
+		  key="spmenu"
+		  className={cn ('flex flex-col md:hidden',
+				 'bg-yellow-200 dark:bg-red-975 items-start')}
+		  variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
+					height:   0 },
+			      open:   { clipPath: 'inset(0 0 0% 0)',
+					height:   'auto' } }}
+		  initial="closed"
+		  animate="open"
+		  exit="closed"
+		  transition={{ duration: .2, ease: 'easeOut' }}>
+		<Separator/>
+		{menu.map ((item, i) => (
+		    <Fragment key={i}>
+		      <Link 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'))}
+			    onClick={ev => {
+			      if (i !== openItemIdx)
+				{
+				  ev.preventDefault ()
+				  setOpenItemIdx (i)
+				}
+			    }}>
+			{item.name}
+		      </Link>
+		      {i === openItemIdx && (
+			  item.subMenu
+			  .filter (subItem => subItem.visible ?? true)
+			  .map ((subItem, j) => 'component' in subItem ? subItem.component : (
+			      <Link key={j}
+				    to={subItem.to}
+				    className="w-full min-h-[36px] flex items-center pl-12
+					       bg-yellow-50 dark:bg-red-950">
+				{subItem.name}
+			      </Link>)))}
+		    </Fragment>))}
+		<TopNavUser user={user} sp/>
+		<Separator/>
+	      </motion.div>)}
+	</AnimatePresence>
       </>)
 }) satisfies FC<Props>