Fixed user menu (#958)

* Fixed user menu * intersection observer * usehooks
factorialco · Dec 13, 2024 · 00aa624 · 00aa624
1 parent 0663eb0
commit 00aa624
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/lib/experimental/Navigation/Sidebar/Sidebar.tsx b/lib/experimental/Navigation/Sidebar/Sidebar.tsx
@@ -1,9 +1,33 @@
 import { useReducedMotion } from "@/lib/a11y"
 import { cn } from "@/lib/utils"
 import { AnimatePresence, motion } from "framer-motion"
-import { ReactNode, useState } from "react"
+import { ReactNode } from "react"
+import { useIntersectionObserver } from "usehooks-ts"
 import { useSidebar } from "../ApplicationFrame/FrameProvider"
 
+const ScrollShadow = ({ position }: { position: "top" | "bottom" }) => (
+  <motion.div
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 0.5 }}
+    exit={{ opacity: 0 }}
+    transition={{ duration: 0.2, ease: "easeOut" }}
+    className={cn(
+      "pointer-events-none absolute inset-x-0 z-10 h-3 after:absolute after:inset-x-0 after:h-px after:bg-f1-background-bold after:opacity-[0.04] after:content-['']",
+      position === "top"
+        ? [
+            "top-0",
+            "bg-gradient-to-b from-f1-background-secondary to-transparent",
+            "after:top-0",
+          ]
+        : [
+            "bottom-0",
+            "bg-gradient-to-t from-f1-background-secondary to-transparent",
+            "after:bottom-0",
+          ]
+    )}
+  />
+)
+
 interface SidebarProps {
   header?: ReactNode
   body?: ReactNode
@@ -13,11 +37,9 @@ interface SidebarProps {
 export function Sidebar({ header, body, footer }: SidebarProps) {
   const { sidebarState, isSmallScreen } = useSidebar()
   const shouldReduceMotion = useReducedMotion()
-  const [isScrolled, setIsScrolled] = useState(false)
 
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    setIsScrolled(e.currentTarget.scrollTop > 0)
-  }
+  const [topRef, isAtTop] = useIntersectionObserver({ threshold: 1 })
+  const [bottomRef, isAtBottom] = useIntersectionObserver({ threshold: 1 })
 
   const transition = {
     x: {
@@ -66,24 +88,16 @@ export function Sidebar({ header, body, footer }: SidebarProps) {
       <div className="flex-shrink-0">{header}</div>
       {body && (
         <div className="relative flex-grow overflow-y-hidden">
-          <AnimatePresence>
-            {isScrolled && (
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 0.5 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.2, ease: "easeOut" }}
-                className="pointer-events-none absolute inset-x-0 top-0 z-10 h-3 bg-gradient-to-b from-f1-background-secondary to-transparent after:absolute after:inset-x-0 after:top-0 after:h-px after:bg-f1-background-bold after:opacity-[0.04] after:content-['']"
-              />
-            )}
-          </AnimatePresence>
-          <div
-            className="h-full overflow-y-auto"
-            onScroll={handleScroll}
-            onTouchMove={handleScroll}
-          >
+          <div className="h-full overflow-y-auto">
+            <div ref={topRef} className="h-px" aria-hidden="true" />
             {body}
+            <div ref={bottomRef} className="h-px" aria-hidden="true" />
           </div>
+
+          <AnimatePresence>
+            {!isAtTop && <ScrollShadow position="top" />}
+            {!isAtBottom && <ScrollShadow position="bottom" />}
+          </AnimatePresence>
         </div>
       )}
       <div className="flex-shrink-0">{footer}</div>

diff --git a/lib/experimental/Navigation/Sidebar/User/index.tsx b/lib/experimental/Navigation/Sidebar/User/index.tsx
@@ -18,7 +18,7 @@ interface UserProps {
 
 export function User({ firstName, lastName, avatarUrl, options }: UserProps) {
   return (
-    <div className="mx-3 border-t border-dashed border-transparent border-t-f1-border pb-3 pt-4">
+    <div className="mx-3 pb-3 pt-3">
       <Dropdown items={options}>
         <button
           className={cn(

diff --git a/lib/experimental/Navigation/Sidebar/index.stories.tsx b/lib/experimental/Navigation/Sidebar/index.stories.tsx
@@ -33,9 +33,9 @@ const meta: Meta<typeof Sidebar> = {
     body: (
       <>
         <Menu {...SidebarMenuStories.Default.args} />
-        <User {...UserStories.Default.args} />
       </>
     ),
+    footer: <User {...UserStories.Default.args} />,
   } satisfies ComponentProps<typeof Sidebar>,
 }