feat: add hover for blog sidebar

src/theme/BlogPostPage/index.tsx

@@ -30,7 +30,7 @@ function BlogPostPageContent({
 
  return (
  <BlogLayout
- // sidebar={sidebar}
+ sidebar={sidebar}
  toc={
  !hideTableOfContents && toc.length > 0 ? (
  <TOC

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,20 +10,26 @@ 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({
  id: 'theme.blog.sidebar.navAriaLabel',
  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}>

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);
  }
 }