fix(app): fix navbar scrolling and fade on edges (#16110)

fix RQA-2968, RQA-2879, RQA-2855, RQA-2956
Opentrons · Aug 23, 2024 · a0f2f7e · a0f2f7e
1 parent f106d3b
commit a0f2f7e
Showing 1 changed file with 47 additions and 27 deletions.
diff --git a/app/src/organisms/Navigation/index.tsx b/app/src/organisms/Navigation/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { NavLink } from 'react-router-dom'
+import { useLocation, NavLink } from 'react-router-dom'
 import styled from 'styled-components'
 
 import {
@@ -39,15 +39,19 @@ const NAV_LINKS: Array<typeof ON_DEVICE_DISPLAY_PATHS[number]> = [
   '/robot-settings',
 ]
 
-// TODO(sb:7/10/24): update this wrapper to fade on both sides only when not scrolled completely to that side
-// This will be accomplished in PLAT-399
 const CarouselWrapper = styled.div`
   display: ${DISPLAY_FLEX};
   flex-direction: ${DIRECTION_ROW};
   align-items: ${ALIGN_FLEX_START};
-  width: 42.25rem;
+  width: 56.75rem;
   overflow-x: ${OVERFLOW_SCROLL};
-  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    black 1%,
+    black 99%,
+    transparent 100%
+  );
   &::-webkit-scrollbar {
     display: none;
   }
@@ -65,6 +69,7 @@ interface NavigationProps {
 export function Navigation(props: NavigationProps): JSX.Element {
   const { setNavMenuIsOpened, longPressModalIsOpened } = props
   const { t } = useTranslation('top_navigation')
+  const location = useLocation()
   const localRobot = useSelector(getLocalRobot)
   const [showNavMenu, setShowNavMenu] = React.useState<boolean>(false)
   const robotName = localRobot?.name != null ? localRobot.name : 'no name'
@@ -95,6 +100,15 @@ export function Navigation(props: NavigationProps): JSX.Element {
   if (scrollRef.current != null) {
     observer.observe(scrollRef.current)
   }
+
+  const navBarScrollRef = React.useRef<HTMLDivElement>(null)
+  React.useEffect(() => {
+    navBarScrollRef?.current?.scrollIntoView({
+      behavior: 'auto',
+      inline: 'center',
+    })
+  }, [])
+
   function getPathDisplayName(path: typeof NAV_LINKS[number]): string {
     switch (path) {
       case '/instruments':
@@ -134,35 +148,41 @@ export function Navigation(props: NavigationProps): JSX.Element {
         aria-label="Navigation_container"
       >
         <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing32}>
-          <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8}>
-            <NavigationLink
-              to="/dashboard"
-              name={truncateString(
-                robotName,
-                iconName != null ? CHAR_LIMIT_WITH_ICON : CHAR_LIMIT_NO_ICON
-              )}
-            />
-            {iconName != null ? (
-              <Icon
-                aria-label="network icon"
-                name={iconName}
-                size="2.5rem"
-                color={COLORS.grey60}
-              />
-            ) : null}
-          </Flex>
           <CarouselWrapper>
             <Flex
               flexDirection={DIRECTION_ROW}
               gridGap={SPACING.spacing32}
-              marginRight={SPACING.spacing32}
+              marginRight={SPACING.spacing8}
+              marginLeft={SPACING.spacing8}
             >
-              {NAV_LINKS.map(path => (
+              <Flex
+                ref={
+                  location.pathname === '/dashboard' ? navBarScrollRef : null
+                }
+              >
                 <NavigationLink
-                  key={path}
-                  to={path}
-                  name={getPathDisplayName(path)}
+                  to="/dashboard"
+                  name={truncateString(
+                    robotName,
+                    iconName != null ? CHAR_LIMIT_WITH_ICON : CHAR_LIMIT_NO_ICON
+                  )}
+                />
+              </Flex>
+              {iconName != null ? (
+                <Icon
+                  aria-label="network icon"
+                  name={iconName}
+                  size="2.5rem"
+                  color={COLORS.grey60}
                 />
+              ) : null}
+              {NAV_LINKS.map(path => (
+                <Flex
+                  ref={path === location.pathname ? navBarScrollRef : null}
+                  key={path}
+                >
+                  <NavigationLink to={path} name={getPathDisplayName(path)} />
+                </Flex>
               ))}
             </Flex>
           </CarouselWrapper>