[GitHub] [apisix-website] 1502shivam-singh commented on a change in pull request #553: feat: optimize the blog page display effect

[GitBox <gi...@apache.org>]

1502shivam-singh commented on a change in pull request #553:
URL: https://github.com/apache/apisix-website/pull/553#discussion_r702335562



##########
File path: website/src/theme/BlogSidebar/index.js
##########
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+import { useHistory } from '@docusaurus/router';
+
+export default function BlogSidebar({count}) {
+  const [ selected, setSelected ] = useState();
+  const history = useHistory();
+  const path = history.location.pathname.split('/');
+
+  useEffect(() => {
+    if (path.length === 2) {
+      setSelected('All');
+    } else if (path.length === 4) {
+      setSelected(path[3]);
+    } else {
+      setSelected('All');
+    }
+  }, [path]);
+
+  if (!count) {
+    return null;
+  }
+
+  const handleTagClick = (tag) => {
+    setSelected(tag);
+    if (tag === "All") {
+      history.push('/blog');
+    } else {
+      if (tag.indexOf(' ') !== -1) {
+        tag = tag.replace(' ', '-');
+      }
+      history.push(`/blog/tags/${tag}`);
+    }
+  };
+
+  return (
+    <div className={clsx(styles.sidebar, 'thin-scrollbar')}>
+      <h3 className={styles.sidebarItemTitle}>Tags</h3>
+      <div className={styles.sidebarItemList}>
+        {Object.entries(count).map(([tag, num]) => (
+          <div
+            key={tag}
+            className={`${styles.sidebarItem} ${selected === tag ? styles.selected : ''}`}

Review comment:
       Here, you might want to check the comparison `selected === tag` especially for the `practical case` tag.
   As, when clicking on practical case tag, it's background color doesn't hold. 
   My guess for this bug is, you are comparing "practical case" and "practical-case" or something similar here.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org