feat(console): display topbar shadow while scrolling (#1340)

.vscode/settings.json

@@ -31,6 +31,7 @@
     "pnpm",
     "silverhand",
     "slonik",
-    "stylelint"
+    "stylelint",
+    "topbar"
   ]
 }

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>

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;

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>

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;