スマホ・レーアウト・バグ（#304） (#305)

#304

#304

#304

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

frontend/src/components/TopNav.tsx

@@ -79,12 +79,12 @@ export default (({ user }: Props) => {
 	  { name: '上位タグ', to: '/tags/implications', visible: false },
 	  { name: 'ニコニコ連携', to: '/tags/nico' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' }] },
-      { name: '素材', to: '/materials', subMenu: [
-	  { name: '一覧', to: '/materials' },
-	  // { name: '検索', to: '/materials/search' }, 
-	  { name: '追加', to: '/materials/new' },
-	  // { name: '履歴', to: '/materials/changes' },
-	  { name: 'ヘルプ', to: 'wiki/ヘルプ:素材集' }] },
+      // { name: '素材', to: '/materials', subMenu: [
+      //     { name: '一覧', to: '/materials' },
+      //     { name: '検索', to: '/materials/search', visible: false }, 
+      //     { name: '追加', to: '/materials/new' },
+      //     { name: '履歴', to: '/materials/changes', visible: false },
+      //     { name: 'ヘルプ', to: '/wiki/ヘルプ:素材集' }] },
       { name: '上映会', to: '/theatres/1', base: '/theatres', subMenu: [
           { name: <>第&thinsp;1&thinsp;会場</>, to: '/theatres/1' },
           { name: 'CyTube', to: '//cytube.mm428.net/r/deernijika' },
@@ -145,9 +145,9 @@ export default (({ user }: Props) => {
 
   return (
       <>
-	<nav className="px-3 flex justify-between items-center w-full min-h-[48px]
+	<nav className="px-3 flex justify-between items-center w-full
 			bg-yellow-200 dark:bg-red-975 md:bg-yellow-50">
-	  <div className="flex items-center gap-2 h-full">
+	  <div className="flex items-center gap-2 h-12">
 	    <PrefetchLink
 		to="/posts"
 		className="mx-4 text-xl font-bold text-pink-600 hover:text-pink-400
@@ -158,13 +158,13 @@ export default (({ user }: Props) => {
 	      ぼざクリ タグ広場
 	    </PrefetchLink>
 
-	    <div ref={navRef} className="relative hidden md:flex h-full items-center">
+	    <div ref={navRef} className="relative hidden md:flex h-12 items-center">
 	      <div aria-hidden
-		   className={cn ('absolute top-1/2 -translate-y-1/2 h-full',
+		   className={cn ('absolute inset-y-0 h-12',
 				  'bg-yellow-200 dark:bg-red-950',
 				  'transition-[transform,width] duration-200 ease-out')}
 		   style={{ width:      hl.width,
-			    transform:  `translate(${ hl.left }px, -50%)`,
+			    transform:  `translateX(${ hl.left }px)`,
 			    opacity:    hl.visible ? 1 : 0 }}/>
 
 	      {menu.map ((item, i) => (