3317 - Navigation menu sticky

src/client/components/Navigation/NavAssessment/NavAssessment.scss

@@ -0,0 +1,8 @@
+@import 'src/client/style/partials';
+
+.nav-assessment {
+  overflow-y: auto;
+  padding: $spacing-xxs 0;
+  position: sticky;
+  top: 50px;
+}

src/client/components/Navigation/NavAssessment/NavAssessment.tsx

@@ -1,20 +1,24 @@
+import './NavAssessment.scss'
 import React, { useState } from 'react'
 
 import { Objects } from 'utils/objects'
 
 import { useSections } from 'client/store/metadata'
+import Header from 'client/components/Navigation/NavAssessment/Header'
+import NavigationSection from 'client/components/Navigation/NavAssessment/Section'
 
-import Header from './Header'
-import NavigationSection from './Section'
+import { useMaxHeight } from './hooks/useMaxHeight'
 
 const NavAssessment: React.FC = () => {
   const sections = useSections()
-  const [showSections, setShowSections] = useState(false)
+
+  const maxHeight = useMaxHeight()
+  const [showSections, setShowSections] = useState<boolean>(false)
 
   if (Objects.isEmpty(sections)) return null
 
   return (
-    <div className="nav-assessment">
+    <div className="nav-assessment" style={{ maxHeight }}>
       <Header showSections={showSections} setShowSections={setShowSections} />
 
       {sections.map((section) => (

src/client/components/Navigation/NavAssessment/hooks/useMaxHeight.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef, useState } from 'react'
+
+// document height - toolbar
+const baseHeight = `100dvh - 50px`
+
+export const useMaxHeight = (): string => {
+  const [maxHeight, setMaxHeight] = useState<string>(`calc(${baseHeight})`)
+  const heightsRef = useRef<Record<string, number>>({})
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          heightsRef.current[entry.target.tagName] = entry.intersectionRect.height
+        })
+
+        const heightsCalc = Object.values(heightsRef.current)
+          .map((v) => `${v}px`)
+          .join(' - ')
+
+        setMaxHeight(`calc(100dvh - 50px - ${heightsCalc})`)
+      },
+      { threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] }
+    )
+
+    observer.observe(document.getElementsByTagName('header')[0])
+    observer.observe(document.getElementsByTagName('footer')[0])
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  return maxHeight
+}

src/client/components/Navigation/Navigation.scss

@@ -8,10 +8,7 @@
 .nav {
   @extend .nav-base;
   grid-area: navigation;
-  overflow-x: hidden;
-  overflow-y: auto;
   height: 100%;
-  padding: 8px 0;
 
   .nav__bulk-download {
     margin-left: 16px;

src/client/components/PageLayout/Header/FraHeader/FraHeader.tsx

@@ -13,7 +13,7 @@ const FraHeader: React.FC = () => {
   const cycle = useCycle()
 
   return (
-    <div className="app-header no-print">
+    <header className="app-header no-print">
       <img alt="FAO" className="app-header__fao-logo" src={`/img/fao/FAO${i18n.resolvedLanguage}.svg`} />
       <div className="app-header__separator" />
       <div className="app-header__global-fra">
@@ -29,7 +29,7 @@ const FraHeader: React.FC = () => {
         <UserLinks />
         <LinkHome />
       </div>
-    </div>
+    </header>
   )
 }
 

src/client/components/PageLayout/Header/PanEuropeanHeader/PanEuropeanHeader.tsx

@@ -12,7 +12,7 @@ const PanEuropeanHeader: React.FC = () => {
   const cycle = useCycle()
 
   return (
-    <div className="app-header no-print">
+    <header className="app-header no-print">
       <img alt="FAO" src={`/img/fao/FAO${i18n.resolvedLanguage}.svg`} />
       <div className="app-header__separator" />
       <div className="app-header__global-fra">
@@ -24,7 +24,7 @@ const PanEuropeanHeader: React.FC = () => {
         <UserLinks />
         <LinkHome />
       </div>
-    </div>
+    </header>
   )
 }