fix: right sidebar should trigger toolbar when scrolled

src/js/components/AppToolbar/AppToolbar.tsx

@@ -185,27 +185,36 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
   } = props;
   const { colorMode, toggleColorMode } = useColorMode();
   const [canShowFullSecondaryMenu] = useMediaQuery('(min-width: 900px)');
-  const [isScrolledPastTitle, setIsScrolledPastTitle] = React.useState(null);
+  const {
+    toolbarRef,
+    toolbarHeight,
+    mainSidebarWidth,
+    isScrolledPastTitle,
+    setIsScrolledPastTitle
+  } = React.useContext(LayoutContext);
 
   const toast = useToast();
   const commentsToggleToastRef = React.useRef(null);
 
   // add event listener to detect when the user scrolls past the title
   React.useLayoutEffect(() => {
     const scrollContainer = document.getElementById("main-layout") as HTMLElement;
-
-    const handleScroll = () => {
-      if (scrollContainer.scrollTop > PAGE_TITLE_SHOW_HEIGHT) {
-        setIsScrolledPastTitle(true);
-      } else {
-        setIsScrolledPastTitle(false);
+    if (scrollContainer) {
+      const handleScroll = () => {
+        if (scrollContainer.scrollTop > PAGE_TITLE_SHOW_HEIGHT) {
+          setIsScrolledPastTitle(prev => ({ ...prev, "mainContent": true }));
+        } else {
+          setIsScrolledPastTitle(prev => ({ ...prev, "mainContent": false }));
+        }
       }
+      handleScroll();
+      scrollContainer.addEventListener('scroll', handleScroll);
+      return () => scrollContainer.removeEventListener('scroll', handleScroll);
     }
-    handleScroll();
-    scrollContainer.addEventListener('scroll', handleScroll);
-    return () => scrollContainer.removeEventListener('scroll', handleScroll);
   }, []);
 
+  const shouldShowUnderlay = Object.values(isScrolledPastTitle).some(x => x);
+
   // If the workspace color mode doesn't match
   // the chakra color mode, update the chakra color mode
   React.useEffect(() => {
@@ -216,12 +225,6 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
     }
   }, [isThemeDark, toggleColorMode]);
 
-  const {
-    toolbarRef,
-    toolbarHeight,
-    mainSidebarWidth
-  } = React.useContext(LayoutContext);
-
   const secondaryTools = [
     handleClickComments && {
       label: isShowComments ? "Hide comments" : "Show comments",
@@ -359,7 +362,7 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
     >
       {currentPageTitle && (
         <LocationIndicator
-          isVisible={isScrolledPastTitle}
+          isVisible={shouldShowUnderlay}
           type="node"
           uid="123"
           title={currentPageTitle}
@@ -415,7 +418,7 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
         {contentControls || <Spacer />}
         {rightToolbarControls}
 
-        {(isScrolledPastTitle && (
+        {(shouldShowUnderlay && (
           <Box
             as={motion.div}
             key="header-backdrop"
@@ -441,7 +444,7 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
             variants={variants}
             animate={[
               isLeftSidebarOpen && "isLeftSidebarOpen",
-              isScrolledPastTitle && "visible"
+              shouldShowUnderlay && "visible"
             ].filter(Boolean)}
             exit={{ opacity: 0 }}
           />

src/js/components/Layout/RightSidebar.tsx

@@ -3,6 +3,7 @@ import { LayoutContext, layoutAnimationProps } from "./useLayoutState";
 import { AnimatePresence, motion } from 'framer-motion';
 import { XmarkIcon, ChevronRightIcon, PageIcon, PageFillIcon, BlockIcon, BlockFillIcon, GraphIcon, ArrowLeftOnBoxIcon } from '@/Icons/Icons';
 import { Button, IconButton, Box, Collapse, VStack, BoxProps } from '@chakra-ui/react';
+import { useInView } from 'react-intersection-observer';
 
 /** Right Sidebar */
 
@@ -14,11 +15,21 @@ interface RightSidebarProps extends BoxProps {
 
 export const RightSidebar = (props: RightSidebarProps) => {
   const { children, rightSidebarWidth, isOpen } = props;
-
   const {
-    toolbarHeight
+    toolbarHeight,
+    setIsScrolledPastTitle,
   } = React.useContext(LayoutContext);
 
+  const { ref: markerRef, inView } = useInView({ threshold: 0 });
+
+  React.useEffect(() => {
+    if (inView) {
+      setIsScrolledPastTitle(prev => ({ ...prev, "rightSidebar": false }));
+    } else {
+      setIsScrolledPastTitle(prev => ({ ...prev, "rightSidebar": true }));
+    }
+  }, [inView, setIsScrolledPastTitle]);
+
   return (
     <AnimatePresence initial={false}>
       {isOpen && (
@@ -35,12 +46,22 @@ export const RightSidebar = (props: RightSidebarProps) => {
           borderLeft="1px solid"
           borderColor="separator.divider"
           position="fixed"
+          id="right-sidebar"
           height="100vh"
           inset={0}
           pt={`calc(${toolbarHeight} + 1rem)`}
           left="auto"
         >
-          <Box width={rightSidebarWidth + "vw"}>
+          <Box
+            bg="green"
+            aria-hidden
+            position="absolute"
+            ref={markerRef}
+            height="20px"
+            top={0}
+          />
+          <Box
+            width={rightSidebarWidth + "vw"}>
             {children}
           </Box>
         </Box>
@@ -93,11 +114,11 @@ export const SidebarItem = ({ title, type, isOpen, onToggle, onRemove, onNavigat
           sx={{ maskImage: "linear-gradient(to right, black, black calc(100% - 1rem), transparent calc(100%))" }}
         >
           {<ChevronRightIcon
-              transform={isOpen ? "rotate(90deg)" : null}
-              transitionProperty="common"
-              transitionDuration="0.15s"
-              transitionTimingFunction="ease-in-out"
-              justifySelf="center" />}
+            transform={isOpen ? "rotate(90deg)" : null}
+            transitionProperty="common"
+            transitionDuration="0.15s"
+            transitionTimingFunction="ease-in-out"
+            justifySelf="center" />}
           {typeIcon(type, isOpen)}
           <Box
             flex="1 1 100%"
@@ -148,7 +169,7 @@ export const SidebarItem = ({ title, type, isOpen, onToggle, onRemove, onNavigat
         unmountOnExit
         zIndex={1}
         px={4}
-        onPointerDown={(e) => {e.stopPropagation()}}
+        onPointerDown={(e) => { e.stopPropagation() }}
       >
         {children}
       </Box>

src/js/components/Layout/useLayoutState.tsx

@@ -34,11 +34,14 @@ export const useLayoutState = () => {
   const mainContentRef = React.useRef();
   const toolbarRef = React.useRef();
   const [mainSidebarWidth, setMainSidebarWidth] = React.useState(300);
+  const [isScrolledPastTitle, setIsScrolledPastTitle] = React.useState({});
   const toolbarHeight = "3rem";
 
   return {
     mainSidebarWidth,
     setMainSidebarWidth,
+    isScrolledPastTitle,
+    setIsScrolledPastTitle,
     toolbarHeight,
     mainContentRef,
     toolbarRef,