add: responsive design

hengstchon · Jan 30, 2021 · 33535d0 · 33535d0
1 parent 901175f
commit 33535d0
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 108 deletions.
diff --git a/.gitignore b/.gitignore
@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.vercelignore
diff --git a/components/Item.js b/components/Item.js
@@ -10,14 +10,14 @@ const Item = ({ item }) => {
       <a
         href={link}
         target="_blank"
-        className="text-xl font-medium hover:underline"
+        className="text-xl font-medium leading-tight text-gray-800 hover:underline"
       >
         {title}
       </a>
       <div className="text-sm pt-2 text-gray-500">
         {dayjs(isoDate).fromNow()}
       </div>
-      <div className="pt-2 text-gray-700">{content}</div>
+      <div className="pt-2 text-gray-600">{content}</div>
     </div>
   )
 }

diff --git a/components/Nav.js b/components/Nav.js
@@ -1,24 +1,83 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { feeds } from '../config/feeds'
 
 const Nav = ({ navName }) => {
   const [isOpen, setIsOpen] = useState(false)
   const toggleOpen = () => setIsOpen(!isOpen)
   return (
-    <div
-      className="flex w-full items-center justify-between px-6 h-16 bg-yellow-200 text-gray-700 border-b border-gray-200"
-      onKeyDown={({ key }) => {
-        isOpen && key === 'Escape' && setIsOpen(false)
-      }}
-    >
-      <button
-        className="absolute mr-2"
-        aria-label="Open Menu"
+    <>
+      <div className="flex">
+        <div className="hidden w-64 h-16 lg:block"></div>
+        <div className="flex-1 flex items-center justify-between px-6 h-16 bg-yellow-200 text-gray-700 border-b border-gray-200">
+          <button
+            className="absolute mr-2 lg:hidden"
+            aria-label="Open Menu"
+            onClick={toggleOpen}
+          >
+            <svg
+              className="w-8 h-8"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          </button>
+          <span className="mx-auto text-xl font-bold">{navName}</span>
+        </div>
+      </div>
+
+      <div
+        onClick={toggleOpen}
+        className={`fixed inset-0 bg-black transition-opacity ease-in-out duration-300 ${
+          isOpen ? 'opacity-50' : 'h-0 opacity-0'
+        } lg:hidden`}
+      ></div>
+
+      <aside
+        className={`fixed top-0 left-0 w-64 h-full bg-white overflow-auto transition-all ease-in-out duration-300 transform ${
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        } lg:transform-none md:border-r`}
+      >
+        <div className="lg:h-16"></div>
+        <div className="py-8">
+          {feeds.map(({ navName, cat }) => {
+            return (
+              <NavCat
+                key={navName}
+                navName={navName}
+                cat={cat}
+                toggleOpen={toggleOpen}
+              />
+            )
+          })}
+        </div>
+      </aside>
+    </>
+  )
+}
+
+const NavCat = ({ navName, cat, toggleOpen }) => {
+  const router = useRouter()
+  const currentCat = router.query.cat
+  return (
+    <Link href={`/${cat}`}>
+      <a
+        className={`flex items-center px-6 py-3 hover:bg-yellow-500 hover:text-white ${
+          cat === currentCat ? 'text-yellow-500 font-medium' : 'text-gray-500'
+        }`}
         onClick={toggleOpen}
       >
         <svg
-          className="w-8 h-8"
+          className="w-4 h-4"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -28,67 +87,12 @@ const Nav = ({ navName }) => {
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={2}
-            d="M4 6h16M4 12h16M4 18h16"
+            d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
           />
         </svg>
-      </button>
-
-      <span className="mx-auto text-2xl font-bold text-blue-500">
-        {navName}
-      </span>
-
-      <transition
-        enter-class="opacity-0"
-        enter-active-class="ease-out transition-medium"
-        enter-to-class="opacity-100"
-        leave-class="opacity-100"
-        leave-active-class="ease-out transition-medium"
-        leave-to-class="opacity-0"
-      >
-        {isOpen && (
-          <div className="z-10 fixed inset-0 transition-opacity">
-            <div
-              onClick={toggleOpen}
-              className="absolute inset-0 bg-black opacity-50"
-              tabIndex="0"
-            ></div>
-          </div>
-        )}
-      </transition>
-
-      <aside
-        className={`transform top-0 left-0 w-64 bg-white fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
-          isOpen ? 'translate-x-0' : '-translate-x-full'
-        }`}
-      >
-        {feeds.map(({ navName, cat }) => {
-          return (
-            <Link key={navName} href={`/${cat}`}>
-              <a
-                className="flex items-center px-6 py-3 hover:bg-blue-500 hover:text-white"
-                onClick={toggleOpen}
-              >
-                <svg
-                  className="w-4 h-4"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-                  />
-                </svg>
-                <span className="mx-3">{navName}</span>
-              </a>
-            </Link>
-          )
-        })}
-      </aside>
-    </div>
+        <span className="mx-3">{navName}</span>
+      </a>
+    </Link>
   )
 }
 

diff --git a/components/Pagination.js b/components/Pagination.js
@@ -1,29 +1,31 @@
 import ReactPaginate from 'react-paginate'
 
 const Pagination = ({ totalPage, handlePageClick }) => {
-  const pageClassName =
-    'w-8 h-8 mx-3 flex justify-center items-center rounded-full bg-gray-100 hover:bg-gray-300'
-  const pageLinkClassName = 'text-lg font-medium'
+  const pageLinkClassName =
+    'flex justify-center items-center w-8 h-8 rounded-full text-lg font-medium mx-3 bg-gray-100 hover:bg-gray-300'
 
   return (
-    <ReactPaginate
-      pageCount={totalPage}
-      pageRangeDisplayed={3}
-      marginPagesDisplayed={3}
-      onPageChange={handlePageClick}
-      previousLabel={'<'}
-      nextLabel={'>'}
-      containerClassName={'flex'}
-      pageClassName={`${pageClassName}`}
-      pageLinkClassName={pageLinkClassName}
-      previousClassName={pageClassName}
-      previousLinkClassName={pageLinkClassName}
-      nextClassName={pageClassName}
-      nextLinkClassName={pageLinkClassName}
-      activeClassName={'text-indigo-100 bg-indigo-600'}
-      activeLinkClassName={''}
-      disabledClassName={'opacity-40 bg-transparent'}
-    />
+    <div className="flex">
+      <div className="hidden w-64 h-10 md:block"></div>
+      <div className="flex-1 justify-center mt-5 mb-20">
+        <ReactPaginate
+          pageCount={totalPage}
+          pageRangeDisplayed={3}
+          marginPagesDisplayed={3}
+          onPageChange={handlePageClick}
+          previousLabel={'<'}
+          nextLabel={'>'}
+          containerClassName={'flex w-max mx-auto'}
+          pageLinkClassName={`${pageLinkClassName}`}
+          previousLinkClassName={pageLinkClassName}
+          nextLinkClassName={pageLinkClassName}
+          activeLinkClassName={
+            'text-white bg-blue-400 hover:text-blue-400 hover:bg-blue-200'
+          }
+          disabledClassName={'opacity-10'}
+        />
+      </div>
+    </div>
   )
 }
 

diff --git a/components/page.js b/components/page.js
@@ -0,0 +1,16 @@
+import Item from './item'
+
+const Page = ({ pageItems }) => {
+  return (
+    <div className="flex">
+      <div className="lg:w-64 invisible"></div>
+      <div className="container lg:max-w-screen-md mx-auto px-2 mt-5 divide-y">
+        {pageItems.map((item, index) => (
+          <Item key={index} item={item}></Item>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Page
diff --git a/pages/[cat].js b/pages/[cat].js
@@ -1,8 +1,8 @@
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import Item from '../components/Item'
-import Nav from '../components/Nav'
-import Pagination from '../components/Pagination'
+import Nav from '../components/nav'
+import Page from '../components/page'
+import Pagination from '../components/pagination'
 import { getAllPaths, getFeedData } from '../lib/utils'
 
 export async function getStaticPaths() {
@@ -18,7 +18,7 @@ export async function getStaticProps({ params }) {
   const feedData = await getFeedData(cat)
   return {
     props: { feedData },
-    revalidate: 10,
+    revalidate: 1,
   }
 }
 
@@ -54,18 +54,8 @@ export default function Content({ feedData }) {
       </Head>
 
       <Nav navName={navName} />
-
-      <div className="container md:max-w-screen-md mx-auto px-5 pt-5 divide-y">
-        <div className="divide-y">
-          {pageItems.map((item, index) => (
-            <Item key={index} item={item}></Item>
-          ))}
-        </div>
-
-        <div className="flex justify-center pt-10 pb-20">
-          <Pagination totalPage={totalPage} handlePageClick={handlePageClick} />
-        </div>
-      </div>
+      <Page pageItems={pageItems} />
+      <Pagination totalPage={totalPage} handlePageClick={handlePageClick} />
     </>
   )
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,3 +32,4 @@ yarn-error.log*

		# vercel
		.vercel
		.vercelignore