{"version":3,"file":"SectionNav.DFesnPih.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/uDbUVqaZMEr2q2NMaojJ/LGQW1EYPeqw8QfHERAIs/SectionNav.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useLayoutEffect,useRef,useState}from\"react\";const KNOWN=[\"message\",\"capability\",\"process\",\"work\",\"tools\",\"availability\",\"faq\",\"problem\",\"approach\",\"delivery\",\"journey\",\"shipped\",\"impact\",\"deeper\"];const PRETTY={message:\"Send me a message\",capability:\"Capability\",process:\"Process\",work:\"The work\",tools:\"Tools\",availability:\"Availability\",faq:\"FAQ\",problem:\"The problem\",approach:\"What I did\",delivery:\"How I ran it\",journey:\"The journey\",shipped:\"What shipped\",impact:\"Impact\",deeper:\"Go deeper\"};function readSections(){if(typeof document===\"undefined\")return[];const out=[];for(const id of KNOWN){const el=document.getElementById(id);if(!el)continue;// the curated label wins; a page heading can be a long display line\nconst h=el.querySelector(\"h2, h3\");const heading=h?h.textContent.trim():\"\";out.push({id,label:PRETTY[id]||(heading.length>0&&heading.length<=28?heading:id),top:el.getBoundingClientRect().top+window.scrollY});}out.sort((a,b)=>a.top-b.top);return out;}/**\n * Sticks under the navbar and drops its sections down as a list.\n * Framer wraps an instance in a box its own size, which kills CSS sticky, so\n * this pins itself and leaves a spacer behind. Pinned it spans the full\n * viewport and pads itself back to the content column, so nothing shows\n * through at the edges.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function SectionNav(props){const{label,navOffset,gutter,font,link,labelColor,hairline,paper}=props;const[open,setOpen]=useState(false);const[items,setItems]=useState([]);const[pinned,setPinned]=useState(false);const[box,setBox]=useState({left:0,width:0});const[barH,setBarH]=useState(44);const wrapRef=useRef(null);const headRef=useRef(null);useEffect(()=>{const read=()=>setItems(readSections());read();const t=setTimeout(read,700);return()=>clearTimeout(t);},[]);useLayoutEffect(()=>{if(headRef.current)setBarH(headRef.current.getBoundingClientRect().height+28);},[label,font]);useEffect(()=>{const onScroll=()=>{const el=wrapRef.current;if(!el)return;const r=el.getBoundingClientRect();setBox({left:Math.round(r.left),width:Math.round(r.width)});setPinned(r.top<=navOffset);};onScroll();window.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onScroll);return()=>{window.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onScroll);};},[navOffset]);const list=items.length?items:KNOWN.slice(7).map(id=>({id,label:PRETTY[id]}));const go=(e,id)=>{e.preventDefault();setOpen(false);const el=typeof document!==\"undefined\"&&document.getElementById(id);if(el)window.scrollTo({top:el.getBoundingClientRect().top+window.scrollY,behavior:\"smooth\"});};// pinned: full width, padded back in to sit over the content column\nconst inset=pinned?box.left+gutter:gutter;const bar={boxSizing:\"border-box\",background:paper,borderBottom:\"1px solid \"+hairline,paddingTop:14,paddingBottom:14,paddingLeft:inset,paddingRight:inset,...pinned?{position:\"fixed\",top:navOffset,left:0,right:0,zIndex:20}:{position:\"relative\",width:\"100%\"}};return /*#__PURE__*/_jsx(\"div\",{ref:wrapRef,style:{width:\"100%\",minHeight:barH,...font},children:/*#__PURE__*/_jsxs(\"div\",{style:bar,children:[/*#__PURE__*/_jsxs(\"button\",{ref:headRef,onClick:()=>setOpen(o=>!o),style:{display:\"flex\",alignItems:\"center\",justifyContent:\"space-between\",width:\"100%\",background:\"none\",border:\"none\",padding:0,cursor:\"pointer\",font:\"inherit\",color:labelColor,letterSpacing:\"1.2px\",textTransform:\"uppercase\",fontSize:12},children:[/*#__PURE__*/_jsx(\"span\",{children:label}),/*#__PURE__*/_jsx(\"span\",{style:{flex:\"none\",width:8,height:8,borderRight:\"1.5px solid currentColor\",borderBottom:\"1.5px solid currentColor\",transform:open?\"rotate(-135deg) translate(-2px,-2px)\":\"rotate(45deg) translate(-2px,-2px)\",transition:\"transform .3s cubic-bezier(.4,0,.2,1)\",opacity:.55}})]}),/*#__PURE__*/_jsx(\"div\",{style:{overflow:\"hidden\",maxHeight:open?560:0,opacity:open?1:0,marginTop:open?12:0,transition:\"max-height .36s cubic-bezier(.4,0,.2,1), opacity .22s ease, margin-top .36s cubic-bezier(.4,0,.2,1)\"},children:list.map((s,i)=>/*#__PURE__*/_jsx(\"a\",{href:\"#\"+s.id,onClick:e=>go(e,s.id),style:{display:\"block\",width:\"100%\",padding:\"11px 0\",color:link,textDecoration:\"none\",fontSize:14,borderTop:i===0?\"none\":\"1px solid \"+hairline},children:s.label},s.id))})]})});}SectionNav.defaultProps={label:\"[  ON THIS PAGE  ]\",navOffset:73,gutter:16,link:\"#707070\",labelColor:\"#707070\",hairline:\"#efefef\",paper:\"#ffffff\"};addPropertyControls(SectionNav,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"[  ON THIS PAGE  ]\"},navOffset:{type:ControlType.Number,title:\"Sticks at\",defaultValue:73,min:0,max:200},gutter:{type:ControlType.Number,title:\"Side padding\",defaultValue:16,min:0,max:80},link:{type:ControlType.Color,title:\"Link\",defaultValue:\"#707070\"},labelColor:{type:ControlType.Color,title:\"Label colour\",defaultValue:\"#707070\"},hairline:{type:ControlType.Color,title:\"Hairline\",defaultValue:\"#efefef\"},paper:{type:ControlType.Color,title:\"Background\",defaultValue:\"#ffffff\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SectionNav\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SectionNav.map"],"mappings":"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"}