group-nav-page

themes/gitbook/components/BlogPostCard.js

@@ -1,27 +1,25 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import React from 'react'
 
-const BlogPostCard = ({ post, showSummary }) => {
+const BlogPostCard = ({ post }) => {
+  const router = useRouter()
+  const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
   return (
-        <div
-            key={post.id}
-            className="mb-6"
-        >
-
+        <div key={post.id} className="py-0.5">
             <div className="flex flex-col w-full">
                 <Link
                     href={`${BLOG.SUB_PATH}/${post.slug}`}
                     passHref
                     className={
-                        'cursor-pointer font-bold  hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
+                        `${currentSelected ? 'bg-gray-500 text-white' : 'text-gray-700 dark:text-gray-300 '} hover:font-bold py-0.5 px-1 text-sm cursor-pointer`
                     }>
                     <div>
                         {post.category} -   {post.title}
                     </div>
 
                 </Link>
-
             </div>
         </div>
   )