feat: change all the scrollbars to overlay style

Magickbase · Dec 7, 2023 · 2b71649 · 2b71649
1 parent a97c688
commit 2b71649
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 57 deletions.
diff --git a/packages/neuron/src/components/Header/index.module.scss b/packages/neuron/src/components/Header/index.module.scss
@@ -140,7 +140,6 @@ $desktopHeaderContentHeight: 88px;
 
     .content {
       margin: 64px 0;
-      overflow: auto;
     }
 
     .close {

diff --git a/packages/neuron/src/components/Header/index.tsx b/packages/neuron/src/components/Header/index.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import * as Dialog from '@radix-ui/react-dialog'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import styles from './index.module.scss'
 import IconLogo from './logo.svg'
 import IconGithub from './github.svg'
@@ -98,43 +99,45 @@ const MenuDialog: FC = () => {
             </Dialog.Close>
           </div>
 
-          <div className={styles.content}>
-            <LinkWithEffect className={styles.title} href="/">
-              {t('Home')}
-            </LinkWithEffect>
-
-            <div className={styles.title}>{t('Services')}</div>
-            <div className={styles.links}>
-              <LinkWithEffect href="https://neuron.magickbase.com/">{t('Neuron Wallet')}</LinkWithEffect>
-              <span title="Coming soon">{t('CKB Explorer')}</span>
-              <span title="Coming soon">{t('Godwoke Explorer')}</span>
-              <span title="Coming soon">{t('Axon Explorer')}</span>
-              <span title="Coming soon">{t('Kuai')}</span>
-            </div>
+          <OverlayScrollbarsComponent options={{ scrollbars: { autoHide: 'never' } }}>
+            <div className={styles.content}>
+              <LinkWithEffect className={styles.title} href="/">
+                {t('Home')}
+              </LinkWithEffect>
+
+              <div className={styles.title}>{t('Services')}</div>
+              <div className={styles.links}>
+                <LinkWithEffect href="https://neuron.magickbase.com/">{t('Neuron Wallet')}</LinkWithEffect>
+                <span title="Coming soon">{t('CKB Explorer')}</span>
+                <span title="Coming soon">{t('Godwoke Explorer')}</span>
+                <span title="Coming soon">{t('Axon Explorer')}</span>
+                <span title="Coming soon">{t('Kuai')}</span>
+              </div>
 
-            <LinkWithEffect
-              className={styles.title}
-              href="https://github.com/nervosnetwork/ckb/wiki/Public-JSON-RPC-nodes"
-            >
-              {t('Public Node')}
-            </LinkWithEffect>
-
-            <div className={styles.title}>{t('Language')}</div>
-            <div className={clsx(styles.links, styles.languages)}>
-              {languages.map(language => (
-                <LinkWithEffect
-                  key={language.name}
-                  className={clsx(styles.languageItem, {
-                    [styles.selected ?? '']: language.localeName === router.locale,
-                  })}
-                  href={{ pathname, query }}
-                  locale={language.localeName}
-                >
-                  {language.name}
-                </LinkWithEffect>
-              ))}
+              <LinkWithEffect
+                className={styles.title}
+                href="https://github.com/nervosnetwork/ckb/wiki/Public-JSON-RPC-nodes"
+              >
+                {t('Public Node')}
+              </LinkWithEffect>
+
+              <div className={styles.title}>{t('Language')}</div>
+              <div className={clsx(styles.links, styles.languages)}>
+                {languages.map(language => (
+                  <LinkWithEffect
+                    key={language.name}
+                    className={clsx(styles.languageItem, {
+                      [styles.selected ?? '']: language.localeName === router.locale,
+                    })}
+                    href={{ pathname, query }}
+                    locale={language.localeName}
+                  >
+                    {language.name}
+                  </LinkWithEffect>
+                ))}
+              </div>
             </div>
-          </div>
+          </OverlayScrollbarsComponent>
 
           <Contacts className={styles.contacts} />
         </Dialog.Content>

diff --git a/packages/neuron/src/hooks/useMarkdownProps.tsx b/packages/neuron/src/hooks/useMarkdownProps.tsx
@@ -6,6 +6,7 @@ import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
 import clsx from 'clsx'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import { TOCItem } from '../components/TableOfContents'
 import { UpsideDownEffect } from '../components/UpsideDownEffect'
 
@@ -40,10 +41,10 @@ export function useMarkdownProps({
         <img {...tagProps} alt={tagProps.alt ?? 'image'} className={clsx(tagProps.className, imgClass)} />
       ),
       table: ({ node, ...tagProps }) => (
-        // The table is too wide, so we need to wrap it in a container with `overflow: auto`.
-        <div style={{ width: 'min-content', maxWidth: '100%', overflow: 'auto' }}>
+        // The table is too wide, so we need to wrap it in the OverlayScrollbarsComponent.
+        <OverlayScrollbarsComponent options={{ scrollbars: { autoHide: 'never' } }}>
           <table {...tagProps} />
-        </div>
+        </OverlayScrollbarsComponent>
       ),
     }),
     [imgClass, supportToc],

diff --git a/packages/neuron/src/pages/posts/ClassifiedPosts/index.module.scss b/packages/neuron/src/pages/posts/ClassifiedPosts/index.module.scss
@@ -28,6 +28,8 @@
 }
 
 .accordionContent {
+  min-height: 0;
+
   &[data-state='open'] {
     animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
   }

diff --git a/packages/neuron/src/pages/posts/ClassifiedPosts/index.tsx b/packages/neuron/src/pages/posts/ClassifiedPosts/index.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import * as Accordion from '@radix-ui/react-accordion'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import { Post, TopLevelMenu, getPostURL } from '../../../utils'
 import IconArrow from './arrow.svg'
 import styles from './index.module.scss'
@@ -48,17 +49,19 @@ export const ClassifiedPosts: FC<
           </Accordion.Header>
 
           <Accordion.Content className={clsx(styles.accordionContent, postsClass)}>
-            {menu.posts?.map(post => (
-              <LinkWithEffect
-                key={post.key}
-                data-selected={post.key === viewingPost.key}
-                className={clsx(styles.post, postClass)}
-                href={getPostURL(post)}
-                fullWidth
-              >
-                {post.title}
-              </LinkWithEffect>
-            ))}
+            <OverlayScrollbarsComponent style={{ maxHeight: '100%' }}>
+              {menu.posts?.map(post => (
+                <LinkWithEffect
+                  key={post.key}
+                  data-selected={post.key === viewingPost.key}
+                  className={clsx(styles.post, postClass)}
+                  href={getPostURL(post)}
+                  fullWidth
+                >
+                  {post.title}
+                </LinkWithEffect>
+              ))}
+            </OverlayScrollbarsComponent>
           </Accordion.Content>
         </Accordion.Item>
       ))}

diff --git a/packages/neuron/src/pages/posts/Sidebar/index.module.scss b/packages/neuron/src/pages/posts/Sidebar/index.module.scss
@@ -48,10 +48,6 @@ $accordionTriggerHeight: 48px;
   }
 
   .posts {
-    &[data-state='open'] {
-      overflow: auto;
-    }
-
     .post {
       display: flex;
       align-items: center;

diff --git a/packages/neuron/src/pages/posts/[...slug].page.tsx b/packages/neuron/src/pages/posts/[...slug].page.tsx
@@ -5,6 +5,7 @@ import clsx from 'clsx'
 import { FC, useMemo } from 'react'
 import { useObservableState } from 'observable-hooks'
 import { useTranslation } from 'react-i18next'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import { TOCContextProvider, TOCItem } from '../../components/TableOfContents'
 import {
   Post,
@@ -87,13 +88,19 @@ export const PostPage$Desktop: FC<PageProps> = ({ post, menusWithPosts, menuWith
                 <div className={styles.item}>{post.title}</div>
               </div>
 
-              <div ref={scrollContainerRef} className={clsx(CrawlableContentClassname, styles.postContent)}>
+              <OverlayScrollbarsComponent
+                ref={obj => {
+                  const scrollContainer = obj?.osInstance()?.elements().viewport
+                  scrollContainer && scrollContainerRef(scrollContainer)
+                }}
+                className={clsx(CrawlableContentClassname, styles.postContent)}
+              >
                 <TOCItem id={post.title} titleInTOC={post.title}>
                   <h1 className={styles.title}>{post.title}</h1>
                 </TOCItem>
 
                 <ReactMarkdown {...mdProps}>{post.body ?? ''}</ReactMarkdown>
-              </div>
+              </OverlayScrollbarsComponent>
 
               <TOC className={styles.toc} />
             </div>

diff --git a/packages/neuron/src/pages/posts/index.module.scss b/packages/neuron/src/pages/posts/index.module.scss
@@ -28,7 +28,6 @@
 
 .postContent {
   padding: 0 24px 16px;
-  overflow: auto;
 
   .img {
     max-width: 100%;