Adjust anchors

Author: klavierworks

src/components/LabPage/FloatingMenu/FloatingMenu.tsx

@@ -14,7 +14,7 @@ const FloatingMenu = () => {
 
   const isNavigatingToClickedLinkRef = useRef(false);
   useEffect(() => {
-    const sectionAnchorsOnPage = Array.from(document.querySelectorAll('section[id]'));
+    const sectionAnchorsOnPage = Array.from(document.querySelectorAll('section .anchor[id]'));
     const newMenuOptions = sectionAnchorsOnPage.map(section => ({
       label: section.getAttribute('aria-label') || section.id,
       id: section.id,

src/components/LabPage/Section/Section.module.css

@@ -3,6 +3,7 @@
   --side-padding: calc(var(--side-padding-raw));
   background-color: rgb(238, 238, 238);
   padding: 60px 20px;
+  position: relative;
 
   @media (--tablet) {
     padding: 120px var(--side-padding);
@@ -29,4 +30,16 @@
   &:nth-of-type(odd) {
     background-color: white;
   }
+
+  .anchor {
+    position: absolute;
+    top: -150px;
+    left: 0;
+    width: 100%;
+    height: 10px;
+
+    @media (--desktop) {
+      top: -100px;
+    }
+  }
 }

src/components/LabPage/Section/Section.tsx

@@ -10,7 +10,8 @@ type SectionProps = {
 
 const Section = ({ anchor, anchorLabel, children, className, isNarrow }: SectionProps) => {
   return (
-    <section {...(anchor ? { id: anchor, 'aria-label': anchorLabel } : {})} className={`${styles.section} ${className} ${isNarrow ? styles.isNarrow : ''}`}>
+    <section className={`${styles.section} ${className} ${isNarrow ? styles.isNarrow : ''}`}>
+      {anchor && <div id={anchor} className={`${styles.anchor} anchor`} aria-label={anchorLabel} />}
       {children}
     </section>
   )