From b3774cd43aa6141f06bf282c69e3cc419fa5b504 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Fri, 1 Jul 2022 15:27:11 +0800
Subject: [PATCH] feat(console): display topbar shadow while scrolling (#1340)

---
 .vscode/settings.json                         |  3 +-
 .../AppContent/components/Topbar/index.tsx    |  9 +++--
 .../components/AppContent/index.module.scss   |  4 +++
 .../src/components/AppContent/index.tsx       | 10 ++++--
 packages/console/src/hooks/use-scroll.ts      | 35 +++++++++++++++++++
 5 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 packages/console/src/hooks/use-scroll.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e2daaa72c..c85102924 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -31,6 +31,7 @@
     "pnpm",
     "silverhand",
     "slonik",
-    "stylelint"
+    "stylelint",
+    "topbar"
   ]
 }
diff --git a/packages/console/src/components/AppContent/components/Topbar/index.tsx b/packages/console/src/components/AppContent/components/Topbar/index.tsx
index eaf4b65a0..af23ded0a 100644
--- a/packages/console/src/components/AppContent/components/Topbar/index.tsx
+++ b/packages/console/src/components/AppContent/components/Topbar/index.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,11 +9,15 @@ import GetStartedProgress from '@/pages/GetStarted/components/GetStartedProgress
 import UserInfo from '../UserInfo';
 import * as styles from './index.module.scss';
 
-const Topbar = () => {
+type Props = {
+  className?: string;
+};
+
+const Topbar = ({ className }: Props) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.topbar}>
+    <div className={classNames(styles.topbar, className)}>
       <Logo className={styles.logo} />
       <div className={styles.line} />
       <div className={styles.text}>{t('admin_console.title')}</div>
diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss
index 28911f9c6..f3bf50eec 100644
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/components/AppContent/index.module.scss
@@ -8,6 +8,10 @@
   flex-direction: column;
 }
 
+.topbarShadow {
+  box-shadow: var(--shadow-2);
+}
+
 .content {
   flex-grow: 1;
   display: flex;
diff --git a/packages/console/src/components/AppContent/index.tsx b/packages/console/src/components/AppContent/index.tsx
index bb8468e99..c1fff2c56 100644
--- a/packages/console/src/components/AppContent/index.tsx
+++ b/packages/console/src/components/AppContent/index.tsx
@@ -1,10 +1,12 @@
 import { LogtoClientError, useLogto } from '@logto/react';
-import React, { useEffect } from 'react';
+import { conditional } from '@silverhand/essentials';
+import React, { useEffect, useRef } from 'react';
 import { Outlet, useHref, useLocation, useNavigate } from 'react-router-dom';
 
 import AppError from '@/components/AppError';
 import AppLoading from '@/components/AppLoading';
 import SessionExpired from '@/components/SessionExpired';
+import useScroll from '@/hooks/use-scroll';
 import useSettings from '@/hooks/use-settings';
 import useUserPreferences from '@/hooks/use-user-preferences';
 
@@ -23,6 +25,8 @@ const AppContent = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { firstItem } = useSidebarMenuItems();
+  const mainRef = useRef<HTMLDivElement>(null);
+  const { scrollTop } = useScroll(mainRef.current);
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -51,10 +55,10 @@ const AppContent = () => {
 
   return (
     <div className={styles.app}>
-      <Topbar />
+      <Topbar className={conditional(scrollTop && styles.topbarShadow)} />
       <div className={styles.content}>
         <Sidebar />
-        <div className={styles.main}>
+        <div ref={mainRef} className={styles.main}>
           <Outlet />
         </div>
       </div>
diff --git a/packages/console/src/hooks/use-scroll.ts b/packages/console/src/hooks/use-scroll.ts
new file mode 100644
index 000000000..14d4f5080
--- /dev/null
+++ b/packages/console/src/hooks/use-scroll.ts
@@ -0,0 +1,35 @@
+import { Nullable } from '@silverhand/essentials';
+import { useState, useEffect, useCallback } from 'react';
+
+const useScroll = (contentRef: Nullable<HTMLDivElement>) => {
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  const handleScroll = useCallback(() => {
+    if (!contentRef) {
+      return;
+    }
+    const { scrollTop, scrollLeft } = contentRef;
+    setScrollTop(scrollTop);
+    setScrollLeft(scrollLeft);
+  }, [contentRef]);
+
+  useEffect(() => {
+    if (!contentRef) {
+      return;
+    }
+
+    contentRef.addEventListener('scroll', handleScroll);
+
+    return () => {
+      contentRef.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, contentRef]);
+
+  return {
+    scrollTop,
+    scrollLeft,
+  };
+};
+
+export default useScroll;