#23

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import { useEffect, useState } from 'react'
-import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom'
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
 
 import TopNav from '@/components/TopNav'
 import { Toaster } from '@/components/ui/toaster'
@@ -70,10 +70,9 @@ export default () => {
 
   return (
       <>
-	<Router>
 	<div className="flex flex-col h-screen w-screen">
 	  <TopNav user={user} />
-	    <div className="flex flex-1">
+	  <BrowserRouter>
 	    <Routes>
 	      <Route path="/" element={<Navigate to="/posts" replace />} />
 	      <Route path="/posts" element={<PostListPage />} />
@@ -90,9 +89,8 @@ export default () => {
 	      <Route path="/settings" element={<Navigate to="/users/settings" replace />} />
 	      <Route path="*" element={<NotFound />} />
 	    </Routes>
+	  </BrowserRouter>
 	</div>
-	  </div>
-	</Router>
 	<Toaster />
       </>)
 }

frontend/src/components/TagSidebar.tsx

@@ -64,7 +64,7 @@ export default ({ posts }: Props) => {
 		  </li>))) : [])}
 	</ul>
 	<SectionTitle>関聯</SectionTitle>
-	{posts.length && (
+	{posts.length > 0 && (
 	    <a href="#"
 	       onClick={ev => {
 		 ev.preventDefault ()

frontend/src/components/TopNav.tsx

@@ -166,8 +166,7 @@ export default ({ user }: Props) => {
 	    return (
 		<div className={className}>
 		  <Link to="/posts" className={subClass}>一覧</Link>
-		  {['admin', 'member'].some (r => user?.role === r) && (
-		      <Link to="/posts/new" className={subClass}>投稿追加</Link>)}
+		  <Link to="/posts/new" className={subClass}>投稿追加</Link>
 		  <Link to="/wiki/ヘルプ:広場" className={subClass}>ヘルプ</Link>
 		</div>)
 	  case Menu.Tag:

frontend/src/components/layout/SidebarComponent.tsx

@@ -4,6 +4,6 @@ type Props = { children: React.ReactNode }
 
 
 export default ({ children }: Props) => (
-    <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
+    <div className="p-4 w-full md:w-64 md:h-full">
       {children}
     </div>)

frontend/src/pages/posts/PostDetailPage.tsx

@@ -24,8 +24,8 @@ type Props = { user: User | null }
 export default ({ user }: Props) => {
   const { id } = useParams ()
 
-  const [post, setPost] = useState<Post | null> (null)
   const [editing, setEditing] = useState (true)
+  const [post, setPost] = useState<Post | null> (null)
   const [status, setStatus] = useState (200)
 
   const changeViewedFlg = async () => {
@@ -92,13 +92,15 @@ export default ({ user }: Props) => {
 		       : 'bg-gray-500 hover:bg-gray-600')
 
   return (
-      <>
+      <div className="md:flex md:flex-1">
 	<Helmet>
 	  {(post?.thumbnail || post?.thumbnailBase) && (
 	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase} />)}
 	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
 	</Helmet>
+	<div className="hidden md:block">
 	  <TagDetailSidebar post={post} />
+	</div>
 	<MainArea>
 	  {post
 	   ? (
@@ -126,5 +128,8 @@ export default ({ user }: Props) => {
 	      </>)
 	   : 'Loading...'}
 	</MainArea>
-      </>)
+	<div className="md:hidden">
+	  <TagDetailSidebar post={post} />
+	</div>
+      </div>)
 }

frontend/src/pages/posts/PostListPage.tsx

@@ -77,7 +77,7 @@ export default () => {
   }, [location.search])
 
   return (
-      <>
+      <div className="md:flex md:flex-1">
 	<Helmet>
 	  <title>
 	    {tags.length
@@ -85,13 +85,15 @@ export default () => {
 	     : `${ SITE_TITLE }　〜 ぼざろクリーチャーシリーズ綜合リンク集サイト`}
 	  </title>
 	</Helmet>
+	<div className="hidden md:block">
 	  <TagSidebar posts={posts.slice (0, 20)} />
+	</div>
 	<MainArea>
 	  <TabGroup>
 	    <Tab name="広場">
 	      {posts.length
 	       ? (
-		  <div className="flex flex-wrap gap-4 p-4">
+		  <div className="flex flex-wrap gap-4 gap-y-8 p-4 justify-between">
 		  {posts.map (post => (
 		      <Link to={`/posts/${ post.id }`}
 			    key={post.id}
@@ -115,5 +117,8 @@ export default () => {
 		</Tab>)}
 	  </TabGroup>
 	</MainArea>
-      </>)
+	<div className="md:hidden">
+	  <TagSidebar posts={posts.slice (0, 20)} />
+	</div>
+      </div>)
 }