From 4831dd80f5f59232a57d41231fd5b0e2f3eae6e5 Mon Sep 17 00:00:00 2001
From: Kuizuo <hi@kuizuo.cn>
Date: Wed, 27 Dec 2023 04:02:33 +0800
Subject: [PATCH] feat: add hover for blog sidebar

---
 src/theme/BlogPostPage/index.tsx              |  2 +-
 src/theme/BlogSidebar/Desktop/index.tsx       | 10 ++++++--
 .../BlogSidebar/Desktop/styles.module.scss    | 25 +++++++++++--------
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/theme/BlogPostPage/index.tsx b/src/theme/BlogPostPage/index.tsx
index fbcc31c8..7a45354a 100644
--- a/src/theme/BlogPostPage/index.tsx
+++ b/src/theme/BlogPostPage/index.tsx
@@ -30,7 +30,7 @@ function BlogPostPageContent({
 
   return (
     <BlogLayout
-      // sidebar={sidebar}
+      sidebar={sidebar}
       toc={
         !hideTableOfContents && toc.length > 0 ? (
           <TOC
diff --git a/src/theme/BlogSidebar/Desktop/index.tsx b/src/theme/BlogSidebar/Desktop/index.tsx
index 34f5cdb4..3df7f6de 100644
--- a/src/theme/BlogSidebar/Desktop/index.tsx
+++ b/src/theme/BlogSidebar/Desktop/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import clsx from 'clsx'
 import Link from '@docusaurus/Link'
 import { Icon } from '@iconify/react'
@@ -10,13 +10,18 @@ import styles from './styles.module.scss'
 
 export default function BlogSidebarDesktop({ sidebar }: Props): JSX.Element {
   const { isBlogPostPage } = useBlogPost()
+  const [isHovered, setIsHovered] = useState(false)
 
   const handleBack = () => {
     window.history.back()
   }
 
   return (
-    <aside className="col col--2">
+    <aside
+      className="col col--2"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
       <nav
         className={clsx(styles.sidebar, 'thin-scrollbar')}
         aria-label={translate({
@@ -24,6 +29,7 @@ export default function BlogSidebarDesktop({ sidebar }: Props): JSX.Element {
           message: 'Blog recent posts navigation',
           description: 'The ARIA label for recent posts in the blog sidebar',
         })}
+        style={{ opacity: isHovered ? 1 : 0 }}
       >
         {isBlogPostPage && (
           <div className={styles.backButton} onClick={handleBack}>
diff --git a/src/theme/BlogSidebar/Desktop/styles.module.scss b/src/theme/BlogSidebar/Desktop/styles.module.scss
index f63c440f..938600a4 100644
--- a/src/theme/BlogSidebar/Desktop/styles.module.scss
+++ b/src/theme/BlogSidebar/Desktop/styles.module.scss
@@ -3,6 +3,9 @@
   overflow-y: auto;
   position: sticky;
   top: calc(var(--ifm-navbar-height) + 2rem);
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.5s;
 }
 
 .sidebarItemTitle {
@@ -50,6 +53,16 @@
   }
 }
 
+:root {
+  --back-btn-bg-color: #fafaf9;
+  --back-btn-bg-color-hover: #f1f5f9;
+}
+
+html[data-theme='dark'] {
+  --back-btn-bg-color: #18181b;
+  --back-btn-bg-color-hover: #334155;
+}
+
 .backButton {
   width: 32px;
   height: 32px;
@@ -64,18 +77,10 @@
   transition: all 0.3s ease-in-out;
   cursor: pointer;
 
-  background-color: #fafaf9;
+  background-color: var(--back-btn-bg-color);
 
   &:hover {
     color: var(--ifm-link-color);
-    background-color: #f1f5f9;
-  }
-}
-
-html[data-theme='dark'] .backButton {
-  background-color: #1e293b;
-
-  &:hover {
-    background-color: #334155;
+    background-color: var(--back-btn-bg-color-hover);
   }
 }